Dropzone example

by Che Sampat

HTML

<script src="http://smsiland.com/js/Dropjone/dropzone.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
 <div id="dzopen"></<div></div>>

<div id="media-upload-previews"></div>

CSS

.th-img {
    margin-right:2px;
    margin-bottom:2px;
}
.img:hover {
}

JavaScript

$("i#dzopen").dropzone({
    paramName: "file",
    maxFilesize: 10,
    url: 'UploadImages',
    previewsContainer: "#media-upload-previews",
    uploadMultiple: true,
    parallelUploads: 5,
    maxFiles: 20,
    acceptedFiles: "image/*,audio/*,video/*",
    init: function () {
        this.on("success", function (file, responseText) {
            alert(file);
            alert(responseText);
            console.log(file);
            console.log(responseText);
        });
    this.on("thumbnail", function (file, dataUrl) {
        $('#media-upload-previews').append('<img class="th-img" src="' + dataUrl + '" width="50" height="50" alt="">');
    });
    this.on("removedfile", function (file) {});
    this.on("complete", function (file) {
        alert(file);
    });
}
});