Загрузка нескольких файлов с помощью Dropzone.js и пакета Laravel MediaLibrary - PullRequest
Новая
       13

Загрузка нескольких файлов с помощью Dropzone.js и пакета Laravel MediaLibrary

0 голосов
/ 23 мая 2019

Я реализовал Dropzone.js для загрузки нескольких файлов с моей формой, она отлично работает, но я хочу изменить атрибут принятых типов файлов, он принимает только те документы, которые я хотел бы загружать аудиофайлы. Это возможно?

я следовал этому шагу, чтобы заставить его работать;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>

Любая помощь будет по достоинству оценена

1 Ответ

0 голосов
/ 24 мая 2019

После прочтения документации плагина dropzone.js, да, вы можете с опцией acceptFiles .

По умолчанию установлено значение null, что позволяет загружать файлы любого типа.

Вы можете установить свои собственные типы файлов, указав список расширений или файлов MIME Type .

В приведенном ниже коде разрешено только JPG, GIF или MP3, например так: acceptedFiles: '.jpg, .gif, .mp3', я удалил ваш код PHP в javascript для демонстрационных целей. 

<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>

При этом вы должны всегда проверять расширение файла на стороне сервера перед загрузкой, потому что вы никогда не можете доверять тому, что исходит из запроса клиентского браузера.

Кроме того, я бы рекомендовал проверять только файл MIME Type , так как любой может изменить расширение файла, переименовав его, поэтому в нашем случае это изменится на acceptedFiles: 'image/jpeg, image/gif, audio/mpeg'.

Если вы хотите разрешить только аудиофайлы, укажите желаемые расширения или тип MIME .

.
...