Laravel - Dropzone не загружает все файлы

Question

Я использую Dropzone для загрузки файлов в Laravel. Эта конфигурация

<script type="text/javascript">
    Dropzone.options.dropzone =
        {
            maxFiles: 50,
            maxFilesize: 200,
            parallelUploads: 10,
            uploadMultiple: true,
            addRemoveLinks: true,
            autoProcessQueue:false,//the true is tried as well
            acceptedFiles: ".jpeg,.jpg,.png,.gif",
            success: function (file, response) {
                console.log(response);
            },
            error: function (file, response) {
                return false;
            }
        };
</script>

и это форма

{!! Form::open([ 'route' => [ 'images.multiUpload' ], 'files' => true, 'enctype' => 'multipart/form-data', 'class' => ' py-5 dropzone px-1 text-center w-100', 'id' => 'image-upload' ]) !!}
{{csrf_field()}}
{!! Form::close() !!} 

Из того, что я вижу в функция processQueue не обрабатывает все файлы в очереди # 462 кажется, проблема в следующем фрагменте кода dropzone.js

Dropzone.prototype.processQueue = function() {
  var i, parallelUploads, processingLength, queuedFiles;
  parallelUploads = this.options.parallelUploads;
  processingLength = this.getUploadingFiles().length;
  i = processingLength;
  if (processingLength >= parallelUploads) {
    return;
  }
  queuedFiles = this.getQueuedFiles();
  if (!(queuedFiles.length > 0)) {
    return;
  }
  if (this.options.uploadMultiple) {
    return this.processFiles(queuedFiles.slice(0, parallelUploads - processingLength));
  } else {
    while (i < parallelUploads) {
      if (!queuedFiles.length) {
        return;
      }
      this.processFile(queuedFiles.shift());
      i++;
    }
  }
};

поэтому я изменил этот код на следующий (###### присоединен к новым строкам)

    Dropzone.prototype.processQueue = function () {
        var i, parallelUploads, processingLength, queuedFiles;
        parallelUploads = this.options.parallelUploads;
        parallelUploads = 20;//######
        processingLength = this.getUploadingFiles().length;
        i = processingLength;
        if (processingLength >= parallelUploads) {
            return;
        }
        queuedFiles = this.getQueuedFiles();
        if (!(queuedFiles.length > 0)) {
            return;
        }
        if (this.options.uploadMultiple) {
            return this.processFiles(queuedFiles.slice(0, parallelUploads - processingLength));
        } else {
            console.log(queuedFiles.length);//######
            while (queuedFiles.length > 0) {//######
                i = 0;//######
                while (i < parallelUploads) {
                    console.log(i);//######
                    if (!queuedFiles.length) {
                        return;
                    }
                    this.processFile(queuedFiles.shift());
                    i++;
                }
            }
        }
    };

Если я загружаю 20 файлы, console.log(queuedFiles.length); показывает 20, а в строке console.log(i); отображается счетчик от 1 до 20, но он все равно загружает 3 или 4 файла, а не все файлы. Что я могу сделать?

Answer 1

Нашел проблему. Проблема была с контроллера

public function multiUpload(Request $request)
{
    $imageName = time().'.'.$request->file->getClientOriginalExtension();
    $request->file->move(public_path('uploads\\temp'), $imageName);
    return response()->json(['success'=>$imageName]);
}

поскольку файлы загружаются одновременно, они имели одно и то же имя, поэтому они были перезаписаны!

Answer 2

Итак, в этом коде есть как добавление изображения, так и удаление изображений, и он работает при вызове API из внутреннего интерфейса и при вызове ajax.

var myDropzone = new Dropzone("div#dropzonePrescriptionImages", {
  url: "/appointment/prescription_multiple_file",
  // params: {
  //   _token: token,booking_id:booking_id,file_inc:file_inc,
  // },

sending: function(file, xhr, formData) {    
    formData.append("file_inc", file_inc);  //name and value
    formData.append("booking_id", booking_id); //name and value
    formData.append("_token",token);

},      
maxFiles:5,
  init: function() {

    this.on("maxfilesexceeded", function(file){
      this.removeFile(file);
      alert("Maximum 5 photos are allowed...!");
    });

    this.on("addedfile", function (file) {
      var removeButton = Dropzone.createElement("<button><i class='glyphicon glyphicon-trash'></i></button>");
      var _this = this;
      removeButton.addEventListener("click", function (e){
        e.preventDefault();
        e.stopPropagation();
        _this.removeFile(file);

      var i=0;
      var found=0;
      var len = Object.keys(files_array).length;
        for(i=0;i<len;i++){

        if(files_array.hasOwnProperty(i)){
          if(files_array[i]['name'] == file.name){

              $.ajax({
                type: 'GET',
                url:'/deletePrescriptionFiles',
                dataType: 'json',
                data:{path:files_array[i]['file_path']},
                async:false
              }).done(function(result1){
                  files_array[i]['file_path']=undefined;
                  files_array[i]['name']=undefined;
                  return;
              });
                 found==1;
                 break;
            }
             if(found==1){
              break;
            }
           }
            if(found==1){
              break;
            }

        }

        $('#files_array').val(JSON.stringify(files_array));

      });
      file.previewElement.appendChild(removeButton);
    });

    this.on("success", function(file, responseText) {
      files_array[file_inc]={};
      files_array[file_inc]['file_path']=responseText['file'];
      files_array[file_inc]['name']=file.name;
      file_inc++;


      $('#files_array').val(JSON.stringify(files_array));
    });
  },
});









Dropzone.options.myAwesomeDropzone = {
    paramName: "file", // The name that will be used to transfer the file
    maxFilesize: 15, // MB
    addRemoveLinks: true,
    acceptedFiles:".pdf,.jpg,.jpeg,.png,",

  };