Browser only downloading certain Base64 file types

Question

I have Base64 files that I am trying to have the user download. I do not need these or want these to display in the browser. I need these to download. The data seems to be coming back fine, but only certain types of files are behaving.

I am grabbing down the data in an ajax call and then checking to see if there is any data.

$('button').on('click', function(){
   ...ajax call
  if (data) {
          var encode = 'data:image/' + data.dataTypeCode + ';base64,'
          var image = encode+data.data;
          window.open(image, '_blank');
      }
  })

This is only opening the word, excel, gif, mpg, tif and pdf files. This is not opening the png, jpg, mp3 files which I find odd.

At which browser are you trying the code? What is the message when the new `window` opens? Why do you expect `.png`, `.jpg` or `.mp3` files to be offered for download by the browser when navigated to a `data URI` representation of the file? What do you mean by "not opening the png, jpg, mp3 files"? — guest271314, Jan 17 '18 at 19:03
@guest271314, I am currently trying in chrome...but need it to work in all browsers. I am not getting any message. Just a blank window pops up. Oh the times I wish for errors. — zazvorniki, Jan 17 '18 at 19:05
@guest271314, because that is how the code is written and is working for other file types? — zazvorniki, Jan 17 '18 at 19:07
Chrome devs recently disallowed top frame navigation to `data URI`s, see [Base64 PDF in new tab shows Blank Page before Refresh](https://stackoverflow.com/questions/45558645/base64-pdf-in-new-tab-shows-blank-page-before-refresh). — guest271314, Jan 17 '18 at 19:07
@guest271314, the pdf is actually downloading though. Is there a more graceful way to download these files? — zazvorniki, Jan 17 '18 at 19:09
You can set the MIME type of the `data URL` to `"application/octet-stream"` to offer the file foe download. See [How to download a file without using element with download attribute or a server?](https://stackoverflow.com/questions/38711803/how-to-download-a-file-without-using-a-element-with-download-attribute-or-a-se), [How to build PDF file from binary string returned from a web-service using javascript](https://stackoverflow.com/questions/12876000/how-to-build-pdf-file-from-binary-string-returned-from-a-web-service-using-javas/) — guest271314, Jan 17 '18 at 19:10
@guest271314, All of those solutions are basically what I'm doing though. Just either through html or building an a element through javascript. — zazvorniki, Jan 17 '18 at 19:14
The code at the original question does not offer `.png`, `.jpg` or `.mp3` files for download (save for browsers which do not natively support rendering `.mp3` files), the code opens a new `window` with the `data URI` set at `location.href` — guest271314, Jan 17 '18 at 19:15
@guest271314, the code above doesn't open a new window when a download is available it just downloads the file.And the mime type you have above opens the same files that I listed in my question and does not open the ones that I listed above as well. — zazvorniki, Jan 17 '18 at 19:16
Not following your last comment. Opening a `.png` or `.jpg` file in a new `window` should not prompt the user with an offer to download the file simply due to the URL being a `data URI` representation of the file. — guest271314, Jan 17 '18 at 19:18
@guest271314, But it is offering a download for word, gif, tif, mpg, and pdf files. Switching the mime type just allowed for those same files to be downloaded and did not include the png, jpg or mp3. — zazvorniki, Jan 17 '18 at 19:20
If the browser does not have a plugin installed to handle word or `.pdf` files, or other MIME type that the particular browser is not capable of parsing and rendering, then the browser could open a desktop application to handle the content. You can also define that functionality yourself at the local computer OS settings, or use `navigator.registerContentHandler()`. Browsers require some form of plugin to render `.pdf` files. Am not aware of any browser which parses and renders MS Word files by default. — guest271314, Jan 17 '18 at 19:23
Similarly, `.tiff` files are not generally parsed and rendered by browsers. — guest271314, Jan 17 '18 at 19:29
@guest271314, the pdf's and tif files are downloading as expected. That is not the issue here. I do not need them to display in the browser, I need them to download. — zazvorniki, Jan 17 '18 at 19:31
You can use `` element with `download` attribute and `href` set to the `data URI` to offer the file for download to user. You cannot force a user to download a file. — guest271314, Jan 17 '18 at 19:32
@guest271314, the a does the same exact thing. I am not forcing them to do anything. They click on the download button....to download. — zazvorniki, Jan 17 '18 at 19:36
The code at the question does not offer a file for download. The code at the question opens a `data URI` at a new `window`. No "download" button appears at the code at the question. If the file is rendered at the browser the user should be able to right-click and select `Save as...` — guest271314, Jan 17 '18 at 19:37
I thought the on click of a button would be implied. I added to show hat yes this is happening when you click a button. The file does not render on the page. I need the above code to work with all file types. It is currently only working with the above listed. — zazvorniki, Jan 17 '18 at 19:43

score -1 · Answer 1 · answered Jan 17 '18 at 19:44

-1

You cannot force a user to automatically download a file simply due to the file represented as a data URI or Blob URL being opened in a window. You can offer a file to be downloaded.

const a = document.createElement("a");
a.download = "fileName";
a.href = /* data URI, Blob URL*/;
document.body.appendChild(a);
a.click();

answered Jan 17 '18 at 19:44

guest271314

1
15
104
177

Comments are not for extended discussion; this conversation has been [moved to chat](http://chat.stackoverflow.com/rooms/163354/discussion-on-answer-by-guest271314-browser-only-downloading-certain-base64-file). – Brad Larson Jan 17 '18 at 20:18

Browser only downloading certain Base64 file types

1 Answers1