Dropzone custom validation

I'm using dropzone.js for multiple file upload. I validate the uploads with a regex after submit. That works but when it does nog validate the files are gone so the user needs to pull the files again in the dropzone.

question: How can I make this validation work in the script while placing the files in the form /dropzone field.

laravel validation:

'document.*' => 'regex:/^[a-zA-Z0-9+\-_.&]+$/',

dropzone script on the admin page:

<script>
  var uploadedDocumentMap = {}
  Dropzone.options.documentDropzone = {
    dictRemoveFile: "remove foto",
    url: '{{ route('admin.news.storeMedia') }}',
    maxFilesize: 0.7, // MB
    acceptedFiles: '.jpeg,.jpg,.png,.gif',
    addRemoveLinks: true,
    headers: {
      'X-CSRF-TOKEN': "{{ csrf_token() }}"
    },
    success: function (file, response) {
      $('form').append('<input type="hidden" name="document[]" value="' + response.name + '">')
      uploadedDocumentMap[file.name] = response.name
    },
    removedfile: function (file) {
      file.previewElement.remove()
      var name = ''
      if (typeof file.file_name !== 'undefined') {
        name = file.file_name
      } else {
        name = uploadedDocumentMap[file.name]
      }
      $('form').find('input[name="document[]"][value="' + name + '"]').remove()
    },
    init: function () {
      @if(isset($post) && $post->fotos)
        var files =
          {!! json_encode($post->fotos) !!}
        for (var i in files) {
          var file = files[i]
          this.options.addedfile.call(this, file)
          file.previewElement.classList.add('dz-complete')
          $('form').append('<input type="hidden" name="document[]" value="' + file.file_name + '">')
        }
      @endif
    }
  }
</script>

LaryAI

2 years ago

Best Answer

Level 58

To validate the files before they are uploaded, you can use the accept option in the Dropzone configuration. This option accepts a function that will be called for each file that is added to the queue. If the function returns false, the file will not be uploaded.

Here's an example of how you can use this option to validate the file names with a regular expression:

Dropzone.options.documentDropzone = {
  // ...
  accept: function(file, done) {
    if (!file.name.match(/^[a-zA-Z0-9+\-_.&]+$/)) {
      alert('Invalid file name');
      done('Invalid file name');
    } else {
      done();
    }
  },
  // ...
};

In this example, the accept function checks if the file name matches the regular expression. If it doesn't, it displays an alert and calls the done function with an error message. If the file name is valid, it calls the done function without any arguments to allow the file to be uploaded.

Note that this validation is only performed on the client-side, so you should still validate the files on the server-side as well.

Please or to participate in this conversation.