Dropzone remove previous image

Question

I'm needing help with an answer to a previous question How to limit the number of dropzone.js files uploaded?

where there was a solution to use

Dropzone.options.myAwesomeDropzone = {
  accept: function(file, done) {
    console.log("uploaded");
    done();
  },
  init: function() {
    this.on("addedfile", function() {
      if (this.files[1]!=null){
        this.removeFile(this.files[0]);
      }
    });
  }
};

But being a js numpty, I don't know where to put this. I assume that my form must have the id myAwesomeDropzone and that the code above needs to be slotted into the dropzone.js document, but where? if you could provide a 'after' and 'before' or replace answer please.

If someone could give me some pointer it'd be great.

My reputation is less than 50 so I couldn't comment on the original thread. If me posting this as a new thread is wrong, please admins don't just chastise me and close it, but move it or do whatever to allow people to provide help accrodingly.

Cheers Andy

score 0 · Answer 1 · answered Jul 23 '15 at 22:36

Your html form should be like below. Notice that the

class="dropzone"

and

id="my-dropzone"

The "my-dropzone" ID is important , DropZone takes this as "myDropzone" , ( hyphen removed and camelcased ). So when you refer to this id in DropZone.options , it should be "myDropzone". This is very important.

<div>
    <form action="/file-upload" class="dropzone" id="my-dropzone" style="border:2px dotted #337ab7">
      <div class="dz-message">
        Drag n drop photos here or click to upload.
        <br />
        <span class="note">(The photos are uploaded to twitter only when the tweet is sent.)</span>
      </div>
    </form>
</div>

Your should link the css and js file in your html page like so

<script src="./js/dropzone.min.js"></script>
<link href="./css/dropzone.min.css" rel="stylesheet" type="text/css">

On the page load , you should init the dropzone configuration in your JS code for your page as below. I am restricting dropzone to accept only one file and its size should not exceed 5MB.

self.options.maxFilesize = 5; self.options.maxFiles = 1;

Dropzone.autoDiscover = false;
Dropzone.options.myDropzone = {
  init: function() {
    var self = this;
    // config
    self.options.addRemoveLinks = true;
    self.options.autoProcessQueue = false;
    self.options.maxFilesize = 5;
    self.options.maxFiles = 1;
    self.options.dictFileTooBig =
      "Twitter do not allow files greater than 5MB.";
    //New file added
    self.on("addedfile", function(file) {
      console.log('new file added ', file.path);
    });
    self.on("maxfilesexceeded", function(file) {
      alert(
        "Only one photo can be attached with the tweet."
      );
    });

  }
};

Now when your page loads , you will see the form & get the drag n drop functionality in your div.

To access the files you can do like below in the javascript on some button click event.

// to get queued files
var myDropzone = Dropzone.forElement("#my-dropzone");
var files = myDropzone.getQueuedFiles();

Dropzone remove previous image

1 Answers1