Dropzone example

by André Albson

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/dropzone/3.8.4/css/basic.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/dropzone/3.8.4/dropzone.js"></script>
  <form action="UploadImages"
                              class="dropzone"
                              id="my-awesome-dropzone" enctype="multipart/form-data">
                        </form>

JavaScript

Dropzone.options.myAwesomeDropzone = {
            paramName: "file",
            maxFilesize: 10,
            url: 'UploadImages',
            previewsContainer: "#dropzone-previews",
            uploadMultiple: true,
            parallelUploads: 5,
            maxFiles: 20,
            init: function() {
                var cd;
                this.on("success", function(file, response) {
                    $('.dz-progress').hide();
                    $('.dz-size').hide();
                    $('.dz-error-mark').hide();
                    console.log(response);
                    console.log(file);
                    cd = response;
                });
                this.on("addedfile", function(file) {
                    var removeButton = Dropzone.createElement("<a href=\"#\">Remove file</a>");
                    var _this = this;
                    removeButton.addEventListener("click", function(e) {
                        e.preventDefault();
                        e.stopPropagation();
                        _this.removeFile(file);
                        var name = "largeFileName=" + cd.pi.largePicPath + "&smallFileName=" + cd.pi.smallPicPath;
                        $.ajax({
                            type: 'POST',
                            url: 'DeleteImage',
                            data: name,
                            dataType: 'json'
                        });
                    });
                    file.previewElement.appendChild(removeButton);
                });
            }
        };