Добавить отдельные поля ввода в Multiple upload с Dropzone - PullRequest
Новая
       12

Добавить отдельные поля ввода в Multiple upload с Dropzone

0 голосов
/ 17 сентября 2018

Я пытаюсь осуществить загрузку нескольких файлов с помощью dropzone и хотел бы добавить поле ввода для каждого загруженного изображения, чтобы можно было добавить заголовок изображения.Я нашел ниже, чтобы добавить поле ввода динамически.Это все работает, я выбираю изображение, и изображение добавляется в предварительный просмотр вместе с 2 полями, но когда я сохраняю форму, значение 2 полей остается пустым.Что я делаю не так и как мне этого добиться?Любая подсказка высоко ценится.Заранее спасибо.

// Get the template HTML and remove it from the doumenthe template HTML and remove it from the doument
var previewNode = document.querySelector("#template");
previewNode.id = "";
var previewTemplate = previewNode.parentNode.innerHTML;
previewNode.parentNode.removeChild(previewNode);

Dropzone.options.myAwesomeDropzone = { // The camelized version of the ID of the form element

autoProcessQueue: false,
uploadMultiple: true,
autoDiscover: false,
maxFiles: 20,
paramName: 'image',
thumbnailWidth: 288,
thumbnailHeight:192,
thumbnailMethod: 'contain',
parallelUploads: 20,
previewTemplate: previewTemplate,
previewsContainer: "#previews", // Define the container to display the previews
clickable: ".fileinput-button", // Define the element that should be used as click trigger to select files.
url: '/memberarea/admin/gallery/save-album',

// The setting up of the dropzone
init: function() {
var myAwesomeDropzone = this;

// First change the button to actually tell Dropzone to process the queue.
this.element.querySelector(".save-album").addEventListener("click", function(e) {
  // Make sure that the form isn't actually being sent.

    myAwesomeDropzone.processQueue();

})
// 'scope' is all files
this.on("addedfile", function (file) {
  var unique_field_id = new Date().getTime();

  title = file.title == undefined ? "" : file.title;
  file._titleLabel = Dropzone.createElement("<p>Title:</p>")
  file._titleBox = Dropzone.createElement("<input  id='"+file.name+unique_field_id+"_title' type='text' name='title'  value="+title+" >");
  file.previewElement.appendChild(file._titleLabel);
  file.previewElement.appendChild(file._titleBox);

  description = file.description == undefined ? "" : file.description;
  file._descriptionLabel = Dropzone.createElement("<p>Description:</p>")
  file._descriptionBox = Dropzone.createElement("<input  id='"+file.name+unique_field_id+"_desc' type='text' name='description'  value="+description+" >");
  file.previewElement.appendChild(file._descriptionLabel);
  file.previewElement.appendChild(file._descriptionBox);
 });


 this.on("sendingmultiple", function (file, xhr, formData) {
    title = file.previewElement.querySelector("input[name='title'");
    description =  file.previewElement.querySelector("input[name='description'");

 // format of this depends on your paramName config. Mine was called image
  formData.append("image[title]", $(title).val());
  formData.append("image[description]", $(description).val());
 });
...