Загрузите изображения из базы данных в dropzone и затем повторно отправьте - PullRequest
Новая
       11

Загрузите изображения из базы данных в dropzone и затем повторно отправьте

0 голосов
/ 27 января 2019

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

Я использую шаблон лезвия Laravel.В настоящее время, когда я отправляю форму, я получаю нулевое значение.В контроллере я использую $request->file('file'); Я также пытался $request->file; Я также пытался $request->file[0] и $request->file('file')[0];

Я читал что-то вчера где-то о том, когда вы emit('addedfile'), а затем emit('thumbnail') онина самом деле физические изображения не находятся в очереди, но, как вы можете видеть, я добавляю их вручную, поэтому разве они не должны просто отправлять processQueue() как обычный файл в очереди?

Для ясности, изображения отображаются правильнов дропзоне;Я просто не могу отправить их повторно.

Ниже приведен мой код JavaScript: 

<script>
Dropzone.autoDiscover = false;
var mydropzone = new Dropzone('.project-dropzone', {
  url: "{{route('projects.update', $project->id)}}",
  paramName: "file",
  maxFileSize: 2,
  method: "PATCH",
  autoQueue: true,
  autoProcessQueue: false,
  headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
  parallelUploads: 10,
  addRemoveLinks: true,
  uploadMultiple: true,
  init: function() {
    dp = this;
    // Add the files from the sever to the dropzone
    @foreach($project->media as $image)
      var currentFile = {
        name: "{{$image->file}}",
        previewElement: "div.dz-preview.dz-complete.dz-image-preview.ui-sortable-handle",
        previewTemplate:  "div.dz-preview.dz-complete.dz-image-preview.ui-sortable-handle",
        type: 'image/jpeg',
        accepted: true,
        status: "queued",
        upload: {
          chunked: false,
          filename: "{{$project->name}}",
          totalChunkCount: 1,
          progress: 0
        },
        id: {{$image->id}}
      };
      dp.emit("addedfile", currentFile);
      dp.emit("thumbnail", currentFile, "/uploads/{{$image->file}}");
      dp.files.push(currentFile);
      dp.emit("complete", currentFile);
    @endforeach
    // Add these to the queue
    dp.QUEUED = [];
    dp.QUEUED.push(dp.files);
    document.querySelector('.submit-project').addEventListener('click', function(e) {
      // If there are any queued files in the dropzone start using the javascript implementation
      e.preventDefault();
      // If there are any errors displayed about the form validation from the previous submit, remove it and set new ones
      var errorsDisplayed = document.querySelector('.project-validation-errors');
      if(errorsDisplayed) {
        errorsDisplayed.remove();
      }
      // Validate the form
      var bool = validateForm();
      // If the form validates, process the queue
      if(bool) {
        dp.processQueue();
      }
    });
    dp.on("sending", function(file, xhr, formData) {
        formData.append("title", mydropzone.projectTitle);
        formData.append("body", mydropzone.projectBody);
        formData.append("project_name", mydropzone.projectName);
        formData.append("project_url", mydropzone.projectUrl);
        formData.append("project_category", mydropzone.projectCat);
        formData.append("project_skills", mydropzone.projectSkills);
    });
    dp.on("addedfile", function(file) {
      console.log(dp.QUEUED);
      var element = document.querySelector('.project-dropzone p');
      if(element) {
        element.remove();
      }
    });
    dp.on("success", function() {
      // window.location.href = "";
    });
    var validateForm = function() {
      var errors = [];
      var projectTitle, projectBody, projectName, projectUrl, projectCat, projectSkills;
      mydropzone.projectTitle = document.querySelector('.project-title').value;
      if(mydropzone.projectTitle == "") {
        errors.push('There is no project title');
      }
      mydropzone.projectBody = document.querySelector('.project-body').value;
      if(mydropzone.projectBody == "") {
        errors.push('There is no project body text');
      }
      mydropzone.projectName = document.querySelector('.project-name').value;
      if(mydropzone.projectName == "") {
        errors.push('There is no project name');
      }
      mydropzone.projectUrl = document.querySelector('.project-url').value;
      if(mydropzone.projectUrl == "") {
        errors.push('There is no project URL');
      }
      mydropzone.projectCat = document.querySelector('.project-cat').value;
      if(mydropzone.projectCat == "") {
        errors.push('There are no project categories');
      }
      mydropzone.projectSkills = document.querySelector('.project-skills').value;
      if(mydropzone.projectSkills  == "") {
        errors.push('There are no project skills');
      }
      // If there are no validation errors
      if(errors.length == 0) {
        return true;
      }
      else {
        // Display the errors
        var html = "<div class='alert alert-danger clearfix project-validation-errors'><ul class='m-0 pl-3'>";
        for(i = 0; i < errors.length; i++) {
          html += "<li>"+errors[i]+"</li>";
        }
        html += "</div>";
        document.querySelector('.page-title').insertAdjacentHTML('afterend', html);
      }
    };
  }
});
</script>

В добавленном файле я могу console.log(dp.QUEUED), который показывает, как файл выглядит в объекте QUEUED, когдавы добавляете его: 

[Array(3)]
0: Array(3)
0:
accepted: true
id: 3
name: "20190125-unnamed-man4.jpg"
previewElement: div.dz-preview.dz-complete.dz-image-preview.ui-sortable-handle
previewTemplate: div.dz-preview.dz-complete.dz-image-preview.ui-sortable-handle
status: "queued"
type: "image/jpeg"
upload: {chunked: false, filename: "", totalChunkCount: 1, progress: 0}
_removeLink: a.dz-remove
__proto__: Object
1: {name: "26055793_10154858018501652_2836007284381890198_n.jpg", previewElement: div.dz-preview.dz-complete.dz-image-preview.ui-sortable-handle, previewTemplate: div.dz-preview.dz-complete.dz-image-preview.ui-sortable-handle, type: "image/jpeg", accepted: true, …}
2: File(58227)
accepted: true
dataURL: "data:image/jpeg;base64,/9j/4gIcSUNDX1BST0ZJTEUAAQE"
height: 720
lastModified: 1545932196105
lastModifiedDate: Thu Dec 27 2018 17:36:36 GMT+0000 (Greenwich Mean Time) {}
name: "26055793_10154858018501652_2836007284381890198_n.jpg"
previewElement: div.dz-preview.dz-image-preview
previewTemplate: div.dz-preview.dz-image-preview
size: 58227
status: "queued"
type: "image/jpeg"
upload: {uuid: "d66814d9-aae5-4bfd-bcd6-c1e4a500913d", progress: 0, total: 58227, bytesSent: 0, filename: "26055793_10154858018501652_2836007284381890198_n.jpg", …}
webkitRelativePath: ""
width: 960
_removeLink: a.dz-remove
__proto__: File
length: 3
__proto__: Array(0)
length: 1
__proto__: Array(0)

Итак, 0 & 1 - это файлы, автоматически загружаемые с сервера, а 2 - это файл, который я поместил.

Я не понимаю, как отброшенов файле начинается с файла (58227), а затем проходит через свойства объектов, такие как принятый, имя файла и т. д.?Я неправильно устанавливаю объект файла?Или я как-то не правильно подхожу к нему в контроллере?

Еще один ответ на этот вопрос и другой способ помочь мне - если бы у кого-то был опыт ручного добавления изображения в dropzone, потому что я смотрелв коде dropzone есть такие функции, как add file, enqueueFile.

Когда файл отбрасывается в области dropzone, класс, очевидно, делает что-то, что может быть инициировано вручную, вызывая нужные классы.

Приветствия

...