Dropzone example

by Renjith VR

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>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<button type="button" data-toggle="modal"  data-target=".photo-modal-lg" class="btn btn-success image-popup-open">Upload</button>
<div id="dropzone-previews"></div>
<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                
                <div id='content' class="tab-content">
                    <div class="tab-pane active" id="uplod">
                        <form action="UploadImages" class="dropzone" id="my-awesome-dropzone" enctype="multipart/form-data"></form>
                    </div>
                    <div class="tab-pane" id="frm-url">
                        <form action="FetchFromUrl">
                            <div class="control-group">
                                <div class="controls form-inline">
                                    <label for="url">URL</label>
                                    <input type="text" class="form-control" placeholder="http://" id="url-ip" style="width: 450px">
                                    <input type="submit" class="btn btn-success" id="b-url">
                                </div>
                            </div>
                        </form>
                        <div id="url-i-pr"></div>
                    </div>
                    <div class="tab-pane" id="frm-gallery"></div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary"...

JavaScript

$(document).on('click', '.image-popup-open', function(f) {
        $("#myModal").modal('show');
    });


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);
            });
        }
    };
$(document).on('click', '#model-cl1', function(f) {
        $('#myModal').modal('hide');
        /*      $("#url-i-pr .select_img").contents().appendTo('#dropzone-previews');*/
        $("#url-i-pr").html("");
        $("#url-ip").val("");
    });