Multiple File Upload with Dropzone.js and Laravel MediaLibrary Package

CEO ASH

i have implemented Dropzone.js to upload multiple files with my form, it works fine but i want to change the accepted file types attribute, it is only accepting documents i would like to upload audio files.. Is this possible?

i followed this step by step to get it working; https://laraveldaily.com/multiple-file-upload-with-dropzone-js-and-laravel-medialibrary-package/

<fieldset>
  <div class="form-group">
     <label for="document">Documents</label>
        <div class="needsclick dropzone" id="document-dropzone">
        </div>
   </div>
</fieldset>
<script type="text/javascript">
  var uploadedDocumentMap = {}
  Dropzone.options.documentDropzone = {
    url: '{{ route('music.storeMedia') }}',
    maxFilesize: 10, // MB
    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($project) && $project->document)
        var files =
          {!! json_encode($project->document) !!}
        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>

Any help will be truly appreciated

tcj

Upon reading dropzone.js plugin documentation, yes, you can with the option acceptedFiles.

By default it is set to null thus allowing for any file type upload.

You can set your own desired file types by specifying a list of file extension or file MIME Type.

In the code below I specified to allow only JPG, GIF or MP3 like so : acceptedFiles: '.jpg, .gif, .mp3', I've removed your PHP code in the javascript for demo purposes.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.css">
<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.js"></script>


<fieldset>
  <div class="form-group">
     <label for="document">Documents</label>
        <div class="needsclick dropzone" id="document-dropzone">
        </div>
   </div>
</fieldset>

<script type="text/javascript">

  var uploadedDocumentMap = {};
  Dropzone.options.documentDropzone = {
    url: '/echo/html/',
    maxFilesize: 10, // MB
    addRemoveLinks: true,
    success: function (file, response) {
      $('form').append('<input type="hidden" name="document[]" value="' + response.name + '">')
      uploadedDocumentMap[file.name] = response.name
    },
    acceptedFiles: '.jpg, .gif, .mp3', //file extension or MIME Type to accept uploading
    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 (e) {
        //dropbox initialization done!
        
    }


  }
</script>

That being said, you should always check the file extension on the server side aswell before uploading because you can never trust what's coming from a client browser request.

Also, I would recommend to only check file MIME Type as anyone can change a file extension by renaming it so in our case this would change to acceptedFiles: 'image/jpeg, image/gif, audio/mpeg'.

If you want to allow only audio files, put your desired file extensions or the MIME Type.

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

Laravel dusk: test file upload with Dropzone.js

分類Dev

Call Javascript function in PHP during Dropzone JS file upload with PHP

分類Dev

Laravel dropzone problem for upload with product_id

分類Dev

Upload multiple file with vue js and axios

分類Dev

File Permissions Using Dropzone.js

分類Dev

File upload using foreach in Laravel

分類Dev

Cakephp validating file upload "multiple"

分類Dev

Multiple File Upload using array

分類Dev

want to create multiple dropzones using dropzone.js

分類Dev

How to concatenate chunked file uploads from Dropzone.js with PHP?

分類Dev

react js handling file upload

分類Dev

Sails js Error in file Upload

分類Dev

How to upload image/file from Vue js to Laravel7 using axios

分類Dev

Multiple Image Upload using Ajax with Laravel 5.6

分類Dev

Laravel Multiple Image Upload via API

分類Dev

How to upload multiple images into a database using laravel?

分類Dev

Multiple file upload via ajax, uploading file multiple times

分類Dev

could not upload properly using ng-file-upload and laravel

分類Dev

Laravel 5 Ajax File/Image Upload

分類Dev

Laravel dynamic form input text and upload file

分類Dev

Java Servlet upload one file to multiple folders

分類Dev

Dropzone.js CSS

分類Dev

Angular JS File upload Content Disposition

分類Dev

Laravel file upload just send file name to controller

分類Dev

Dropzone.js-Laravel | 500内部サーバーエラー

分類Dev

How to set the file multiple file upload field as an Optional field in FastAPI

分類Dev

MVC 5 multiple file upload uploads same file several times

分類Dev

Enabled Button When Upload Done in Dropzone

分類Dev

Commit file deletions with Laravel package GrahamCampbell/Laravel-GitHub

Related 関連記事

  1. 1

    Laravel dusk: test file upload with Dropzone.js

  2. 2

    Call Javascript function in PHP during Dropzone JS file upload with PHP

  3. 3

    Laravel dropzone problem for upload with product_id

  4. 4

    Upload multiple file with vue js and axios

  5. 5

    File Permissions Using Dropzone.js

  6. 6

    File upload using foreach in Laravel

  7. 7

    Cakephp validating file upload "multiple"

  8. 8

    Multiple File Upload using array

  9. 9

    want to create multiple dropzones using dropzone.js

  10. 10

    How to concatenate chunked file uploads from Dropzone.js with PHP?

  11. 11

    react js handling file upload

  12. 12

    Sails js Error in file Upload

  13. 13

    How to upload image/file from Vue js to Laravel7 using axios

  14. 14

    Multiple Image Upload using Ajax with Laravel 5.6

  15. 15

    Laravel Multiple Image Upload via API

  16. 16

    How to upload multiple images into a database using laravel?

  17. 17

    Multiple file upload via ajax, uploading file multiple times

  18. 18

    could not upload properly using ng-file-upload and laravel

  19. 19

    Laravel 5 Ajax File/Image Upload

  20. 20

    Laravel dynamic form input text and upload file

  21. 21

    Java Servlet upload one file to multiple folders

  22. 22

    Dropzone.js CSS

  23. 23

    Angular JS File upload Content Disposition

  24. 24

    Laravel file upload just send file name to controller

  25. 25

    Dropzone.js-Laravel | 500内部サーバーエラー

  26. 26

    How to set the file multiple file upload field as an Optional field in FastAPI

  27. 27

    MVC 5 multiple file upload uploads same file several times

  28. 28

    Enabled Button When Upload Done in Dropzone

  29. 29

    Commit file deletions with Laravel package GrahamCampbell/Laravel-GitHub

ホットタグ

アーカイブ