How to create a File object from binary data in JavaScript

Question

I'm probably missing something simple here, but how would I create a File object in JavaScript given the binary data as received from an AJAX request?

$.ajax({
  url: "http://example.com/image.jpg",
  success: function(data) {
    // Convert binary data to File object
  }
});

this seems relevant: stackoverflow.com/questions/8390855/… — Jonah
– Jonah, Commented Aug 17, 2013 at 0:26

David Jones · Accepted Answer · 2013-08-17 05:43:51Z

12

I finally figured this out. In order to avoid cross-site scripting issues, I created a proxy endpoint on my server. Then I can pass the image URL to my server, which then executes a GET request on the remote file, converts the response to Base64, and sends it back to the browser. The browser can then convert the data back to binary and create a Blob (which is as good as a File for my purposes).

$.ajax({
  url: apiRoot + "/proxy",
  data: {url: "http://example.com/image.jpg"},
  success: function(data) {
    var binary = atob(data.split(',')[1]);
    var array = [];
    for (var i = 0; i < binary.length; i++) {
      array.push(binary.charCodeAt(i));
    }
    var file = new Blob([new Uint8Array(array)], {type: 'image/jpeg'});
  }
});

answered Aug 17, 2013 at 5:43

David Jones

10.3k30 gold badges93 silver badges146 bronze badges

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

1 Comment

jofftiquez Over a year ago

if I used ` var file = new File([new Uint8Array(array)], {type: 'image/jpeg'});` how do I get the name of the image?

Collectives™ on Stack Overflow

How to create a File object from binary data in JavaScript

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related