javascript Howto decode file saved as base64 string and download it

Question

how must I decode base64 string and download file from base64 string? Previosly, I encoded a file with:

            var strEncoded="";
            file = $('#fileinput1')[0].files[0];

            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function () {
                strEncoded = reader.result;
            };

Thank you

@GolezTrol doesn't seem to be PHP involved?

user1693593
– user1693593

2017-02-01 12:16:50 +00:00
Commented Feb 1, 2017 at 12:16 — user1693593
– user1693593, Commented Feb 1, 2017 at 12:16
Not PHP, only javascript

cardonchas
– cardonchas

2017-02-01 12:20:15 +00:00
Commented Feb 1, 2017 at 12:20 — cardonchas
– cardonchas, Commented Feb 1, 2017 at 12:20

er-han · Accepted Answer · 2017-02-01 12:22:58Z

1

You can create a <a> link and give the data to its href. For example i used a data/image base64 like this:

<a href="data:image/png;base64,iVBORw0K........" download>Download</a>

download attribute would do the work.

Or simply try this:

location.href = strEncoded;

And in a function:

download(dataUrl) {
  location.href = dataUrl;
}

<a href="javascript:;" onclick="download(strEncoded);">Download</a>

edited Feb 1, 2017 at 12:22

answered Feb 1, 2017 at 12:19

er-han

1,93115 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

cardonchas Over a year ago

It's only run in chrome, not in IE

er-han Over a year ago

@cardonchas i see, IE is always a pain in the azz. I edited my post, can you try javascript version?

cardonchas Over a year ago

It's run in chrome, but not in IE

Masroor Over a year ago

works for image but failed for a pdf file I used application/pdf as mime type of the base64 encoded data

Kaiido · Accepted Answer · 2017-02-01 12:32:02Z

0

Don't use the b64 version, but instead go directly with the File object you've got from your input.

Up to date browsers do support anchor's download attribute, then you just have to do a.href = URL.createObjectURL(yourFile); a.download = 'yourfile.whateverExtension'.

For older browsers, there are a few hacks, all condensed in the great FileSaver.js library.

Then all you need to do is

var inp = document.querySelector('input');
inp.onchange = function(){
   saveAs(this.files[0], 'yourFile.extension');
  };

<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.js"></script>
<input type="file"/>

answered Feb 1, 2017 at 12:32

Kaiido

139k15 gold badges266 silver badges333 bronze badges

Collectives™ on Stack Overflow

javascript Howto decode file saved as base64 string and download it

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related