fix: download button now fetches blob and triggers actual file download
Previously the download link just navigated cross-origin to the media URL. Now uses JS interop to fetch the file as a blob, create an object URL, and trigger a browser download via a hidden anchor element.
This commit is contained in:
@@ -101,10 +101,10 @@
|
||||
title="View full size" @onclick:stopPropagation="true">
|
||||
<i class="bi bi-arrows-fullscreen"></i>
|
||||
</a>
|
||||
<a class="preview-action-btn" href="@OriginalUrl(selectedAsset.Id)" download
|
||||
title="Download" @onclick:stopPropagation="true">
|
||||
<button class="preview-action-btn" @onclick="() => DownloadOriginal(selectedAsset.Id)"
|
||||
@onclick:stopPropagation="true" title="Download">
|
||||
<i class="bi bi-download"></i>
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -217,6 +217,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
async Task DownloadOriginal(Guid id) {
|
||||
await jsRuntime.InvokeVoidAsync("masonryObserver.downloadFile", OriginalUrl(id));
|
||||
}
|
||||
|
||||
static string GetAspectRatio(AssetPreviewDto asset) {
|
||||
if (asset.ResolutionWidth > 0 && asset.ResolutionHeight > 0)
|
||||
return $"{asset.ResolutionWidth} / {asset.ResolutionHeight}";
|
||||
|
||||
@@ -204,6 +204,9 @@
|
||||
transition: color 0.15s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.preview-action-btn:hover {
|
||||
|
||||
@@ -30,5 +30,18 @@ window.masonryObserver = {
|
||||
|
||||
unlockBodyScroll: function () {
|
||||
document.body.style.overflow = '';
|
||||
},
|
||||
|
||||
downloadFile: async function (url) {
|
||||
const response = await fetch(url);
|
||||
const blob = await response.blob();
|
||||
const blobUrl = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = blobUrl;
|
||||
a.download = '';
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(blobUrl);
|
||||
}
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user