Develop Reference

Firestorage downloading from download url doesn't download my file

I am fetching a file via the download URL as described here
https://firebase.google.com/docs/storage/web/download-files
This is the code I used
var xhr = new XMLHttpRequest();
xhr.responseType = 'blob';
xhr.onload = function(event) {
var blob = xhr.response;
};
xhr.open('GET', this.$data._downloadURL);
xhr.send();
And I get a response with status 200 and in the preview I can see the image. But it doesn't seem to be downloading in my browser. How can I do that?
I tried putting a cors json file in the storage as well but it doesn't seem to have any imact.

You have not told the script to do anything with the data. The part of your code that reads
xhr.onload = function(event) {
var blob = xhr.response;
};
runs when the download is complete. Your data is in the blob variable. If you want to download it, you can try for instance the techniques described here inside the xhr.onload function.

How do I upload the file at a URL using XHRWebRequest?

In a chrome extension I have a url stored as ctx.srcUrl. I am trying to upload the file that the URL points to onto a server. I can upload a file object using XHR with:
function uploadFile(file) {
var xhr = new XMLHttpRequest()
var formData = new FormData()
formData.append('upload', file)
xhr.open('POST', 'https://endpoint.com/upload')
xhr.withCredentials = true
xhr.send(formData)
}
Where file is a Javascript File object (https://developer.mozilla.org/en-US/docs/Web/API/File). I can also download an object using:
function downloadFile() {
const request = new XMLHttpRequest()
request.open('GET', ctx.srcUrl, true)
request.responseType = 'blob'
request.onload = function() {
// response is stored in `request.response`
}
request.send()
}
I'm struggling to work out how to link them up in an efficient manner however, preferably without keeping all of the response in memory at once (using streaming)? The best way I can find of doing it is using FileReader.readAsDataURL() but that has a file limit of ~256MB and some files might be larger than that.
There must be a better way of doing this, can anyone point me in the right direction?

Download blob sometimes fails

I have a chrome app that blocks user's downloads and my code will instead download it in safe way. I want to download blob files with js; my code has worked fine until now, but I have found a blob link that my code fails on and I can't find why. Here is my code:
var request = new XMLHttpRequest();
request.open('GET', uri, true);
request.responseType = 'blob';
request.onload = function (evt) {
var reader = new FileReader();
reader.readAsDataURL(request.response);
reader.onload = function (e) {
var b64 = e.target.result.split("base64,")[1];
var formData = new FormData();
};
};
request.send();
My code based on this answer.
The file that I'm trying to download via js:
This is the website that contains the link
And here is the url link to the blob:
blob:http://worldpopulationreview.com/b18cab08-e62e-47e5-8e31-413f2e73f72d
The error:
GET blob:http://worldpopulationreview.com/b18cab08-e62e-47e5-8e31-413f2e73f72d net::ERR_FILE_NOT_FOUND
Any ideas?

There error means that the file can not be found. This means that the address you are trying to download from doesn't exist on the website.
Try accessing the page via your browser.
Link to the page
You'll see that it returns a 404 error. This means that the URL does not exist.
More info about error 404 here.
This error has nothing to do with your javascript code.

Display tiff image in all browser

I am trying to display tiff image in the browser but it is not working when I am trying to read locally or if I am giving URL of any tiff image. Here is my code .
<script type="text/javascript">
var xhr = new XMLHttpRequest();
xhr.responseType = 'arraybuffer';
xhr.open('GET', " file:///home/aniketshivamtiwari/Desktop/tiffdocument.tif");
xhr.onload = function (e) {
var tiff = new Tiff({buffer: xhr.response});
var canvas = tiff.toCanvas();
document.body.append(canvas);
};
xhr.send();
</script>
I am getting this error
XMLHttpRequest cannot load file:///home/aniketshivamtiwari/Desktop/tiffdocument.tif. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
(anonymous) # (index):54

The error message says it all, you cant load files from your local machine. Upload the file in your project folder and use absulote or relative reference to that.
i.e.: put the file under images/tiffdocument.tif
xhr.open('GET', "images/tiffdocument.tif");

gdrive javascript sdk download url

I'm using this code snippet from gDrive SDK for javascript to download file :
function downloadFile(file, callback) {
if (file.downloadUrl) {
var accessToken = gapi.auth.getToken().access_token;
var xhr = new XMLHttpRequest();
xhr.open('GET', file.downloadUrl);
xhr.setRequestHeader('Authorization', 'Bearer ' + accessToken);
xhr.onload = function() {
callback(xhr.responseText);
};
xhr.onerror = function() {
callback(null);
};
xhr.send();
} else {
callback(null);
}
}
How can i prompt the browser to open the download window when the ajax request is done. How to make the callback function in order to open the dialog for saving the file locally ?

Unfortunately, your approach won't work.
Because of standard browser security constraints, you can't save a file from Javascript.[1]
What you need to do is use the downloadUrl in a new window or src for an iframe to cause the browser to download the file, and prompt the user to save it. You will need to add
&access_token=ya29.YOURACCESSTOKENHERE
to the URL to avoid a 401 error.
Notes
1. Yes I know that HTML5 is starting to support limited filesystem access from Javascript, but (1) it's not widely available, (2) has restrictions on where the file can be saved, and (3) isn't the UX that the OP was asking for.