Dropzone.js 5.2：如何通过accept校验并拒绝超长文件名

I totally get your frustration—most resources out there fixate on renaming files instead of blocking ones that exceed a character limit. Since you already have solid server-side validation in place, adding client-side checks will save your users the hassle of waiting for an upload just to get an error. Here's how to implement it smoothly with Dropzone.js 5.2:

Method 1: Use the accept Callback (Preferred, Blocks Before File is Added) #

This method checks the filename before the file even joins the upload queue, which is way more efficient. You can define it directly in your Dropzone configuration:

Dropzone.options.myDropzone = {
  accept: function(file, done) {
    // Check if filename length exceeds 30 characters
    if (file.name.length > 30) {
      // Reject the file and show a clear error message
      done("Filename cannot exceed 30 characters. Please rename your file and try again.");
    } else {
      // Accept the file to proceed
      done();
    }
  }
};

How this works: #

• The accept function triggers the moment a file is selected.
• If the filename is too long, passing an error message to done() tells Dropzone to reject the file and display the message to the user, stopping the upload before it starts.
• For valid files, calling done() without arguments lets the file join the queue as normal.

Method 2: Use the addedfile Event (Check After File is Added) #

If you prefer to handle validation after the file appears in the UI, use the addedfile event to flag and remove invalid files:

Dropzone.options.myDropzone = {
  init: function() {
    this.on("addedfile", function(file) {
      if (file.name.length > 30) {
        // Show a standard error notification for the file
        this.createErrorNotification(file, "Filename cannot exceed 30 characters.");
        // Remove the invalid file from the upload queue
        this.removeFile(file);
      }
    });
  }
};

Notes: #

• This approach is handy if you need to run extra checks after the file renders in the UI, but the accept callback is better for early blocking to save users time.
• createErrorNotification is a built-in Dropzone method that displays a consistent error message tied to the problematic file.

Critical Reminder: #

Even with client-side validation, never skip your server-side checks. Users can easily bypass client-side rules, so your existing server-side validation is your final line of defense against invalid files.

内容的提问来源于stack exchange，提问作者Nancy