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>

Answer 1

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>