Blobstore upload with javascript

Question

This is the minimal declaration for the HTML in order to upload a file in Blobstore in the upload_url. What is required with this solution is required to click the Submit button in order the content to be submitted and get redirected. How can I do the post in the background with javascript or jQuery without losing the enctype?

<form id="upload_file" action="{{upload_url}}" enctype="multipart/form-data" method="post">
    <input type="file" name="file">
    <input type="submit" name="submit" value="Submit">
</form>

Kevin P · Accepted Answer · 2011-06-21 17:05:36Z

4

The jQuery Form plugin allows you to submit multipart forms in the background with Ajax.

Example:

$('#upload_file').submit(function() { 
    var options = { 
        clearForm: true        // clear all form fields after successful submit 
    }; 
    $(this).ajaxSubmit(options);
    return false; 
});

$('[name=submit]').click(function(){
    $('#upload_file').submit();        
});

Making this work silently requires that you replace your 'submit' input with a 'button' input:

<form id="upload_file" action="{{upload_url}}" enctype="multipart/form-data" method="post">
        <input type="file" name="file">
        <input type="button" name="submit" value="Submit">
</form>

answered Jun 21, 2011 at 17:05

Kevin P

1,65510 silver badges16 bronze badges

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

4 Comments

topless Over a year ago

P I have this working but what I want to avoid is clicking the submit button. Since I have chosen the file I would like to be automatically submited - updated without clicking any button.

Kevin P Over a year ago

Try this: $('[name=file]').change(function(){ $('#upload_file').submit(); });

topless Over a year ago

no luck when I select the file it doesn't look like it triggers .change()

Kevin P Over a year ago

What version of jQuery are you using? Looks like the .change trigger will only work properly on the file input with 1.4.2 or above. Check out this related question.

Collectives™ on Stack Overflow

Blobstore upload with javascript

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related