Making a downloadable file with the dataURL

Question

I am trying to make a downloadable file from only a dataURL and I am not sure why it is not working. I am reading the dataURL from a file and inserting its dataURL into an with the download attribute. but when i generate de click the page goes blank and says it can´t find the page. Here is how I am trying to do it.

reader.readAsDataURL(file);
reader.onload = function (evt) {
    var element = document.createElement('a');
    element.setAttribute('href', evt.target.result);
    var name=filename.split(".");
    element.setAttribute('download', 'filename');

    element.style.display = 'inline-block';
    document.body.appendChild(element);

    element.click();

    document.body.removeChild(element);
 }

From the code above I obtain this

How can I properly make a download action for the dataURL?

Can you please share your HTML code? – Jack Bashford Nov 22 '18 at 23:20 — Jack Bashford, Nov 22 '18 at 23:20
I get the file from this html form: ChooseFile – Alejandro Peña Nov 22 '18 at 23:26 — Alejandro Peña, Nov 22 '18 at 23:26
https://stackoverflow.com/a/75244388/1243247 – João Pimentel Ferreira Jan 26 '23 at 10:04 — João Pimentel Ferreira, Jan 26 '23 at 10:04

GonzaH · Accepted Answer · 2018-12-02T00:00:07.587

Your approach is wrong.

The readAsDataURL method is used to read the contents of the specified Blob or File. The result will be base64 encoded string.

The readAsDataUrl method can be used to make a image preview.

To download the file you can go by this approach

<!DOCTYPE html>
<html>
  <head> </head>
  <body>
     <form>
        <label for="file">ChooseFile</label>
        <input type="file" id="myFile" accept="image/*">
    </form>

    <script>
        document.getElementById("myFile").addEventListener("change", downloadFile);

        function downloadFile() {            
            let file = this.files[0];
            let url = URL.createObjectURL(file);

            let link = document.createElement('a');
            link.href = url;
            link.download = file.name;
            link.click();
            link = null;

            URL.revokeObjectURL(url);
        }
    </script>
  </body>
</html>

Useful resources

Making a downloadable file with the dataURL

1 Answers1