Drag & Drop File Upload Dialog with jQuery and Bootstrap

A jQuery plugin which displays a drag & drop file uploader in a popup dialog using Bootstrap's modal component. Similar to the Wordpress' file upload widget.

How to use it:

1. Include jQuery library and Twitter's Bootstrap 3 framework on your web page.

<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

2. Include the jQuery Bootstrap File Dialog plugin's files on the web page.

<link href="dist/bootstrap.fd.css" rel="stylesheet">
<script src="dist/bootstrap.fd.js"></script>

3. Create a button to trigger the file upload dialog.

<button id="open_btn" class="btn btn-primary">Open dialog</button>

4. Initialize the plugin to create a basic file upload dialog.

$("#open_btn").click(function() {
  $.FileDialog({//OPTIONS});
});

5. Options and defaults.

$.FileDialog({

// MIME type of accepted files, e. g. image/jpeg
accept: "*",

// cancel button
cancelButton: "Close",

// drop zone message
dragMessage: "Drop files here",

// the height of drop zone in pixels
dropheight: 400,

// error message
errorMessage: "An error occured while loading file",

// whether it is possible to choose multiple files or not.
multiple: true,

// OK button
okButton: "OK",

// file reading mode.
// BinaryString, Text, DataURL, ArrayBuffer
readAs: "DataURL",

// remove message
removeMessage: "Remove file",

// file dialog title
title: "Load file(s)"

});

6. Events.

// handle files choice when done
.on('files.bs.filedialog', function(ev) {
  var files_list = ev.files;
  // DO SOMETHING
});


// handle dialog cancelling
on('cancel.bs.filedialog', function(ev) {
  // DO SOMETHING
});

Change log:

2015-11-19

• Fixed: Most of the “Auxiliary string options for internationalization” do not have an effect.

2015-09-20

• Fixed Remove file from list

2015-09-17

• Fixed Remove file from list on FF.

---

This awesome jQuery plugin is developed by Saluev. For more Advanced Usages, please check the demo page or visit the official website.