Я хочу иметь 2 разных поля загрузки файлов в форме и использовать filepond для удобного управления загрузкой изображений. До сих пор я мог без проблем использовать filepond с одним единственным полем в форме, используя код, предоставленный документацией.
Я предположил, что могу добавить более одного поля со следующими изменениями:
Код:
<input name = "filepond_one[]" id = "file_one" type = "file" accept = "image/jpeg" class = "filepond" multiple />
<input name = "filepond_two[]" id = "file_two" type = "file" accept = "image/jpeg" class = "filepond" multiple />
<script src = "js/filepond.min.js"></script>
<script src = "js/filepond-plugin-file-validate-size.min.js"></script>
<script src = "js/filepond-plugin-image-edit.min.js"></script>
<script src = "js/filepond-plugin-image-exif-orientation.min.js"></script>
<script src = "js/filepond-plugin-image-preview.min.js"></script>
<script>
FilePond.setOptions({
maxFiles: 4,
maxFileSize: '2MB',
imageResizeTargetWidth: 1200,
labelIdle: 'Drag and Drop up to 4 photos',
labelFileProcessing: 'Uploading',
labelFileProcessingComplete: 'Upload complete',
labelFileProcessingAborted: 'Upload cancelled',
labelFileProcessingError: 'Error during upload',
labelFileProcessingRevertError: 'Error during revert',
labelFileRemoveError: 'Error during remove',
labelTapToCancel: 'tap to cancel',
labelTapToRetry: 'tap to retry',
labelTapToUndo: 'tap to undo',
server: 'photos/filepond/'
});
FilePond.registerPlugin(
FilePondPluginImagePreview,
FilePondPluginImageExifOrientation,
FilePondPluginFileValidateSize,
FilePondPluginImageEdit
);
const inputElements = document.querySelectorAll('input[type = "file"]');
Array.from(inputElements).forEach(inputElement => {
FilePond.create(inputElement);
})
</script>
Это изменение правильно применяет стиль filepond к обоим входам, однако изменение имени входа, похоже, прерывает загрузку.
Покопавшись в папке filepond, я увидел в файле config.php
вот это:
// where to get files from
const ENTRY_FIELD = array('filepond');
Итак, я добавил имена полей, которые хотел использовать как таковые, и «вуаля»!
// where to get files from
const ENTRY_FIELD = array('filepond', 'filepond_one', 'filepond_two');
Надеюсь, это поможет другим, так как я застрял на этом на день :-)
Спасибо друг! Тоже застрял на день :-)