Javascript, programmatically trigger file download in firefox












7















I have a data uri in memory that I would like the user to download.



This fiddle works in chrome but not FF: http://jsfiddle.net/6W2TY/



When you click run it will download the tiny image in chrome and do nothing in FF. Can anyone help me understand why it doesn't work in FF and what I need to do to make it work?



Thanks!










share|improve this question



























    7















    I have a data uri in memory that I would like the user to download.



    This fiddle works in chrome but not FF: http://jsfiddle.net/6W2TY/



    When you click run it will download the tiny image in chrome and do nothing in FF. Can anyone help me understand why it doesn't work in FF and what I need to do to make it work?



    Thanks!










    share|improve this question

























      7












      7








      7


      2






      I have a data uri in memory that I would like the user to download.



      This fiddle works in chrome but not FF: http://jsfiddle.net/6W2TY/



      When you click run it will download the tiny image in chrome and do nothing in FF. Can anyone help me understand why it doesn't work in FF and what I need to do to make it work?



      Thanks!










      share|improve this question














      I have a data uri in memory that I would like the user to download.



      This fiddle works in chrome but not FF: http://jsfiddle.net/6W2TY/



      When you click run it will download the tiny image in chrome and do nothing in FF. Can anyone help me understand why it doesn't work in FF and what I need to do to make it work?



      Thanks!







      javascript firefox google-chrome dom






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Oct 1 '12 at 15:49









      asutherlandasutherland

      1,12921539




      1,12921539
























          2 Answers
          2






          active

          oldest

          votes


















          5














          You are using the new (html5) download attribute. As far as I know this is only supported in Chrome and not (yet) in Firefox.



          Update 3-2018

          This feature is now supported in almost all major browsers (No IE support).



          Alternative: Using location.href



          Another way to force a download is to redirect the user to the image like this:



          // generate the image
          var img = ""

          // then call a function maybe onClick or something
          downloadImage(img);

          function downloadImage(data) {
          location.href = "data:application/octet-stream;base64," + data;
          }


          Or the short version



          location.href = "data:application/octet-stream;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAOCAYAAAAmL5yKAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAABWSURBVDhPY0xISPh//0UOA7mAiVyNMH2jBjAwkBQGjD9KGBTEJ6OEO0kG2NvbMwCjnXwDsEU5SS5ANuDhjRCGJbPFSQsDdBfIyMhQZgDIQLK9QLWkDABPsQw5I+5qmAAAAABJRU5ErkJggg=="


          Alternative: Server Side



          As an alternative, if you are processing the image serverside you can force a download by setting the content-disposition header.



          PHP Example



          header('Content-Disposition: attachment; filename="image.png"');





          share|improve this answer


























          • I'm building the image I want the user to be able to download client side. Is there any way to let a user download a client side image that I have the data-uri for in FF? It looks like the download attribute has been in chrome for over a year so I'm not sure FF has any plans to support it ever.

            – asutherland
            Oct 1 '12 at 16:21













          • I added my answer to include an javascript only alternative. Is this something you can use?

            – Bart
            Oct 1 '12 at 17:12











          • Unfortunately location.href option means the file doesn't have the right mime type and I cannot set the default file name to anything reasonable, is there a way around that? Marking this as answer regardless as it was quite helpful. Thanks.

            – asutherland
            Oct 1 '12 at 22:19











          • I don't know if you read this, but the only solution (workaround / hack) I can think of to set the mime type and filename is to post the image back to the server and return it again with the right headers.

            – Bart
            Oct 2 '12 at 20:30



















          18














          I realize this is an old post, but I came across it when I had a similar problem downloading files in FF. This may not have worked in FF at the time the question was written, but it does now.



          a = document.createElement('a');
          document.body.appendChild(a);
          a.download = name;
          a.href = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAOCAYAAAAmL5yKAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAABWSURBVDhPY0xISPh//0UOA7mAiVyNMH2jBjAwkBQGjD9KGBTEJ6OEO0kG2NvbMwCjnXwDsEU5SS5ANuDhjRCGJbPFSQsDdBfIyMhQZgDIQLK9QLWkDABPsQw5I+5qmAAAAABJRU5ErkJggg==";
          a.click();


          Changes from the original fiddle:




          1. Add call to document.body.appendChild(a);

          2. Change triggerEvent() to a.click()


          Here is an updated fiddle:
          http://jsfiddle.net/70f91ao7/6/






          share|improve this answer
























          • The key is to attach it to the DOM for this approach to works under Firefox

            – Beeno Tung
            Sep 17 '18 at 23:20











          Your Answer






          StackExchange.ifUsing("editor", function () {
          StackExchange.using("externalEditor", function () {
          StackExchange.using("snippets", function () {
          StackExchange.snippets.init();
          });
          });
          }, "code-snippets");

          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "1"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          autoActivateHeartbeat: false,
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














          draft saved

          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f12676649%2fjavascript-programmatically-trigger-file-download-in-firefox%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown

























          2 Answers
          2






          active

          oldest

          votes








          2 Answers
          2






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes









          5














          You are using the new (html5) download attribute. As far as I know this is only supported in Chrome and not (yet) in Firefox.



          Update 3-2018

          This feature is now supported in almost all major browsers (No IE support).



          Alternative: Using location.href



          Another way to force a download is to redirect the user to the image like this:



          // generate the image
          var img = ""

          // then call a function maybe onClick or something
          downloadImage(img);

          function downloadImage(data) {
          location.href = "data:application/octet-stream;base64," + data;
          }


          Or the short version



          location.href = "data:application/octet-stream;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAOCAYAAAAmL5yKAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAABWSURBVDhPY0xISPh//0UOA7mAiVyNMH2jBjAwkBQGjD9KGBTEJ6OEO0kG2NvbMwCjnXwDsEU5SS5ANuDhjRCGJbPFSQsDdBfIyMhQZgDIQLK9QLWkDABPsQw5I+5qmAAAAABJRU5ErkJggg=="


          Alternative: Server Side



          As an alternative, if you are processing the image serverside you can force a download by setting the content-disposition header.



          PHP Example



          header('Content-Disposition: attachment; filename="image.png"');





          share|improve this answer


























          • I'm building the image I want the user to be able to download client side. Is there any way to let a user download a client side image that I have the data-uri for in FF? It looks like the download attribute has been in chrome for over a year so I'm not sure FF has any plans to support it ever.

            – asutherland
            Oct 1 '12 at 16:21













          • I added my answer to include an javascript only alternative. Is this something you can use?

            – Bart
            Oct 1 '12 at 17:12











          • Unfortunately location.href option means the file doesn't have the right mime type and I cannot set the default file name to anything reasonable, is there a way around that? Marking this as answer regardless as it was quite helpful. Thanks.

            – asutherland
            Oct 1 '12 at 22:19











          • I don't know if you read this, but the only solution (workaround / hack) I can think of to set the mime type and filename is to post the image back to the server and return it again with the right headers.

            – Bart
            Oct 2 '12 at 20:30
















          5














          You are using the new (html5) download attribute. As far as I know this is only supported in Chrome and not (yet) in Firefox.



          Update 3-2018

          This feature is now supported in almost all major browsers (No IE support).



          Alternative: Using location.href



          Another way to force a download is to redirect the user to the image like this:



          // generate the image
          var img = ""

          // then call a function maybe onClick or something
          downloadImage(img);

          function downloadImage(data) {
          location.href = "data:application/octet-stream;base64," + data;
          }


          Or the short version



          location.href = "data:application/octet-stream;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAOCAYAAAAmL5yKAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAABWSURBVDhPY0xISPh//0UOA7mAiVyNMH2jBjAwkBQGjD9KGBTEJ6OEO0kG2NvbMwCjnXwDsEU5SS5ANuDhjRCGJbPFSQsDdBfIyMhQZgDIQLK9QLWkDABPsQw5I+5qmAAAAABJRU5ErkJggg=="


          Alternative: Server Side



          As an alternative, if you are processing the image serverside you can force a download by setting the content-disposition header.



          PHP Example



          header('Content-Disposition: attachment; filename="image.png"');





          share|improve this answer


























          • I'm building the image I want the user to be able to download client side. Is there any way to let a user download a client side image that I have the data-uri for in FF? It looks like the download attribute has been in chrome for over a year so I'm not sure FF has any plans to support it ever.

            – asutherland
            Oct 1 '12 at 16:21













          • I added my answer to include an javascript only alternative. Is this something you can use?

            – Bart
            Oct 1 '12 at 17:12











          • Unfortunately location.href option means the file doesn't have the right mime type and I cannot set the default file name to anything reasonable, is there a way around that? Marking this as answer regardless as it was quite helpful. Thanks.

            – asutherland
            Oct 1 '12 at 22:19











          • I don't know if you read this, but the only solution (workaround / hack) I can think of to set the mime type and filename is to post the image back to the server and return it again with the right headers.

            – Bart
            Oct 2 '12 at 20:30














          5












          5








          5







          You are using the new (html5) download attribute. As far as I know this is only supported in Chrome and not (yet) in Firefox.



          Update 3-2018

          This feature is now supported in almost all major browsers (No IE support).



          Alternative: Using location.href



          Another way to force a download is to redirect the user to the image like this:



          // generate the image
          var img = ""

          // then call a function maybe onClick or something
          downloadImage(img);

          function downloadImage(data) {
          location.href = "data:application/octet-stream;base64," + data;
          }


          Or the short version



          location.href = "data:application/octet-stream;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAOCAYAAAAmL5yKAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAABWSURBVDhPY0xISPh//0UOA7mAiVyNMH2jBjAwkBQGjD9KGBTEJ6OEO0kG2NvbMwCjnXwDsEU5SS5ANuDhjRCGJbPFSQsDdBfIyMhQZgDIQLK9QLWkDABPsQw5I+5qmAAAAABJRU5ErkJggg=="


          Alternative: Server Side



          As an alternative, if you are processing the image serverside you can force a download by setting the content-disposition header.



          PHP Example



          header('Content-Disposition: attachment; filename="image.png"');





          share|improve this answer















          You are using the new (html5) download attribute. As far as I know this is only supported in Chrome and not (yet) in Firefox.



          Update 3-2018

          This feature is now supported in almost all major browsers (No IE support).



          Alternative: Using location.href



          Another way to force a download is to redirect the user to the image like this:



          // generate the image
          var img = ""

          // then call a function maybe onClick or something
          downloadImage(img);

          function downloadImage(data) {
          location.href = "data:application/octet-stream;base64," + data;
          }


          Or the short version



          location.href = "data:application/octet-stream;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAOCAYAAAAmL5yKAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAABWSURBVDhPY0xISPh//0UOA7mAiVyNMH2jBjAwkBQGjD9KGBTEJ6OEO0kG2NvbMwCjnXwDsEU5SS5ANuDhjRCGJbPFSQsDdBfIyMhQZgDIQLK9QLWkDABPsQw5I+5qmAAAAABJRU5ErkJggg=="


          Alternative: Server Side



          As an alternative, if you are processing the image serverside you can force a download by setting the content-disposition header.



          PHP Example



          header('Content-Disposition: attachment; filename="image.png"');






          share|improve this answer














          share|improve this answer



          share|improve this answer








          edited Mar 2 '18 at 8:31

























          answered Oct 1 '12 at 16:03









          BartBart

          557413




          557413













          • I'm building the image I want the user to be able to download client side. Is there any way to let a user download a client side image that I have the data-uri for in FF? It looks like the download attribute has been in chrome for over a year so I'm not sure FF has any plans to support it ever.

            – asutherland
            Oct 1 '12 at 16:21













          • I added my answer to include an javascript only alternative. Is this something you can use?

            – Bart
            Oct 1 '12 at 17:12











          • Unfortunately location.href option means the file doesn't have the right mime type and I cannot set the default file name to anything reasonable, is there a way around that? Marking this as answer regardless as it was quite helpful. Thanks.

            – asutherland
            Oct 1 '12 at 22:19











          • I don't know if you read this, but the only solution (workaround / hack) I can think of to set the mime type and filename is to post the image back to the server and return it again with the right headers.

            – Bart
            Oct 2 '12 at 20:30



















          • I'm building the image I want the user to be able to download client side. Is there any way to let a user download a client side image that I have the data-uri for in FF? It looks like the download attribute has been in chrome for over a year so I'm not sure FF has any plans to support it ever.

            – asutherland
            Oct 1 '12 at 16:21













          • I added my answer to include an javascript only alternative. Is this something you can use?

            – Bart
            Oct 1 '12 at 17:12











          • Unfortunately location.href option means the file doesn't have the right mime type and I cannot set the default file name to anything reasonable, is there a way around that? Marking this as answer regardless as it was quite helpful. Thanks.

            – asutherland
            Oct 1 '12 at 22:19











          • I don't know if you read this, but the only solution (workaround / hack) I can think of to set the mime type and filename is to post the image back to the server and return it again with the right headers.

            – Bart
            Oct 2 '12 at 20:30

















          I'm building the image I want the user to be able to download client side. Is there any way to let a user download a client side image that I have the data-uri for in FF? It looks like the download attribute has been in chrome for over a year so I'm not sure FF has any plans to support it ever.

          – asutherland
          Oct 1 '12 at 16:21







          I'm building the image I want the user to be able to download client side. Is there any way to let a user download a client side image that I have the data-uri for in FF? It looks like the download attribute has been in chrome for over a year so I'm not sure FF has any plans to support it ever.

          – asutherland
          Oct 1 '12 at 16:21















          I added my answer to include an javascript only alternative. Is this something you can use?

          – Bart
          Oct 1 '12 at 17:12





          I added my answer to include an javascript only alternative. Is this something you can use?

          – Bart
          Oct 1 '12 at 17:12













          Unfortunately location.href option means the file doesn't have the right mime type and I cannot set the default file name to anything reasonable, is there a way around that? Marking this as answer regardless as it was quite helpful. Thanks.

          – asutherland
          Oct 1 '12 at 22:19





          Unfortunately location.href option means the file doesn't have the right mime type and I cannot set the default file name to anything reasonable, is there a way around that? Marking this as answer regardless as it was quite helpful. Thanks.

          – asutherland
          Oct 1 '12 at 22:19













          I don't know if you read this, but the only solution (workaround / hack) I can think of to set the mime type and filename is to post the image back to the server and return it again with the right headers.

          – Bart
          Oct 2 '12 at 20:30





          I don't know if you read this, but the only solution (workaround / hack) I can think of to set the mime type and filename is to post the image back to the server and return it again with the right headers.

          – Bart
          Oct 2 '12 at 20:30













          18














          I realize this is an old post, but I came across it when I had a similar problem downloading files in FF. This may not have worked in FF at the time the question was written, but it does now.



          a = document.createElement('a');
          document.body.appendChild(a);
          a.download = name;
          a.href = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAOCAYAAAAmL5yKAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAABWSURBVDhPY0xISPh//0UOA7mAiVyNMH2jBjAwkBQGjD9KGBTEJ6OEO0kG2NvbMwCjnXwDsEU5SS5ANuDhjRCGJbPFSQsDdBfIyMhQZgDIQLK9QLWkDABPsQw5I+5qmAAAAABJRU5ErkJggg==";
          a.click();


          Changes from the original fiddle:




          1. Add call to document.body.appendChild(a);

          2. Change triggerEvent() to a.click()


          Here is an updated fiddle:
          http://jsfiddle.net/70f91ao7/6/






          share|improve this answer
























          • The key is to attach it to the DOM for this approach to works under Firefox

            – Beeno Tung
            Sep 17 '18 at 23:20
















          18














          I realize this is an old post, but I came across it when I had a similar problem downloading files in FF. This may not have worked in FF at the time the question was written, but it does now.



          a = document.createElement('a');
          document.body.appendChild(a);
          a.download = name;
          a.href = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAOCAYAAAAmL5yKAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAABWSURBVDhPY0xISPh//0UOA7mAiVyNMH2jBjAwkBQGjD9KGBTEJ6OEO0kG2NvbMwCjnXwDsEU5SS5ANuDhjRCGJbPFSQsDdBfIyMhQZgDIQLK9QLWkDABPsQw5I+5qmAAAAABJRU5ErkJggg==";
          a.click();


          Changes from the original fiddle:




          1. Add call to document.body.appendChild(a);

          2. Change triggerEvent() to a.click()


          Here is an updated fiddle:
          http://jsfiddle.net/70f91ao7/6/






          share|improve this answer
























          • The key is to attach it to the DOM for this approach to works under Firefox

            – Beeno Tung
            Sep 17 '18 at 23:20














          18












          18








          18







          I realize this is an old post, but I came across it when I had a similar problem downloading files in FF. This may not have worked in FF at the time the question was written, but it does now.



          a = document.createElement('a');
          document.body.appendChild(a);
          a.download = name;
          a.href = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAOCAYAAAAmL5yKAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAABWSURBVDhPY0xISPh//0UOA7mAiVyNMH2jBjAwkBQGjD9KGBTEJ6OEO0kG2NvbMwCjnXwDsEU5SS5ANuDhjRCGJbPFSQsDdBfIyMhQZgDIQLK9QLWkDABPsQw5I+5qmAAAAABJRU5ErkJggg==";
          a.click();


          Changes from the original fiddle:




          1. Add call to document.body.appendChild(a);

          2. Change triggerEvent() to a.click()


          Here is an updated fiddle:
          http://jsfiddle.net/70f91ao7/6/






          share|improve this answer













          I realize this is an old post, but I came across it when I had a similar problem downloading files in FF. This may not have worked in FF at the time the question was written, but it does now.



          a = document.createElement('a');
          document.body.appendChild(a);
          a.download = name;
          a.href = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAOCAYAAAAmL5yKAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAABWSURBVDhPY0xISPh//0UOA7mAiVyNMH2jBjAwkBQGjD9KGBTEJ6OEO0kG2NvbMwCjnXwDsEU5SS5ANuDhjRCGJbPFSQsDdBfIyMhQZgDIQLK9QLWkDABPsQw5I+5qmAAAAABJRU5ErkJggg==";
          a.click();


          Changes from the original fiddle:




          1. Add call to document.body.appendChild(a);

          2. Change triggerEvent() to a.click()


          Here is an updated fiddle:
          http://jsfiddle.net/70f91ao7/6/







          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Dec 3 '14 at 20:04









          John MyczekJohn Myczek

          10.1k32542




          10.1k32542













          • The key is to attach it to the DOM for this approach to works under Firefox

            – Beeno Tung
            Sep 17 '18 at 23:20



















          • The key is to attach it to the DOM for this approach to works under Firefox

            – Beeno Tung
            Sep 17 '18 at 23:20

















          The key is to attach it to the DOM for this approach to works under Firefox

          – Beeno Tung
          Sep 17 '18 at 23:20





          The key is to attach it to the DOM for this approach to works under Firefox

          – Beeno Tung
          Sep 17 '18 at 23:20


















          draft saved

          draft discarded




















































          Thanks for contributing an answer to Stack Overflow!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f12676649%2fjavascript-programmatically-trigger-file-download-in-firefox%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          Popular posts from this blog

          Full-time equivalent

          Bicuculline

          さくらももこ