Add file to input type file with jQuery

I am using a library called Croppie.js that crops images. What I am trying to do is :

• Upload a picture thanks to an input type=file that only accepts image files
• Edit it thanks to Croppie.js methods
• Put the generated image back into the file input, replacing the original image

Croppie.js is able to generate a blob thanks to its function result. Therefore here is what it would look like :

$("#confirm-photo-edit").click(function(){
    $("#photo-to-crop").croppie('result', 'blob').then(function(editedImg){
        // Here something like $("#photo-input").files.push(editedImg);
    });
});

Thus my questions are :

• Do I have to convert from Blob to File ?
• How do I replace the original image that's in the input by the edited one, editedImg ?

Thanks.

This is not possible the access the file itself of an input with the type file in most browsers. This is because of security reasons. However it is possible do store your file as a character based string representation. For Example a base64 string. Almost every programming environment has something to decode base64 too.