JS: how can I base64 encode a local file without XMLHttpRequest?

Question

I'm trying to base64 encode a local file. It's next to my .js file so there's no uploading going on. Solutions like this (using XMLHttpRequest) get a cross-site scripting error.

I'm trying something like this (which doesn't work but it might help explain my problem):

var file = 'file.jpg'
var reader = new FileReader();
reader.onload = function(e) {
   var res = e.target.result;
   console.log(res);
};
var f = reader.readAsDataURL(file);

Anyone have any experience doing this locally?

so you want to base64 encode the file on the disk? – Jaromanda X Aug 11 '16 at 04:19 — Jaromanda X, Aug 11 '16 at 04:19
Is this using nodejs or in browser? – pcnate Aug 11 '16 at 04:33 — pcnate, Aug 11 '16 at 04:33

score 3 · Accepted Answer · edited Jan 18 '21 at 12:35

Solutions like this (using XMLHttpRequest) get a cross-site scripting error.

If using chrome or chromium browser, you could launch with --allow-file-access-from-files flag set to allow request of resource from local filesystem using XMLHttpRequest() or canvas.toDataURL().

You can use <img> element, <canvas> element .toDataURL() to create data URL of local image file without using XMLHttpRequest()

var file = "file.jpg";
var img = new Image;
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
img.onload = function() {
  canvas.width = this.naturalWidth;
  canvas.height = this.naturalHeight;
  ctx.drawImage(this, 0, 0);
  var res = canvas.toDataURL("image/jpeg", 1); // set image `type` to `image/jpeg`
  console.log(res);
}
img.src = file;

You could alternatively use XMLHttpRequest() as described at Convert local image to base64 string in Javascript.

See also How to print all the txt files inside a folder using java script .

For a details of difference of returned data URI from either approach see canvas2d toDataURL() different output on different browser

As described by @Kaiido at comment below

it will first decode it, at this stage it's still your file, then it will paint it to the canvas (now it's just raw pixels) and finally it will reencode it (it has nothing to do with your original file anymore) check the dataURI strings... They're compeltely different and even if you do the canvas operation from two different browsers, you'll have different outputs, while FileReader will always give you the same output, since it encode the file directly, it doesn't decode it.

Actually I think that the flag is also needed for canvas workaround, browsers that do prevent `file://` xhr will taint the canvas if an image from this protocol has been drawn on it. Also, remember that this workaround won't give an exact representation of the file, it will be first decoded to raw bitmap, then re-encoded to whatever you set as parameter of `toDataURL()`. Oh and you always forget to set the canvas width and height in your recent examples, it would be a good habit to include them IMO. — Kaiido, Aug 11 '16 at 05:40
@Kaiido Included setting of `type` at `.toDataURL()`. Missed that portion at Question and initial Answer. _"And It won't even work as a workaround to the actual problem without setting the flag, this should be made clear too."_ Believe this is presently clear to OP, as error was returned without flag being set? — guest271314, Aug 11 '16 at 06:02
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/120657/discussion-between-kaiido-and-guest271314). — Kaiido, Aug 11 '16 at 06:04

JS: how can I base64 encode a local file without XMLHttpRequest?

1 Answers1

Linked