I am trying to limit the number of files a user can select to one using the option maxFiles: 1; however that also prevents the user from uploading a second, third etc. file which is what I want. I want only the selection to be limited to one file and allow for subsequent uploads. Is that possible?

Here is my code:

$(function() {
    var dropzone = new Dropzone('#avatar-wrapper', {
        url: '/uploads/avatar',
        clickable: '.upload',
        maxFilesize: 5,
        maxFiles: 1,
        previewsContainer: false,
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        init: function() {
            this.on('addedfile', function(file) {
                console.log('test');
                $('#loader').show();
            });

            this.on('success', function(file, result) {
                $('#avatar_url').val(result.url);
                $('#avatar').attr('src', result.url);
                $('#loader').hide();
            });
        }
    });
});

I am trying to limit the number of files a user can select to one using the option maxFiles: 1; however that also prevents the user from uploading a second, third etc. file which is what I want. I want only the selection to be limited to one file and allow for subsequent uploads. Is that possible?

Here is my code:

$(function() {
    var dropzone = new Dropzone('#avatar-wrapper', {
        url: '/uploads/avatar',
        clickable: '.upload',
        maxFilesize: 5,
        maxFiles: 1,
        previewsContainer: false,
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        init: function() {
            this.on('addedfile', function(file) {
                console.log('test');
                $('#loader').show();
            });

            this.on('success', function(file, result) {
                $('#avatar_url').val(result.url);
                $('#avatar').attr('src', result.url);
                $('#loader').hide();
            });
        }
    });
});

• javascript
• file-upload
• image-uploading
• dropzone.js

2 Answers 2

Instead of patching the DropZone library, you could do this change at runtime after you initialized the DropZone element.

var dropzone = new DropZone('#avatar-wrapper', {
    // options ...
});
dropzone.hiddenFileInput.removeAttribute("multiple");

Found this in the dropzone.js file:

if (_this3.options.maxFiles === null || _this3.options.maxFiles > 1) {
    _this3.hiddenFileInput.setAttribute("multiple", "multiple");
}

and mented out the second line:

if (_this3.options.maxFiles === null || _this3.options.maxFiles > 1) {
    //_this3.hiddenFileInput.setAttribute("multiple", "multiple");
}

this solved my problem; however it would be nice to have this implemented in DropzoneJs