Call controller on remove of dropzone js

Question

I'm currently working on dropzone for file upload on ASP.Net Core MVC, so I have a simple div and call dropzone via JS as:

<div class="clsbox-1" runat="server">
        <div class="dropzone clsbox" id="mydropzone"></div>
  </div>

<script>
    var accept = ".png";
    Dropzone.autoDiscover = false;

    // Dropzone class:
    var myDropzone = new Dropzone("#mydropzone", {
      url: "/test/create",
       acceptedFiles: accept,
       maxFilesize: 0.5,
       uploadMultiple: false,
       createImageThumbnails: false,
       addRemoveLinks: true,
        maxFiles: 1,
        maxfilesexceeded: function(file) {
            this.removeAllFiles();
            this.addFile(file);
        },
        init: function () {
        var drop = this;
        this.on('error', function (file, errorMessage) {
                                //alert(maxFilesize);
                                //this.removeAllFiles();
                                if (errorMessage.indexOf('Error 404') !== -1) {
                                    var errorDisplay = document.querySelectorAll('[data-dz-errormessage]');
                                    errorDisplay[errorDisplay.length - 1].innerHTML = 'Error 404: The upload page was not found on the server';
                                }
                                if (errorMessage.indexOf('File is too big') !== -1) {
                                    alert('i remove current file');
                    // i remove current file
                                    drop.removeFile(file);
                                }
                            });
      }

      });

As you can see, I have all code in order to upload the file. So it is working correctly, after selecting the image it does hit my controller and the image got uploaded. The problem starts when I remove the image from the dropzone, for that I use drop.removeFile(file);, but it does not get removed from the server because it does not execute the controller, how can I call the controller as the upload, but on remove action?

Answer 1

This can be achieved by adding removedfile function as:

removedfile: function(file) {
           var name = file.name;
           $.ajax({
               type: 'POST',
               url: '/test/delete',
               data: "fileName="+name,
               dataType: 'html'
           });
           },