I have tried setting up the limit of uploading files to only one. I have tried all the suggestions from the previous questions here but nothing worked for me. Each time I was able to upload multiple files and as many as like.

This was one of my attempts:

var token = "{{ csrf_token() }}";
Dropzone.autoDiscover = false;
 var myDropzone = new Dropzone("div#dropzoneFileUpload", {
     url: "/admin/upload",
     params: {
        _token: token
      }
 });
 Dropzone.options.myAwesomeDropzone = {
    paramName: "file", // The name that will be used to transfer the file
    maxFilesize: 2, // MB
    addRemoveLinks: true,
    maxFiles: 1,
    init: function() {
      this.on("maxfilesexceeded", function() {
        if (this.files[1]!=null){
          this.removeFile(this.files[0]);
        }
      });
    },
    accept: function(file, done) {

    }
  };

And this is how I call the scripts:

<script src="{{ asset('js/dropzone/dropzone.js') }}"></script>
<script src="{{ asset('js/image-upload.js') }}"></script>

I have tried setting up the limit of uploading files to only one. I have tried all the suggestions from the previous questions here but nothing worked for me. Each time I was able to upload multiple files and as many as like.

This was one of my attempts:

var token = "{{ csrf_token() }}";
Dropzone.autoDiscover = false;
 var myDropzone = new Dropzone("div#dropzoneFileUpload", {
     url: "/admin/upload",
     params: {
        _token: token
      }
 });
 Dropzone.options.myAwesomeDropzone = {
    paramName: "file", // The name that will be used to transfer the file
    maxFilesize: 2, // MB
    addRemoveLinks: true,
    maxFiles: 1,
    init: function() {
      this.on("maxfilesexceeded", function() {
        if (this.files[1]!=null){
          this.removeFile(this.files[0]);
        }
      });
    },
    accept: function(file, done) {

    }
  };

And this is how I call the scripts:

<script src="{{ asset('js/dropzone/dropzone.js') }}"></script>
<script src="{{ asset('js/image-upload.js') }}"></script>

• javascript
• dropzone.js

Share Improve this question Follow edited May 23, 2017 at 10:32 CommunityBot 111 silver badge asked Oct 14, 2016 at 8:13 LudwigLudwig 1,8411515 gold badges7171 silver badges143143 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 1

You are splitting the dropzone configuration into two different methods. And only the first one is being used the one that contains the url option, the second, that contains the maxFiles option is ignored.

You have to either include all the configuration inside the first method that creates dropzone programmatically like this:

Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("div#dropzoneFileUpload", {
    url: "/admin/upload",
    params: {
       _token: token
    },
    paramName: "file", // The name that will be used to transfer the file
    maxFilesize: 2, // MB
    addRemoveLinks: true,
    maxFiles: 1,
    init: function() {
      this.on("maxfilesexceeded", function() {
        if (this.files[1]!=null){
          this.removeFile(this.files[0]);
        }
      });
    },
    accept: function(file, done) {

    }
 });

Or with second method that uses the dropzone autodiscover feature, if your dropzone element has the id #dropzoneFileUpload do it like this:

 Dropzone.options.dropzoneFileUpload = {
    url: "/admin/upload",
    params: {
       _token: token
    },
    paramName: "file", // The name that will be used to transfer the file
    maxFilesize: 2, // MB
    addRemoveLinks: true,
    maxFiles: 1,
    init: function() {
      this.on("maxfilesexceeded", function() {
        if (this.files[1]!=null){
          this.removeFile(this.files[0]);
        }
      });
    },
    accept: function(file, done) {

    }
};