JQuery, Programming

File Upload Dialog with drag and drop with jQuery and Bootstrap

Using jQuery to drag and drop files and to show dialog box with bootstrap kind of design, you can easily make file upload with all handle all the events and validation.

Drag-Drop-File-Upload-Dialog-with-jQuery-Bootstrap

First you need to add jQuery and Bootstrap javascript libraries on your web page:

<a href="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js</a>
<a href="//netdna.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js">//netdna.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js</a>

Add jQuery bootstrap plugin’s files

<a href="http://dist/bootstrap.fd.js">http://dist/bootstrap.fd.js</a>

Add new button to click and open dialog

<button id="open_btn" class="btn btn-primary">Upload File</button>

Bind the click event and set options to work upload file

$("#open_btn").click(function () {
    $.FileDialog({
        accept: "*", // MIME type of accepted files, e. g. image/jpeg
        cancelButton: "Close", // cancel button
        dragMessage: "Drop files here", // drop zone message
        dropheight: 400, // the height of drop zone in pixels
        errorMessage: "An error occured while loading file", // error message
        multiple: true, // whether it is possible to choose multiple files or not.
        okButton: "OK", // OK button
        // file reading mode.
        // BinaryString, Text, DataURL, ArrayBuffer
        readAs: "DataURL",
        removeMessage: "Remove file", // remove message
        title: "Load file(s)"
    }); // file dialog title
});

For handle different 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
});

View Demo | Download

Tagged

Leave a Reply

Your email address will not be published. Required fields are marked *