File Download
In this page you will find some demos for downloading files with <FileMosaic/> and <FileCard/> components.
Same origin URL
When only
downloadUrl is specified, FileMosaic will perform the download only for same-origin URLs since it uses the anchor tag under the hood.NarutoAndSasukevsMomoshiiki.mp4
download_fileDifferent origin URL and 'downloadUrl' prop specified
When only
downloadUrl is specified and if the resource is located in any other host (on Stean for instance), the component will open a new tab and display the content.
Thor.jpeg
28.00 MB
image/jpeg
Different origin URL and 'onDownload' prop specified
For avoiding the behaviour described above, you can do you own download implementation by overriding the download function by setting the
The approach we use here can be summerized in 4 steps:
onDownload prop. There is an example of how to do it with pure javascript.The approach we use here can be summerized in 4 steps:
- Make a GET request with fetch API (you can use axios or any other way to fetch resources from internet).
- Create an Object URL from the Blob file.
- Create an anchor tag set the attributes, append it to the document, and click it programatically.
- Finally, revoke the Object URL and remove the anchor from document.
Thor.jpeg
28.00 MB
image/jpeg
API
See the documentation below for a complete reference to all of the props available to the components mentioned here.
