jQuery File Upload not triggering upload

Question

I'm using this code to upload files:

<form>
<script src="/static/js/vendor/jquery.ui.widget.js"></script>
<script src="/static/js/jquery.iframe-transport.js"></script>
<script src="/static/js/jquery.fileupload.js"></script>

<p>
    <input id="fileupload" type="file" name="files[]" data-url="/upload-files/" multiple="multiple">
</p>

<p>
    <button id="upload-images-button" class="upload-images btn btn-success btn-large">Add images</button>
</p>
</form>

<script>

$(document).ready(function() {
    $('.upload-images').click(function() {
        $('#fileupload').trigger('click');
    });
});

$(function () {
    $('#fileupload').fileupload({
        autoUpload: true,
        dataType: 'json',
        done: function (e, data) {
            alert('uploaded');
        }
    });
});

</script>

Clicking #fileupload works fine: it opens the browser file selection window, and once I select a file, it makes a request to data-url and triggers alert('uploaded') .

But clicking #upload-images-button doesn't work: it opens the browser file selection window, but after I select a file, nothing happens.

Answer 1

I finally figured it out. The <button> was acting as a submit button—so instead of triggering fileupload() , it was attempting to submit the form. Adding type="button" to the <button> solved it by making the button behave like an ordinary button.

Answer 2

If someone else is looking for this

From the wiki documentation here: https://github.com/blueimp/jQuery-File-Upload/wiki/Multiple-File-Input-Fields-in-One-Form

The following is a short howto on how to add an additional file input field to the example: In index.html duplicate the span tag with the class "fileinput-button" like this:

<form id="fileupload" action="php/index.php" method="POST" enctype="multipart/form-data">
<div class="row">
    <div class="span16 fileupload-buttonbar">
        <div class="progressbar fileupload-progressbar"><div style="width:0%;"></div></div>
        <span class="btn success fileinput-button">
            <span>Add files...</span>
            <input type="file" name="files[]" multiple>
        </span>
        <!-- Extra file input start /-->
        <span class="btn fileinput-button">
            <span>Other...</span>
            <input type="file" name="files2[]" multiple>
        </span>
        <!--/ Extra file input stop -->
        <button type="submit" class="btn primary start">Start upload</button>
        <button type="reset" class="btn info cancel">Cancel upload</button>
        <button type="button" class="btn danger delete">Delete selected</button>
        <input type="checkbox" class="toggle">
    </div>
</div>
<br>
<div class="row">
    <div class="span16">
        <table class="zebra-striped"><tbody class="files"></tbody></table>
    </div>
</div>

Hence using the fileinput-button class helped me.

Answer 3

This question is a possible duplicate Jquery File upload .

But to answer your question you can do it like this:

$(function () {
    $('#fileupload').fileupload({
        autoUpload: true,
        dataType: 'json',
        add: function (e, data) {            
            $(".upload-images").unbind('click').on('click', function() {
                data.submit();
            });
        },
        done: function (e, data) {
             alert('uploaded');
        }
    });
});

Doing this will prevent double-posting