Filepond: как настроить filepond, чтобы иметь более 1 поля filepond в одной и той же форме?

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

Я предположил, что могу добавить более одного поля со следующими изменениями:

  • переименование ввода из filepond в filepond_one и filepond_two
  • настройка document.querySelector('input[type="file"]'); для запросаSelectorAll

Код:

<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 к обоим входам, однако изменение имени входа, похоже, прерывает загрузку.

Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Symfony Station Communiqué - 7 июля 2023 г
Symfony Station Communiqué - 7 июля 2023 г
Это коммюнике первоначально появилось на Symfony Station .
Оживление вашего приложения Laravel: Понимание режима обслуживания
Оживление вашего приложения Laravel: Понимание режима обслуживания
Здравствуйте, разработчики! В сегодняшней статье мы рассмотрим важный аспект управления приложениями, который часто упускается из виду в суете...
Установка и настройка Nginx и PHP на Ubuntu-сервере
Установка и настройка Nginx и PHP на Ubuntu-сервере
В этот раз я сделаю руководство по установке и настройке nginx и php на Ubuntu OS.
Коллекции в Laravel более простым способом
Коллекции в Laravel более простым способом
Привет, читатели, сегодня мы узнаем о коллекциях. В Laravel коллекции - это способ манипулировать массивами и играть с массивами данных. Благодаря...
Как установить PHP на Mac
Как установить PHP на Mac
PHP - это популярный язык программирования, который используется для разработки веб-приложений. Если вы используете Mac и хотите разрабатывать...
1
0
688
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Покопавшись в папке 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');

Надеюсь, это поможет другим, так как я застрял на этом на день :-)

Спасибо друг! Тоже застрял на день :-)

thewoodcutter 13.10.2021 04:57

Другие вопросы по теме