Attach Canvas image created, to input file to upload it. html5, Jquery

Question

In the Create new post section of the page create.php the user has two options:

1) Upload an image using a input[type="file" from its pc.

2) Select an image attached to a meme generator plugin that retrieves the finished canvas image this way....canvas.toDataUrl()

PROBLEM

In the second option, Once the meme is finished, I want to attach it to the input file of the first option to upload it along with the post.

How should I do that?

HTML

  <textarea id="comment"></textarea>
  <input type="file" id="imgtoUpload" />
  <canvas id="meme"></canvas>

JS

  canvas.toDataUrl();// meme to attach

Mike 'Pomax' Kamermans · Accepted Answer · 2018-03-23 04:42:41Z

1

You don't.

<input type="file"> is specifically for files-from-the-computer, which will be resolved at form post time. If you get data from somewhere else, like a canvas.toDataURL(), then add an <input type="hidden" name="fromcanvas"> and have the second option populate that input with the result of toDataURL. And when the user clicks the file input, wipe the hidden field, and if they use the meme generator, wipe the file input field, so that you never get a post with data in both.

Then when the form is posted, have whatever reads the submitted formdata check for both fields: if there is file input associated with your <input type="file">, use that, and if there's data associated with your hidden input, use that instead.

(and of course, make doubly sure that what you're getting really is image data, and not a .php file. The most common way to backdoor a PHP server is to trick an image upload script into blindly writing a file to disk that was sent as form data in an image input. Validate the input by trying to run it through gd or imagemagick or something before you actually write it to disk!)

answered Mar 23, 2018 at 4:42

Mike 'Pomax' Kamermans

54.3k17 gold badges133 silver badges182 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

joe Over a year ago

$(“.fromCanvas”).val(canvas.toDataURL()) So...this would be a possible solution?

Mike 'Pomax' Kamermans Over a year ago

yes, provided you decode it properly on the PHP side (since file input and canvas data uris are different types of data)

joe Over a year ago

I marked your answer. I followed your directions and got it. Thank you.

Collectives™ on Stack Overflow

Attach Canvas image created, to input file to upload it. html5, Jquery

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related