How to limit the number of dropzone.js files uploaded?

Nowell pointed it out that this has been addressed as of August 6th, 2013. A working example using this form might be:

<form class="dropzone" id="my-awesome-dropzone"></form>

You could use this JavaScript:

Dropzone.options.myAwesomeDropzone = {
  maxFiles: 1,
  accept: function(file, done) {
    console.log("uploaded");
    done();
  },
  init: function() {
    this.on("maxfilesexceeded", function(file){
        alert("No more files please!");
    });
  }
};

The dropzone element even gets a special style, so you can do things like:

<style>
  .dz-max-files-reached {background-color: red};
</style>

maxFiles: 1 does the job but if you also want to remove the additional files you can use this sample code taken from the Wiki page:

How can I limit the number of files?

You're in luck! Starting with 3.7.0 Dropzone supports the maxFiles option. Simply set it to the desired quantity and you're good to go. If you don't want the rejected files to be viewed, simply register for the maxfilesexceeded event, and remove the file immediately:

myDropzone.on("maxfilesexceeded", function(file)
{
    this.removeFile(file);
});

I thought that the most intuitive single file upload process was to replace the previous file upon a new entry.

  $(".drop-image").dropzone({
    url: '/cart?upload-engraving=true',
    maxFiles: 1,
    maxfilesexceeded: function(file) {
        this.removeAllFiles();
        this.addFile(file);
    }
})

I achieved this a slightly different way. I just remove the old dropped file any time a new file is added. It acts as overwriting the file which was the user experience I was going for here.

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