Добавить ярлык в очередь загрузки Dropzone JS - PullRequest
Новая
       96

Добавить ярлык в очередь загрузки Dropzone JS

1 голос
/ 03 августа 2020

Я создаю проект, в котором пользователю необходимо загрузить основное изображение и дополнительное изображение. Я использую Dropzone JS для выполнения sh этого. Вот мой код: 

Dropzone.autoDiscover = false;
var image_width = 380,
  image_height = 507;
var photo_upload_primary = new Dropzone("#photo_upload_primary", {
  maxFilesize: 1,
  maxFiles: 1,
  acceptedFiles: "image/*",
  autoProcessQueue: false,
  url: "upload.php",
  previewsContainer: "#formfiles",
  previewTemplate: $("#formtemplate").html(),
  dictFileTooBig: "Image is too large ({{filesize}}MiB). Max file size is {{maxFilesize}}MiB.",
  dictInvalidFileType: "This file is not an image.",
  dictMaxFilesExceeded: "You have already uploaded a primary product image.",
  dictDefaultMessage: "Click or drop primary product image here",
  success: function(file, response) {
    console.log(response);
  },
  error: function(file, response) {
    $.notify({
      message: response
    }, {
      type: "danger"
    });

    this.removeFile(file);
  },
  init: function() {
    this.on("thumbnail", function(file) {
      if (file.width !== image_width || file.height !== image_height) {
        file.rejectDimensions();
      } else {
        file.acceptDimensions();
      }
    });
  },
  accept: function(file, done) {
    file.acceptDimensions = done;
    file.rejectDimensions = function() {
      done("Product image resolution outside of specifications. Resolution must be " + image_width + "px x " + image_height + "px");
    };
  },
  renameFile: function(file) {
    var ext = file.name.substring(file.name.lastIndexOf('.') + 1);
    var newName = 'primary.' + ext;
    return newName;
  },
});

var photo_upload_secondary = new Dropzone("#photo_upload_secondary", {
  maxFilesize: 1,
  maxFiles: 1,
  acceptedFiles: "image/*",
  autoProcessQueue: false,
  url: "upload.php",
  previewsContainer: "#formfiles",
  previewTemplate: $("#formtemplate").html(),
  dictFileTooBig: "Image is too large ({{filesize}}MiB). Max file size is {{maxFilesize}}MiB.",
  dictInvalidFileType: "This file is not an image.",
  dictMaxFilesExceeded: "You have already uploaded a secondary product image.",
  dictDefaultMessage: "Click or drop secondary product image here",
  success: function(file, response) {
    console.log(response);
  },
  error: function(file, response) {
    $.notify({
      message: response
    }, {
      type: "danger"
    });
    this.removeFile(file);
  },
  init: function() {
    //this.on("addedfile", function(file) {
    //    file.mycustomname = "my-new-name" + file.name;
    //console.log(file);
    //});
    this.on("success", function(file, responseText) {
      file.previewTemplate.setAttribute('id', responseText[0].id);

      $(".dz-id:last-child").html("hi!");

      file.previewElement.html = "hh";

    });
    this.on("thumbnail", function(file) {
      if (file.width !== image_width || file.height !== image_height) {
        file.rejectDimensions();
      } else {
        file.acceptDimensions();
      }
    });
  },
  accept: function(file, done) {
    file.acceptDimensions = done;
    file.rejectDimensions = function() {
      done("Product image resolution outside of specifications. Resolution must be " + image_width + "px x " + image_height + "px");
    };
  },
  renameFile: function(file) {
    var ext = file.name.substring(file.name.lastIndexOf('.') + 1);
    var newName = 'secondary.' + ext;
    return newName;
  }
});
image

Я хотел бы пометить файлы в очереди загрузки как «Первичный» и «Вторичный» рядом с соответствующим файлом и эскизом. Мне не удается найти документацию о том, как это можно сделать в DropZone JS. Как я могу это сделать? Спасибо.

1 Ответ

2 голосов
/ 05 августа 2020

Вам обязательно нужно 2 шаблона. Один с «первичным шаблоном», другой с «вторичным шаблоном». Но чтобы избежать создания 2 HTML шаблонов, вы можете использовать такой генератор шаблонов: 

genTemplate = (tmpName) => {
  let tmp = $("#formtemplate").clone()
  tmp.find(".template-number").html(tmpName)
  return tmp.html()
}

Таким образом вы можете легко выбрать строку шаблона для каждого, не перезаписывая HTML. 

genTemplate = (tmpName) => {
  let tmp = $("#formtemplate").clone()
  tmp.find(".template-number").html(tmpName)
  return tmp.html()
}

Dropzone.autoDiscover = false;
var image_width = 380,
  image_height = 507;
var photo_upload_primary = new Dropzone("#photo_upload_primary", {
  maxFilesize: 1,
  maxFiles: 1,
  acceptedFiles: "image/*",
  autoProcessQueue: false,
  url: "upload.php",
  previewsContainer: "#formfiles",
  previewTemplate: genTemplate("Primary template"),
  dictFileTooBig: "Image is too large ({{filesize}}MiB). Max file size is {{maxFilesize}}MiB.",
  dictInvalidFileType: "This file is not an image.",
  dictMaxFilesExceeded: "You have already uploaded a primary product image.",
  dictDefaultMessage: "Click or drop primary product image here",
  success: function(file, response) {
    console.log(response);
  },
  error: function(file, response) {
    /*$.notify({
      message: response
    }, {
      type: "danger"
    });
    this.removeFile(file);*/
  },
  init: function() {
    this.on("thumbnail", function(file) {
      if (file.width !== image_width || file.height !== image_height) {
        file.rejectDimensions();
      } else {
        file.acceptDimensions();
      }
    });
  },
  accept: function(file, done) {
    file.acceptDimensions = done;
    file.rejectDimensions = function() {
      done("Product image resolution outside of specifications. Resolution must be " + image_width + "px x " + image_height + "px");
    };
  },
  renameFile: function(file) {
    var ext = file.name.substring(file.name.lastIndexOf('.') + 1);
    var newName = 'primary.' + ext;
    return newName;
  },
});

var photo_upload_secondary = new Dropzone("#photo_upload_secondary", {
  maxFilesize: 1,
  maxFiles: 1,
  acceptedFiles: "image/*",
  autoProcessQueue: false,
  url: "upload.php",
  previewsContainer: "#formfiles",
  previewTemplate: genTemplate("Secondary template"),
  dictFileTooBig: "Image is too large ({{filesize}}MiB). Max file size is {{maxFilesize}}MiB.",
  dictInvalidFileType: "This file is not an image.",
  dictMaxFilesExceeded: "You have already uploaded a secondary product image.",
  dictDefaultMessage: "Click or drop secondary product image here",
  success: function(file, response) {
    console.log(response);
  },
  error: function(file, response) {
    /*$.notify({
      message: response
    }, {
      type: "danger"
    });
    this.removeFile(file);*/
  },
  init: function() {
    //this.on("addedfile", function(file) {
    //    file.mycustomname = "my-new-name" + file.name;
    //console.log(file);
    //});
    this.on("success", function(file, responseText) {
      file.previewTemplate.setAttribute('id', responseText[0].id);

      $(".dz-id:last-child").html("hi!");

      file.previewElement.html = "hh";

    });
    this.on("thumbnail", function(file) {
      if (file.width !== image_width || file.height !== image_height) {
        file.rejectDimensions();
      } else {
        file.acceptDimensions();
      }
    });
  },
  accept: function(file, done) {
    file.acceptDimensions = done;
    file.rejectDimensions = function() {
      done("Product image resolution outside of specifications. Resolution must be " + image_width + "px x " + image_height + "px");
    };
  },
  renameFile: function(file) {
    var ext = file.name.substring(file.name.lastIndexOf('.') + 1);
    var newName = 'secondary.' + ext;
    return newName;
  }
});
.card {
  padding: 5px;
  border: 1px solid whitesmoke;
  background: #eee;
}
image
...