javascript - In Dropzone.js how to set the minimum image resolution that we can upload? Accept is not working - Stack Overflow

admin管理员组

文章数量:1289845

Let's say I need to restrict my users from uploading images below 3MP (Nearly 2048px wide). How can I do this in Dropzone.js? Tried to do it with 'accept' but it's not working :

$(function() {
var mediaDropzone;
mediaDropzone = new Dropzone("#media-dropzone", {
  paramName: "file",
        autoProcessQueue: false,
        parallelUploads: 500,
        maxFilesize: <%= ENV["max_image_size"] %>,
        acceptedFiles: '<%= ENV["accepted_files"] %>',
        accept: function(file, done) {
          if (file.width < 2048) {
            done("Naha, you don't.");
          }
          else { done(); }
        }
});

Let's say I need to restrict my users from uploading images below 3MP (Nearly 2048px wide). How can I do this in Dropzone.js? Tried to do it with 'accept' but it's not working :

$(function() {
var mediaDropzone;
mediaDropzone = new Dropzone("#media-dropzone", {
  paramName: "file",
        autoProcessQueue: false,
        parallelUploads: 500,
        maxFilesize: <%= ENV["max_image_size"] %>,
        acceptedFiles: '<%= ENV["accepted_files"] %>',
        accept: function(file, done) {
          if (file.width < 2048) {
            done("Naha, you don't.");
          }
          else { done(); }
        }
});

• javascript
• jquery
• file-upload
• dropzone.js

Share Improve this question Follow edited Nov 25, 2014 at 2:27 THpubs asked Nov 24, 2014 at 17:01 THpubsTHpubs 8,1721717 gold badges7373 silver badges156156 bronze badges 1

• 1 May not be possible with just File API interface(developer.mozilla/en-US/docs/Web/API/File). You can probably try some canvas libraries? – Tong Shen Commented Nov 25, 2014 at 3:09

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

I have a similar need and am using this solution:

    var maxImageWidth = 1000, maxImageHeight = 1000;

    Dropzone.options.dropzonePhotographs = {
        paramName: "file", // The name that will be used to transfer the file
        maxFilesize: 2, // MB
        dictDefaultMessage: "Drag files or click here",
        acceptedFiles: ".jpeg,.jpg,.png,.gif",
        init: function () {
            this.on("success", function(file, responseText) {
                file.previewTemplate.setAttribute('id',responseText[0].id);
            });
            this.on("thumbnail", function(file) {
                if (file.width > maxImageWidth || file.height > maxImageHeight) {
                    file.rejectDimensions()
                }
                else {
                    file.acceptDimensions();
                }
            });
        },
        accept: function(file, done) {
            file.acceptDimensions = done;
            file.rejectDimensions = function() { done("Image width or height too big."); };
        }
    };

You can find the original solution here: https://github./enyo/dropzone/issues/708

insted to apply in accept: you can use thumbnail like below

You can check width and height for image like

 this.on("thumbnail", function (file) {
     if (file.height < 350 && file.width < 2048) {
        alert("Image should be 350 x 2048 ");
         }
  });

本文标签：