Front end base64/blob asset upload via form submission in CraftCMS3

Question

Goal

I only have baes64/blob data available from a <canvas /> and want to upload the image via from submission in front-end.

Methods I've tried

I've read about Uploading Files from Front-End Entry Forms in doc.

CraftCMS ONLY supports <input type="file">. The file type input does not support accepting re-assign value like other input tags directly.

Answer 1

Assets fields do actually support submitting Base64-encoded data; it just wasn’t documented. Done now though!

Answer 2

The file type input now support reassign value.
Steps:

1. convert your blob into file obj

2. Update your Filelist in js.

3. Updated Filelist replace with your input files.

   let file = new File([blob], fileName);
   let list = new DataTransfer();
   list.items.add(file);
   $(input)[0].files = myFileList;

Here is original thread