File upload from canvas object

I have a user generated canvas object which I am trying to upload as an image but can’t seem to make it work.

Tried converting the canvas to dataUrl, but coudn’t find a way converting it into a file to be uploaded.

I also tried converting to a Blob (https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob), which works fine and seems the way to go, but cannot seem to get it into a file upload. Do I understand correctly that for security reasons it is not possible to infiltrate a blob into the file input form? Or is there another component to use?

What is the best way to go?

Should I use the server connect upload file function or should I use a custom script to upload the file/blob?

If you use a server connect form then you can use the following:

var form = document.getElementById('form1');
form.dmxExtraData['file'] = blob;

Change form1 to the id of your form, file is the name of the post variable and blob is the variable containing your blob.

If you now submit the form it should include your file.

2 Likes

That worked, thanks so much!

Where does this get added in the server connect form Patrick or where do I add this code?

I seem to have things as what I think would be setup correctly but the actual response is blank in the browser for img_binary.

See below.