1

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.

Juliver Galleto
  • 8,831
  • 27
  • 86
  • 164
  • why didn't you submit your form directly? `File` is a specific kind of a `Blob`. See https://developer.mozilla.org/en-US/docs/Web/API/File – lx1412 Jul 23 '19 at 07: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 Jul 23 '19 at 07:11
  • i got it, but you can not modify your local image file on front end. – lx1412 Jul 23 '19 at 07:16
  • [It is possible](https://stackoverflow.com/questions/47119426/how-to-set-file-objects-and-length-property-at-filelist-object-where-the-files-a/47172409#47172409) though still hackish. But why do you want to do that? Can't you simply populate a FormData and send this instead? https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data Why do you absolutely want to use the HTML form's method? – Kaiido Jul 23 '19 at 07: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 Jul 23 '19 at 07:26
  • @Kaiido I'm doing that currently but I'm unto this php server thing, so I'm wondering If its possible. – Juliver Galleto Jul 23 '19 at 07:28
  • Well it's possible only in very recent browsers, while you can replicate the exact same request using AJAX since IE10 era. My advice: ask for what you're having trouble with on the AJAX+PHP case instead of trying to do this. – Kaiido Jul 23 '19 at 07:32
  • @Kaiido maybe I'll just forget this one and move on to FormData instead – Juliver Galleto Jul 23 '19 at 07:37
  • https://jsfiddle.net/mrfy4d86/ use http://danml.com/download.html to save modified file some location and set its path to input programatically – Prince Kumar Sharma Jul 23 '19 at 07:54
  • @Warewolf how to set file path manually to input file after triggering the download function? – Juliver Galleto Jul 23 '19 at 08:18
  • @JuliverGalleto try https://stackoverflow.com/a/47522812/1305001 – Prince Kumar Sharma Jul 23 '19 at 11:06
  • @Warewolf I don't quite get it, from the reference page, I only see the datatransfer being set to input.files but in what way I can set the new blob or output of the download js you've refer programmatically? obviously, theres no drag and drop actions in my case. – Juliver Galleto Jul 24 '19 at 02:11

1 Answers1

1

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";
ssten
  • 1,848
  • 1
  • 16
  • 28