I'm trying to use the jQuery File Upload plugin to upload some files in an ajax form. I'm trying to follow the directions for the "Basic" plugin, but the documentation is a bit sparse.

I don't see any way to create a "Start Upload" button. I also don't quite understand how to set progress bars for individual uploads. I see I can set data.context in the add callback, but how does that work if there are multiple files in data.files?

I'm trying to use the jQuery File Upload plugin to upload some files in an ajax form. I'm trying to follow the directions for the "Basic" plugin, but the documentation is a bit sparse.

I don't see any way to create a "Start Upload" button. I also don't quite understand how to set progress bars for individual uploads. I see I can set data.context in the add callback, but how does that work if there are multiple files in data.files?

• javascript
• jquery

• I used this plugin for a little while but I found it pretty limiting. I switched to github./johnlanz/jquery-fileuploader-codeigniter and it's been much easier to work with. Just something to consider if you find jQuery-File-Upload difficult to work with. – Motive Commented Aug 6, 2012 at 17:42

1 Answer 1

All markup must be wrapped in a form, here's the markup for the form.

<form id="fileupload" action="/path/to/your/controller/ext" method="POST" type="multiplart/form-data">...everything below this goes in here </form>

This is the markup for creating a 'Start Upload' button.

<button class="btn btn-primary start" type="submit">
    <span>Start upload</span>
</button>

Here's the markup for creating a 'Add Files' button.

<span class="btn btn-success fileinput-button">
   <span>Add files...</span>
   <input type="file" multiple="" name="files[]">
</span>

Here's the markup for creating a 'Cancel Upload' button.

<button class="btn btn-warning cancel" type="reset">
    <span>Cancel upload</span>
</button>

Here's the markup for creating a 'Delete' button.

<button class="btn btn-danger delete" type="button">
    <span>Delete</span>
</button>

Here's the markup for showing the progress of a single file. Each file is processed synchronously meaning that this progress bar will always show the progress of the currently queued file.

<div class="span5 fileupload-progress fade">
    <!-- The global progress bar -->
    <div aria-valuemax="100" aria-valuemin="0" role="progressbar" class="progress progress-success progress-striped active">
        <div style="width:0%;" class="bar"></div>
    </div>
    <!-- The extended global progress information -->
    <div class="progress-extended">&nbsp;</div>
</div>

Here is the HTML used for holding the file data as it's being processed.

<table class="table table-striped" role="presentation">
    <tbody data-target="#modal-gallery" data-toggle="modal-gallery" class="files"></tbody>
 </table>

You can see this is a standard 'submit' button. It will be used to process our form. When you click it, the form will attempt to upload all file parts.

The HTML for the progress bar, as assumed by the code above..

<div id="progress">
    <div class="bar" style="width: 0%;"></div>
</div>

$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result, function (index, file) {
                $('<p/>').text(file.name).appendTo(document.body);
             });
        },
        progressall: function (e, data) {
           var progress = parseInt(data.loaded / data.total * 100, 10);
           $('#progress .bar').css(
               'width',
               progress + '%'
           );
        }
   });
});

As per the site, each javascript file a ment concerning it's functionality and requirement. Let's break it down

jQuery

<script src="//ajax.googleapis./ajax/libs/jquery/1.7.2/jquery.min.js"></script>
//We need the jQuery core. No need for an explanation.

jQuery UI Widget's are used throughout, we must include them if **we don't already include the jQuery UI core, or jQuery UI.widget core

<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
<script src="js/vendor/jquery.ui.widget.js"></script>

There's a Template Factory Plugin utilized to automatically generate the element when you drag / drop / add it to the list. You'll want to include this.

<!-- The Templates plugin is included to render the upload/download listings -->
<script src="http://blueimp.github./JavaScript-Templates/tmpl.min.js"></script>

Do you want to be able to resize and preview images? I bet you do

<!-- The Load Image plugin is included for the preview images and image resizing functionality -->
<script src="http://blueimp.github./JavaScript-Load-Image/load-image.min.js"></script>

This is for HTML5 Canvas to Blob support. It maintains simliar functionality to the above, however, is necessary for HTML5 uploading.

<!-- The Canvas to Blob plugin is included for image resizing functionality -->
<script src="http://blueimp.github./JavaScript-Canvas-to-Blob/canvas-to-blob.min.js"></script>

This next one is pretty self-explanatory, we don't need these, but he uses them for the demo.

<!-- Bootstrap JS and Bootstrap Image Gallery are not required, but included for the demo -->
<script src="http://blueimp.github./cdn/js/bootstrap.min.js"></script>
<script src="http://blueimp.github./Bootstrap-Image-Gallery/js/bootstrap-image-gallery.min.js"></script>

If the browser doesn't support XHR file uploads, then we use an iFrame in the background to mimic the functionality. You need this for browser support.

<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="js/jquery.iframe-transport.js"></script>

The rest of these are core files related to the Plugin its self.

<!-- The basic File Upload plugin -->
<script src="js/jquery.fileupload.js"></script>

<!-- The File Upload file processing plugin -->
<script src="js/jquery.fileupload-fp.js"></script>

<!-- The File Upload user interface plugin -->
<script src="js/jquery.fileupload-ui.js"></script>

This next one isn't quite so self exlpanatory. Localization handles language differentiation.

<!-- The localization script -->
<script src="js/locale.js"></script>

Finally, this is the meat to our potatoes. Main.js handles all our of script execution and conditionalizing. This is the file you'll want to familiarize yourself with. If you inspect their page, you'll see everything that's going on. A simple copy + paste will suffice; however, you'll need to change the URL values within this script to match the server you plan on using.

<!-- The main application script -->
<script src="js/main.js"></script>

Good luck.