Unable to request service with blob content-type by REST API (GET), the file goes corrupted, below is a snippet that I used to get get the file.
PDF File is retrive from docware
while checking the downloaded pdf file size is less than the original file from the server and it was corrected.
handleDownload(url,fileName){
var element = document.createElement("a");
var file = new Blob([url], { type: "application/pdf", });
element.href = URL.createObjectURL(file);
element.download = fileName;
element.click();
}
Related
I have a django application deployed on AWS EBS. I have a function that takes a blob and create URL of it so that I can download the pdf file from the site. The function is working perfectly on localhost but in prod environment the created url from URL.createObjectURL() is redirecting to the error page or 404 page. Im using nginx as the reverse proxy. I have checked the blob is valid and the django function is generating the pdf layout correctly. Below is my js code to build the pdf download link
function showFile(blob){
var newBlob = new Blob([blob], {type: "application/pdf"})
if (!newBlob) {
console.error("Blob object is not valid");
return;
}
// Create a link pointing to the ObjectURL containing the blob.
const data = window.URL.createObjectURL(newBlob);
console.log(data)
var link = document.createElement('a');
link.href = data;
link.open="file.pdf";
link.download = 'Calculation.pdf';
link.click()
}
the console.log(data) is returning https://<mydomain>/d6527ea6-5c1d-457a-bfb2-2b6aff01ae31
Any idea on how I can make it work in my prod env?
Thank you
I tried to log the flow and everything is returning correctly. So I am not sure what is the issue
I'm trying to upload video using blobUrl, but it is not getting uploaded properly and always giving file size 64 bytes. Following is the code I have written.
onFilesSelected(evt) {
const file = evt.target.files[0];
const videoBlobUrl = URL.createObjectURL(file);
fileObject = new File([videoBlobUrl], file.name, { type: file.type });
const formData = new FormData();
formData.append('file', fileObject);
formData.append('type', 'video');
// Send `formData` to API
}
Can anyone please help me, what I'm doing wrong.
P.S.: I am not using FileReader API, because for large files it's too slow to show the preview.
I am trying to open a downloaded a zip file sent to me against a GET request. I am using axios for my api requests.
PROBLEM
File is downloaded. But I am not able to extract or open it. Empty archive issue.
What I am using?
This is my response handler:
const data = response.data
const url = window.URL.createObjectURL(new Blob([data]));
const link = document.createElement("a");
link.href = url;
link.setAttribute("download", `report.zip`);
document.body.appendChild(link);
link.click();
link.parentNode.removeChild(link);
The API works fine. Tested with Postman. Able to download and work with files within that zip.
The above code works fine for csv file type.
I suspect that Blob thing. Please share what could be the problem.
I'm not 100% sure, but maybe you're just missing the type for the blob. This is the function I'm using to download files with Ajax. There's also a special path for Internet Explorer/Edge, because it will block the synthetic link click.
const downloadFile = (data, filename, type = "application/zip) => {
const blob = new Blob([data], { type })
if(navigator.msSaveBlob) {
window.navigator.msSaveBlob(blob,filename)
} else {
const url = window.URL.createObjectURL(blob)
const link = document.createElement('a')
link.href = url
link.setAttribute('download', filename)
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
}
}
So you can use it in your code:
const data = response.data
downloadFile(data, "report.zip")
I have such code snippet that used to be work with the previous versions of Google Chrome, but now it does not work. When I run this script I redirected to the page with the content of the file(it's a text) and with AWS URL(the same as in setAttribute).
var element = document.createElement('a');
element.setAttribute('href', 'https://s3-us-east-1.amazonaws.com/XXX/XXX/XXX?Signature=XXX&Expires=XXX&AWSAccessKeyId=XXX');
element.setAttribute('download', 'filename.txt');
document.body.appendChild(element);
element.click();
How to download this file?
I made an error in the comments.
Chrome still favours download attribute, but it completely ignores it if the anchor element has cross origin attributes ( meaning, if the file is hosted on a different domain).
To be able to download it, file needs to be served with header: Content-Disposition: attachment;
Check this tutorial to see how to set Content-Disposition in s3 management console: http://iwantmyreal.name/s3-download-only-presigned-upload
Here is my solution:
let downloadImage = url => {
let urlArray = url.split("/")
let bucket = urlArray[3]
let key = `${urlArray[4]}/${urlArray[5]}`
let s3 = new AWS.S3({ params: { Bucket: bucket }})
let params = {Bucket: bucket, Key: key}
s3.getObject(params, (err, data) => {
let blob=new Blob([data.Body], {type: data.ContentType});
let link=document.createElement('a');
link.href=window.URL.createObjectURL(blob);
link.download=url;
link.click();
})
}
The url parameter refers to the full url of the image.
I'm trying to make simple file server. I have Node.js backend with MongoDB GridFS storage to store files. I'm getting files from server by gridfs-stream. On the front-end I`m using Angular. And I have two major problems:
When I'm using Blob to serve downloads, filename becomes: "d1c393df-b0d9-4ae5-befe-8d45b183eb54..." kind. I read a lot of docs about it and didn`t find any solutions.
When I`m serving downloads only by Express without authentication, files load correctly. But I send auth info via Angular and without them application will throw the error. I can specify route without authentication but this makes my application unsafe.
I hope you help me to:
Find another way to download files of any format.
Change my existing code to get things work correctly
My Angular Service to get files by constructing a Blob:
getFilesFactory.download = function(filename){
$http.get('/api/files/' + filename, {responseType:'arraybuffer'})
.then(function(data){
var stringCT = data.headers('Content-Type').toString();
console.log(stringCT);
var contentType = stringCT.substring(1, stringCT.length - 1);
console.log(contentType);
switch (contentType) {
case "image/jpeg":
file = new Blob([data.data], {type: 'image/jpeg'});
fileURL = URL.createObjectURL(file);
$window.open(fileURL);
break;
case "application/pdf":
file = new Blob([data.data], {type: 'application/pdf'});
fileURL = URL.createObjectURL(file);
$window.open(fileURL);
break;
case "application/msword":
file = new Blob([data.data], {type: 'application/msword'});
fileURL = URL.createObjectURL(file);
$window.open(fileURL);
break;
case "application/octet-stream":
file = new Blob([data.data], {type: 'application/octet-stream'});
fileURL = URL.createObjectURL(file);
$window.open(fileURL);
break;
default: console.log("no contentType match");
}
});
};
You don't need to use ajax for downloading file and opening it in using $window.open(fileURL);. You can just open new window with '/api/files/' + filename url and browser will start to download content. And you can control Content-Type and file name on a server side. You can take a look on example: Nodejs send file in response