Develop Reference

Downloading a file from a url

I don't have much JS experience but thought this should be fairly simple - still, can't get it to work.
I need to download a file from an external server (AWS - no authentication, just plain url) when a web page loads (no clicks).
Would have been nice to just use the HTML5 'download' attribute - but doesn't work in this case.
So, have tried various JS code snippets I found.
Closest I got was:
function downloadFile(url, fileName){
fetch(url, { method: 'get', mode: 'no-cors', referrerPolicy: 'no-referrer' })
.then(res => res.blob())
.then(res => {
const aElement = document.createElement('a');
aElement.setAttribute('download', fileName);
const href = URL.createObjectURL(res);
aElement.href = href;
// aElement.setAttribute('href', href);
aElement.setAttribute('target', '_blank');
aElement.click();
URL.revokeObjectURL(href);
});
}
downloadFile('https://www.google-analytics.com/analytics.js', 'gooleAnalytics.js')
While this looks like it is working it actually downloads an empty file.
Ideas?
Cheers.
Trying to download a remote file on page load.
Resulted in empty file being downloaded.

Since you're using fetch in no CORS mode here, you won't be able to read the response of it, which is why the download is blank. Looking at the URL you provided, it doesn't send an Access-Control-Allow-Origin header so you won't be able to request it in the normal way. In order for it to work, you'll need to use a CORS proxy, use the iframe hack Albert Logic Einstein mentioned, or just have people right click save link as.

Download ANSI zip file in front end, generated by C# back end

I have a C# backend generating a zip file in memory (with System.IO.Compression) and sending it to my front end. If I download the zip file before sending it, it is working well and is in ANSI encoding (found on notepad++).
This is how I return my file currently, I have tried many different ways to do it, such as simply returning a file without headers, but right now it looks like this :
[HttpPost]
[Route("GetUserWorkContext")]
public async Task<IActionResult> GetUserWorkContext([FromBody] GetUserWorkContextRequest request, [FromServices] IExportManager exportManager)
{
var zipStream = await exportManager.GetUserWorkContext(userId, request.IncludeArchived);
HttpContext.Response.Headers.Add("Content-Disposition", "attachment; filename = test.zip; charset=Windows-1252");
HttpContext.Response.Headers.Add("Content-Length", zipStream.ToArray().Length.ToString());
return File(zipStream.ToArray(), "application/octet-stream");
}
It seems that no matter how I download the file with Javascript (front-end), it is saved with utf8 encoding (found with notepad++ again). I tried using js-file-download ( https://www.npmjs.com/package/js-file-download ) or creating blobs, but anything I end up downloading is encoded in utf8.
How should I go about downloading this file in Javascript without corrupting the archive ?
Here is my current attempt in Javascript, using a piece of code I found here (JavaScript blob filename without link) to download the file :
function getUserWorkContext({ includeArchived }) {
return new Promise(function () {
Axios.post('/api/Export/GetUserWorkContext', {includeArchived})
.then((response) => {
if(response.data){
var blobObject = new Blob([response.data], {type: 'application/zip;charset=Windows-1252'});
downloadFile(blobObject, "test.zip");
}
})
}
function downloadFile(file, fileName) {
if (navigator.msSaveBlob) { // For ie and Edge
return navigator.msSaveBlob(file, fileName);
}
else {
let link = document.createElement('a');
link.href = window.URL.createObjectURL(file);
link.download = fileName;
document.body.appendChild(link);
link.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window }));
link.remove();
window.URL.revokeObjectURL(link.href);
}
}
Note : the actual zip is 3,747KB where as the download zip from Javascript is always much bigger, in this case : 6,917KB.

This is a problem with axios:
I guess, you should use blob or arraybuffer as responseType for axios.
{ responseType: 'blob' }
// responseType indicates the type of data that the server will
respond with // options are: 'arraybuffer', 'document', 'json',
'text', 'stream' // browser only: 'blob'
responseType: 'json' // default
Check this answer: https://stackoverflow.com/a/60461828/2487565
=== 8< ======================= previous version ======================= 8< ===
Your Content-Disposition header is wrong. There is no charset parameter for Content-Disposition header.
Check the docs: MDN HTTP Content-Disposition
That's why your file is still sent in UTF-8, since your charset parameter has no effect.
To use UTF-8:
Delete both Content- headers from C# and the charset parameter from JavaScript
var blobObject = new Blob([response.data], {type: 'application/zip'});
If you really need to use Windows-1252, you can try to set it with the content type parameter.
return File(zipStream.ToArray(), "application/octet-stream;charset=Windows-1252");
Check this also: Charset Encoding in ASP.NET Response
By the way, UTF-8 is the preferred charset encoding: W3 QA choosing encodings
And, yes #nikneem, there is no need in the Content-Disposition and Content-Length headers. They will be generated automatically.

Dealing with encoding in Flask file uploads/downloads

I have a react client that takes in user input as a file and sends it to my remote Flask server for storage. I send the file in the form of a Werkzeug FileStorage object and in the remote server I store it with file.save(path). In the react client I'm trying to build a way to download the file from the server, however I'm running into problems. Currently my program is working for downloading .txt files. I'm able to do this though a fetch javascript request:
fetch(FETCH_URL, {
method: 'POST',
body: data,
headers: {
'Content-Type': 'application/json'
}
}).then((response) => {
var a = response.body.getReader();
a.read().then(({ done, value }) => {
saveAsFile(new TextDecoder("utf-8").decode(value), 'filename.txt');
}
);
});
function saveAsFile(text, filename) {
const type = 'application/text'; // modify or get it from response
const blob = new Blob([text], {type});
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = filename;
a.click();
}
Thanks to some help I got in this post: Download file in react client from flask remote server
I know this code is specifically made to work only with .txt files based on the type being passed in to Blob, but the front end is not the real problem.
The real problem is in my remote flask server, the following code is what is called in the flask server:
with open(filename, 'r') as f:
contents = f.read()
return contents
I tried returning the file itself but the server gives an error:
"ValueError: I/O operation on closed file."
So I decided to return the contents of the file as shown above.
The problem arises when I try to get a file for example "download.jpeg". Reading the file gives the following error:
"UnicodeDecodeError: 'utf-8' codec can't decode byte 0x89 in position 0: invalid start byte"
From what I understand Flask works exclusively with 'utf-8' and I assume this means the file in the server is on 'utf-8' encoded.
Does anyone have a suggestion or guidance on a solution or a workaround maybe a way to change the files encoding when I save it on the server or something else that could help me with what I'm trying to do?

Fetch's Response has blob() to convert the response directly to blob, so you don't have to read the stream, you don't have to find out it's content type or anything. Just try the below solution.
fetch(FETCH_URL, {
method: 'POST',
body: data,
headers: {
'Content-Type': 'application/json'
}
}).then((response) => {
response.blob().then((blob) => {
saveBlob(blob, 'filename');
});
});
function saveBlob(blob, filename) {
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = filename;
a.click();
}

Try this: make sure to install axios. Also you probably won't have to deal with content type like above said. Obviously changing the method type to POST and bring ur data in.
axios(FETCH_URL, {
method: 'GET',
responseType: 'blob', // important
}).then((response) => { //Creates an <a> tag hyperlink that links the excel sheet Blob object to a url for downloading.
const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', `${Date.now()}.xlsx`); //set the attribute of the <a> link tag to be downloadable when clicked and name the sheet based on the date and time right now.
document.body.appendChild(link);
link.click(); //programmatically click the link so the user doesn't have to
document.body.removeChild(link);
URL.revokeObjectURL(url); //important for optimization and preventing memory leak even though link element has already been removed.
});

HTML5 download attribute not working when download external PDF file on Chrome

The code is very simple:
<a download href="http://www.pdf995.com/samples/pdf.pdf">Download</a>
I expect it to save the pdf file but it always open the file on the browser.
It works with other file type, just have problem with PDF file.

See the MDN documentation:
This attribute only works for same-origin URLs.
Presumably, the other file types, where you see it "working", are ones where the default behaviour is to download the file.

If the URL that you're trying to fetch has an Access-Control-Allow-Origin header, you can work around this by using fetch and blobs:
function forceDownload(blob, filename) {
// Create an invisible anchor element
const anchor = document.createElement('a');
anchor.style.display = 'none';
anchor.href = window.URL.createObjectURL(blob);
anchor.setAttribute('download', filename);
document.body.appendChild(anchor);
// Trigger the download by simulating click
anchor.click();
// Clean up
window.URL.revokeObjectURL(anchor.href);
document.body.removeChild(anchor);
}
function downloadResource(url, filename) {
fetch(url, {
headers: new Headers({
Origin: window.location.origin,
}),
mode: 'cors',
})
.then(response => response.blob())
.then(blob => forceDownload(blob, filename))
.catch(e => console.error(e));
}
downloadResource('https://memegen.link/xy/fetch/all_the_things.jpg?watermark=none');
This has a few limitations:
the file size limit of blobs is about 500MB
some websites will not allow for cross-origin requests, leading to errors like this one below
Failed to load https://example.com/example.jpg: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://example.com' is therefore not allowed access.
Ref 1: Leeroy in https://stackoverflow.com/a/49500465/1268612
Ref 2: https://davidwalsh.name/javascript-download
Full explanation: https://blog.logrocket.com/programmatic-file-downloads-in-the-browser-9a5186298d5c/

Google Drive resumable upload with javascript

I'm trying to upload files to Google Drive using Google APIs Client Library for JavaScript and resumable upload type.
I authenticate and get the upload URI successfully, but I ran into problems while sending the actual data. If the file contains only ASCII characters, the file is sent successfully to Drive, but in case of special characters (åäö) or binary file (such as PNG) the file gets corrupted. My guess would be that somewhere in the process the file is encoded to unicode in client side.
If I use "btoa()" to encode the raw data to base64 and add header "Content-Encoding: base64" to the data sending request, the file uploads fine. Using this method however increases the overhead for 33%, which is quite a lot when the planned upload size of files is 100MB to 1GB.
Here are some code examples:
Getting the resumable upload URI:
// Authentication is already done
var request = gapi.client.request({
"path": DRIVE_API_PATH, // "/upload/drive/v2/files"
"method": "POST",
"params": {
"uploadType": "resumable"
},
"headers": {
"X-Upload-Content-Type": self.file.type,
//"X-Upload-Content-Length": self.file.size
// If this is uncommented, the upload fails because the file size is
// different (corrupted file). Manually setting to the corrupted file
// size doesn't give 400 Bad Request.
},
"body": {
// self.file is the file object from <input type="file">
"title": self.file.name,
"mimeType": self.file.type,
"Content-Lenght": self.file.size,
}
});
Sending the whole file in one go:
// I read the file using FileReader and readAsBinaryString
// body is the reader.result (or btoa(reader.result))
// and this code is ran after the file has been read
var request = gapi.client.request({
"path": self.resumableUrl, // URI got from previous request
"method": "PUT",
"headers": {
//"Content-Encoding": "base64", // Uploading with base64 works
"Content-Type": self.file.type
},
"body": body
});
Am I missing something? Is it possible to upload file in binary stream? I am new to uploading files in HTML and Javascript and I haven't found any examples using Google Javascript library with resumable upload. There is similar question in SO with no answers.

Blob types are a hot topic for XMLHttpRequest implementations and they are not truly mature. I'd recommend you to stick with base64 encoding. Google's JavaScript client lib doesn't support resumable uploads because it's very unlikely that a client side browser app uploads very large files directly to Google Drive.

What works
To upload a binary blob, use github/googleapi's cors-upload-sample or use my gist fork, UploaderForGoogleDrive, which will grab access_token out of the gapi client for you.
Here is an ugly mixture of Promise and callback code that works for me. As a prerequisite, gapi,UploaderForGoogleDrive, JSZip need to be loaded via <script> tags. The snippet also omits gapi initialization and the API secrets, which are also necessary.
function bigCSV(){ // makes a string for a 300k row CSV file
const rows = new Array(300*1000).fill('').map((v,j)=>{
return [j,2*j,j*j,Math.random(),Math.random()].join(',');
});
return rows.join("\n");
}
function bigZip(){ // makes a ZIP file blob, about 8MB
const zip = new window.JSZip();
zip.folder("A").file("big.csv", bigCSV());
return zip.generateAsync({type:"blob", compression:"DEFLATE"});
// returns Promise<blob>
}
function upload2(zipcontent){
'use strict';
const parent = 'root';
const spaces = 'drive';
const metadata = {
name: 'testUpload2H.zip',
mimeType: 'application/zip',
parents: [parent]
};
const uploader = new window.UploaderForGoogleDrive({
file: zipcontent,
metadata: metadata,
params: {
spaces,
fields: 'id,name,mimeType,md5Checksum,size'
},
onProgress: function(x){
console.log("upload progress:",Math.floor(100*x.loaded/x.total));
},
onComplete: function(x){
if (typeof(x)==='string') x = JSON.parse(x);
// do something with the file metadata in x
console.log("upload complete: ");
},
onError: function(e){ console.log("upload error: ",e); }
});
uploader.upload();
}
function uploadZipFile(){
'use strict';
(bigZip()
.then(upload2)
);
}
What doesn't work
As of Nov 2017, uploading a binary blob with the gapi.client.request call is not going to work, because of an issue where gapi removes the PUT payload
I've also tried using base64 with gapi, which works. but deposits base64 files, not true binaries; and the fetch API in cors mode, which half-worked but produced CORS-related errors and response hiding, at least for me.