Sumit patel Sumit patel - 2 months ago 38
jQuery Question

Dropzone image upload error display how to remove error

Notes : i tired all questions & answer related this topic.

I want to remove HTML data in popup after upload img or other document in Dropzone .

Dropzone uploed file accepted are assign

var accept = ".png";
Work Fine. see code Here .But after image or other file upload then some html are display

enter image description here

snippet Example Below.



var accept = ".png";
Dropzone.autoDiscover = false;

// Dropzone class:
var myDropzone = new Dropzone("#mydropzone", {
url: "/file/post",
acceptedFiles: accept,
uploadMultiple: false,
createImageThumbnails: false,
addRemoveLinks: true,
maxFiles: 3,
maxfilesexceeded: function(file) {
this.removeAllFiles();
this.addFile(file);
}

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/basic.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clsbox-1" runat="server" >
<div class="dropzone clsbox" id="mydropzone">

</div>
</div>




Answer

The error is caused because you are running the code in a fiddle, and dropzone is trying to upload the files to an url that doesn't exists.

When dropzone gets an error displays the message received by the server in the red popup, in this case is an html page.

This will not happen when you upload the files to a valid url.

You can change the text in the popup like this.

var myDropzone = new Dropzone("#mydropzone", {
  url: "/file/post",
  acceptedFiles: accept,
  uploadMultiple: false,
  createImageThumbnails: false,
  addRemoveLinks: true,
  maxFiles: 3,
  maxfilesexceeded: function(file) {
    this.removeAllFiles();
    this.addFile(file);
  },
  init: function() {
    this.on('error', function(file, errorMessage) {
      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';
      }
    });
  }
});

Or while you are in a fiddle you can just pretend the upload was successful by just changing a class.

init: function() {
  this.on('error', function(file, errorMessage) {
    if (file.accepted) {
      var mypreview = document.getElementsByClassName('dz-error');
      mypreview = mypreview[mypreview.length - 1];
      mypreview.classList.toggle('dz-error');
      mypreview.classList.toggle('dz-success');
    }
  });
}
Comments