How to post a file to a form using javascript automatically

Question

I have some client-side JavaScript which will output a jpeg file based on HTML5 canvas manipulation, if the user performs an action such as clicking the "OK" button.

I would like the jpeg output to be automatically loaded into the "Upload Front Side" field in a form, as if the user uploaded the file from his or her own hard drive.

However, I can't seem to get it to work.

Here is the form:

<div class="property-wrapper">
    <label for="upload-front">Upload Front Side</label>
    <input id="upload" class="file" type="file" enctype="multipart/form-data" id="Front-Side" name="properties[Front Side]" onchange="readURL(this);" accept="image/*" /> 
</div>
<script>
    document.getElementById('upload').value="http://upload.wikimedia.org/wikipedia/commons/thumb/2/22/Turkish_Van_Cat.jpg/353px-Turkish_Van_Cat.jpg"
</script>

Could you reformulate your question? I do not really understand what you want to do... Do you want to load an external file from the internet into your canvas? — beardhatcode
– beardhatcode, Commented Jan 2, 2014 at 17:24
The code in the question doesn't appear to match the text describing it. — Quentin
– Quentin, Commented Jan 2, 2014 at 17:30

Community · Accepted Answer · 2017-05-23 12:11:34Z

5

The problem is browsers have several restrictions on what can be done programatically with file upload due to security reasons, have a look at this answer.

The file upload functionality is potentially exploitable, and some browsers will for example not open the explorer box if for example the file upload input field is hidden with display:none.

Most browsers will not allow programatic clicks to a file upload element and require the user to click them instead, to prevent attacks where someone sends a link to a page that immediately steals content from the user's hard drive.

So the functionality you mention does not seem to be feasible due to common browser security restrictions. There are usually no error messages or warnings, it just doesn't work.

An alternative to using the file upload browser input component could be to encode the contents of the file in Base64 and send in the body of an ajax POST for example.

edited May 23, 2017 at 12:11

CommunityBot

11 silver badge

answered Jan 2, 2014 at 17:43

Angular University

43.2k15 gold badges79 silver badges81 bronze badges

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

Comments

dfowler7437 · Accepted Answer · 2014-01-02 17:39:54Z

0

Are you asking how to upload to a server, via a form, the graphic image you extracted from the canvas of your page? This would be useful, I hope to see this answered.

I would start by enabling the user to download/export the image. This might be done with a blob. Ive done this for text data exports, works nicely.

Maybe there is a way to apply the same tricks, just feed the blob/buffer to the server.

Another path might be to "PUT" the file at the server.

Hope this helps.

answered Jan 2, 2014 at 17:39

dfowler7437

4612 silver badges9 bronze badges

Comments

cyberwombat · Accepted Answer · 2014-01-02 17:59:06Z

0

I would ajax POST a base64 encoded string of the image and forget the whole file upload thingy. You can upload the canvas code directly and reconvert it server side if you need a preview or something or see what other outputs are available from your canvas/image converter code.

I am assuming you are uploading to same server so you would not have cross domain issue but otherwise you can setup your server to accept cross domain ajax request very easily.

answered Jan 2, 2014 at 17:59

cyberwombat

40.5k43 gold badges189 silver badges268 bronze badges

Collectives™ on Stack Overflow

How to post a file to a form using javascript automatically

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related