CODEWITHSUNDEEP
javascriptphplaraveldropzone.jsdropzone
farooq
farooq

Reputation: 1673

Dropzone removing uploaded file manually

I'm building a form which uses dropzone to upload files. I can able to upload a file easily . I also added an option to remove an uploaded file by using ,

addRemoveLinks: true

But it removes the file in the preview pane only , but not in server where the file stored. Is there any way to write a manual ajax request in dropzone to remove the uploaded file in dropzone ? My blade file which contains the dropzone .


<div class="col-md-3 text-center">
                <label class="checkbox-inline"><input type="checkbox" name = "RC" id = "RC" value="RC">RC</label>
                <div class="dropzone" id="dropzoneFileUpload">
                  <label for="file" class="control-label text-center">Choose a file</label>
                  <span class="control-fileupload">   
                    <img src="{{URL::asset('/images/image_upload.svg')}}" width="50px" class="upload-icon">
                  </span>
                </div>
                <div class="deleteRC" id = "deleteRC">
                  <button type ="button" class="btn btn-danger" style="cursor:'pointer';" onclick = "Deleteimg();" data-toggle="tooltip" data-placement="top" title="Delete"><span class="glyphicon glyphicon-trash"></span></button>
                </div>
              </div>

<script type="text/javascript">
var baseUrl = "{{ url('/') }}";
        var token = "{{ csrf_token() }}";
        var documentType = $("#RC").val();
        Dropzone.autoDiscover = false;
        var myDropzone = new Dropzone("div#dropzoneFileUpload", {
            url: baseUrl + "/dropzone/uploadImage",
            addRemoveLinks: true,
            params: {
                _token: token,
                documentType: documentType
            },
            success:function(file, response)
            {
              doctype = doctype.concat(response['documentType']);
              $("#documentType").val(doctype);
              doc = doc.concat(response['doc']);
              $("#document").val(doc);
              alert("Upload completed");
              //document.getElementById("deleteRC").style.display = "block";
            },
            error: function (file, response) {
            file.previewElement.classList.add("dz-error");
            alert('File name already exists');
        }
        });
</script>

Upvotes: 3

Views: 508

Answers (1)

delv123
delv123

Reputation: 146

You can use the removedfile option, that you can call once you removed a file from the list

addRemoveLinks: true,
removedfile: function(file) {
    var name = file.name;        
    $.ajax({
        type: 'POST',
        url: 'url.php',
        data: "id="+name,
        dataType: 'html'
    });
var _del;
return (_del= file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;        
              }

Upvotes: 2

Related Questions