I have stored the file in my Firebase storage and I got the download URL as well. How do I initiate download in the browser? Right now it is only opening a new window with the file. Here is what I tried:
downloadFile=(file)=>{
var element=document.createElement('a');
element.style.display= "none";
element.setAttribute('href', file.fileUrl)
element.setAttribute('download', file.filename)
document.body.appendChild(element)
element.click()
document.body.removeChild(element)
}
Related
Folder structure on server:
-JAVA_PROJECT
---------DOWNLOAD_FOLDER
---------src
---------target
-REACT PROJECT
---------Public
---------src
---------node_modules
I have zip file in DOWNLOAD_FOLDER. Onclick of a button on react page i want to download the zip file.
My Code:
var urls = [
"/files/ProductList.zip",
];
var url = urls.pop();
var a = document.createElement("a");
a.setAttribute("href", url);
a.setAttribute("download", "");
a.setAttribute("target", "_blank");
a.click();
I am able to download only the files placed in PUBLIC folder. Is there any wway to traverse location to DOWNLOAD_Folder and download the zip file?
Or shall i fetch zip file content using axios and download file?
Please suggest.
In react application, it display the file in new tab using window.open(blobURL). Following is code snippet:
const fileURL = window.URL.createObjectURL(file);
window.open(fileURL);
The fileURL variable generated url like "blob:http://localhost:3010/9d8996ad-8c96-4d42-ba9c-80a79d0fcd91" and user try to save the file, it stores as the Guid name("9d8996ad-8c96-4d42-ba9c-80a79d0fcd91"). How can we download as "test.pdf".
I have a PDF file stored in a directory within the application (assets/pdf/fileName.pdf). I need to display it on a new tab on a button click from a dialog.
Here is what I have, after looking at various answers:
In *.component.ts:
openPDF() {
this.myService.fetchPDF().subscribe(
res => {
let file = new window.Blob([res], {type: 'application/pdf'});
let fileURL = window.URL.createObjectURL(file);
window.open(fileURL, '_blank');
}
);
}
In *.service.ts:
fetchPDF(): any {
const path = 'assets/pdf/fileName.pdf';
return this.httpClient.get(PathResolver.resolveStatic(path),{responseType : 'blob'});
}
I already tried using responseType : 'arraybuffer', but it didn't work out either.
Here are the threads I have looked at:
How to Display blob (.pdf) in an AngularJS app
Angular 2 download PDF from API and Display it in View
PDF Blob - Pop up window not showing content
Failed to load PDF document - Angular JS - BLOB
I am not sure why are you using httpClient. The outcome that you want could be simply achieved by the following code
In *.service.ts:
fetchPDF(): any {
const path = 'assets/pdf/fileName.pdf'
return path;
}
In *.component.ts:
openPDF() {
window.open(this.myService.fetchPDF(), '_blank');
}
You will either need to use the html embed tag (most likely also using a safe pipe), a PDF viewer (like Google PDF Viewer) or you can open the PDF in a new tab (this is the more common approach I see). It depends on your preference.
Succesfully i have made to Upload files into firebase storage, but now i want to display all files in table and to have option to download each file.I've read the documentation in firebase but it won't work.When i click the button which function is to get all files and the i want to visualize them in table which users can see:
Show file function:
showFileUrl(){
storageRef.child('UploadedFiles/').listAll().then(function(res) {
res.items.forEach(function(folderRef) {
console.log("folderRef",folderRef.toString());
var blob = null;
var xhr = new XMLHttpRequest();
xhr.open("GET", "downloadURL");
xhr.responseType = "blob";
xhr.onload = function()
{
blob = xhr.response;//xhr.response is now a blob object
console.log(blob);
}
xhr.send();
});
}).catch(function(error) {
});
}
This is log of the network which i found when debugging.What i need to do to get all data and visualize it in table and to hava a download button and when is pressed to download the file
Network log:
Storage in firebase:
Blob object of the files:
Your code gets a list of all the files, but it doesn't actually to anything to read the data for each file.
When using the Web client SDK, the only way to get the data for a file is through a download URL as shown here. So you'll need to:
Loop through all the files you get back from listAll() (you're already doing this).
Call `getDownloadURL as shown here, to get a download URL for each file.
Then use another library/function (such as fetch()/XMLHTTPRequest) to read the data for each file.
Alternatively, if your files are images, you can stuff the download URL in an img tag as the preview.
In my app I download several kinds of files (like audio,video,pdf,powerpoint,ect) .
So I receive those data from the webserver as byte[] objects.
So I would like to open them with a video player or a pdfreader now.
What am I supposed to do?
I tried this code but I guess it only works if ou have a file stored in your project's folder(that's not my case)...doesn't it?
// Access the file.
StorageFile pdfFile = await Windows.ApplicationModel.Package.Current.InstalledLocation.GetFileAsync("FileToRead.pdf");
// Launch the pdf file.
await Windows.System.Launcher.LaunchFileAsync(pdfFile);
Use this to get a file from Isolated Storage
var file = await ApplicationData.Current.LocalFolder.GetFileAsync(filename);