Dropzone image upload error display how to remove error

Question

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

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 1

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');
    }
  });
}