Make Browser Download/save Files Without User Interaction

I need to create a small browser-based application that helps users download/save, and possibly print to the default printer, a large number of files from a webserver we have no co

Solution 1:

As the comments to my question says, this isn't really allowed by the browsers for security reasons.

My workaround for now (only tested using IE11) is to manually change the security settings of the users browser, and then download the files as a blob into a javascript variable using AJAX, followed by upload of same blob to my own server again using AJAX.

"My own server" is a Django site created for this purpose, that also knows which files to download for the day, and provide the javascript needed. The user goes to this site to initiate the daily download after performing the SSO in a separate browser tab.

On the server I can then perform whatever operations needed for said files.

Many thanks to this post https://stackoverflow.com/a/13887220/833320 for the handling of binary data in AJAX.

1) In IE, add the involved sites to the "Local Intranet Zone", and enable "Access data sources across domains" for this zone to overcome the CORS protection otherwise preventing this.

Of course, consider the security consequences involved in this...

2) In javascript (browser), download the file as a blob and POST the resulting data to my own server:

var x = newXMLHttpRequest();
x.onload = function() {
    // Create a formvar fd = newFormData();
    fd.append('csrfmiddlewaretoken', '{{ csrf_token }}'); // Needed by Django
    fd.append('file', x.response); // x.response is a Blob object// Upload to your servervar y = newXMLHttpRequest();
    y.onload = function() {
        alert('File uploaded!');
    };
    y.open('POST', '/django/upload/');
    y.send(fd);
};
x.open('GET', 'https://external.url', true);
x.responseType = 'blob';    // <-- This is necessary!
x.send();

3) Finally (in Django view for '/django/upload/'), receive the uploaded data and save as file - or whatever...

filedata = request.FILES['file'].read()

with open('filename', 'wb') as f:
    f.write(filedata)

Thanks all, for your comments.

And yes, the real solution would be to overcome the SSO (that requieres the user), so it all could be done by the server itself.

But at least I learned a little about getting/posting binary data using modern XMLHttpRequests. :)

Solution 2:

Actually, I had a problem like it, I wanted to download a binary file(an image) and store it and then use it when I need it, So I decided to download it with Fetch API Get call:

const imageAddress = 'an-address-to-my-image.jpg'; // sample addressfetch(imageAddress)
  .then(res => res.blob)  // <-- This is necessary!
  .then(blobFileToBase64)
  .then(base64FinalAnswer =>console.log(base64FinalAnswer))

The blobFileToBase64 is a helper function that converts blob binary file to a base64 data string:

constblobToBase64 = blob => {
  const reader = newFileReader();
  reader.readAsDataURL(blob);
  returnnewPromise(resolve => {
    reader.onloadend = () => {
      resolve(reader.result);
    };
  });
};

In the end, I have the base64FinalAnswer and I can do anything with it.