Как задать имя файловому полю Dropzone.js?

Рейтинг: 0Ответов: 1Опубликовано: 13.07.2023

Есть задача с помощью библиотеки Dropzone.js сделать прикрепление файлов к существующей форме. То-есть без фоновой отправки картинок, просто добавить картинки к форме после загрузки этих картинок. Почти всё получилось, кроме присвоение имени полю <input type="file" multiple="multiple" class="dz-hidden-input" accept="image/*" tabindex="-1" style="visibility: hidden; position: absolute; top: 0px; left: 0px; height: 0px; width: 0px;">, которое Dropzone добавляем автоматически.

Прошу помочь разобраться как это сделать. Предоставляю код:

// Меняем шаблон превью загруженных картинок
var previewNode = document.querySelector("#template");
previewNode.id = "";
var previewTemplate = previewNode.innerHTML;
previewNode.parentNode.removeChild(previewNode);

/*Загрузка картинок*/
new Dropzone("#contacts-form", {
    //url: window.location.origin + "/contacts/add",
    autoProcessQueue: false,
    paramName: "images", // The name that will be used to transfer the file
    acceptedFiles: "image/*",
    addRemoveLinks: false,
    maxFilesize: 2, // MB,
    maxFiles: 6,
    previewTemplate: previewTemplate,
    previewsContainer: "#previews", // Define the container to display the previews
    clickable: ".fileinput-button",
    autoQueue: false, // Make sure the files aren't queued until manually added
    hiddenInputContainer: "#contacts-form" // В форму добавляемся поле input type="file"
    ...
});

По итогу к форме #contacts-form добавляется input для загрузки файлов, но у него нет прааметра name. Не нашел в документации как можно его добавить. Есть ли нативный способ это сделать?

(В форме не забыл указать enctype="multipart/form-data")

Ответы

▲ 2

Используй коллбэк init, чтобы получить доступ к скрытому input файлов через свойство this.hiddenFileInput и установи нужное имя с помощью setAttribute(). Если я правильно понимаю, также можно задать имя при инициализации Dropzone: hiddenInputName: "FileName" Это установит нужное имя для скрытого input автоматически.