convert base64 to blob then put back to input file [duplicate]

Question

I'm using the below codes for converting the base64 to blob

function base64tofile(base64){ var mime = base64.split(';base64,')[0].split('data:')[1]; var base64 = base64.split(';base64,')[1]; mime = mime || ''; var sliceSize = 1024; var byteChars = window.atob(base64); var byteArrays = []; for (var offset = 0, len = byteChars.length; offset < len; offset += sliceSize) { var slice = byteChars.slice(offset, offset + sliceSize); var byteNumbers = new Array(slice.length); for (var i = 0; i < slice.length; i++) { byteNumbers[i] = slice.charCodeAt(i); } var byteArray = new Uint8Array(byteNumbers); byteArrays.push(byteArray); } return new Blob(byteArrays, {type: mime}); }

basically, I browse to an input file then convert to base64 after that, I have some image manipulation (camanjs, crop, etc..) processes then as an output will be base64 then convert to blob and upload to server using ajax.

Is it possible to put the blob back to the input file? so then using form I can submit the data to server without using ajax or js, just the native form submit.

why didn't you submit your form directly? File is a specific kind of a Blob. See developer.mozilla.org/en-US/docs/Web/API/File — lx1412
– lx1412, Commented Jul 23, 2019 at 7:08
@lx1412 submitting the form would send only the original image file not the modified one. As stated above, on input change, convert image file to base6 then do some image manipulation using a plugin then an output will be base64. — Juliver Galleto
– Juliver Galleto, Commented Jul 23, 2019 at 7:11
i got it, but you can not modify your local image file on front end. — lx1412
– lx1412, Commented Jul 23, 2019 at 7:16
It is possible though still hackish. But why do you want to do that? Can't you simply populate a FormData and send this instead? developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/… Why do you absolutely want to use the HTML form's method? — Kaiido
– Kaiido, Commented Jul 23, 2019 at 7:19
@lx1412 im using camanjs and theres lots of image manipulation library out there e.g. fabricjs than can modify image on frontend FYI — Juliver Galleto
– Juliver Galleto, Commented Jul 23, 2019 at 7:26

ssten · Accepted Answer · 2019-07-23 07:19:01Z

UPDATE: Actually after some research it turns out it can be done! Only in modern browsers though. You can read about it here. And there is already a good answered question on SO here.

Basically you can set the input through <input type=file>.files

This is not possible. The html file input can only point to a file that actually exists on the computer.

From MDN

You cannot set the value of a file picker from a script — doing something like the following has no effect:

const input = document.querySelector("input[type=file]"); input.value = "foo";

Collectives™ on Stack Overflow

convert base64 to blob then put back to input file [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related