Получить данные из экземпляра объекта filepond

Question

У меня есть форма отправки в моем проекте React, где я использую API filepond, чтобы пользователи могли отправлять файлы в форму

Я просто использую стандартный компонент FilePond, взятый из документации.

   <FilePond ref={ref => this.pond = ref}
                      allowMultiple={true} 
                      maxFiles={4} 
                      oninit={() => this.handleInit() }
                      onupdatefiles={(fileItems) => {
                          // Set current file objects to this.state
                          this.setState({
                              files: fileItems.map(fileItem => fileItem.file)
                          });
                      }}>

                {/* Update current files  */}
                {this.state.files.map(file => (
                    <File key={file} src={file} origin="local" 
                 />
                ))}

            </FilePond>

Я отправляю весь запрос бэкэнд-REST-серверу в java, и поэтому я хочу отправить информацию о типах информации, данных (в кодировке base64) и расширении файла.

Я делаю это, создавая массив объектов в моем запросе

  result: this.state.files.map(file => ({
            "file": this.findFileTypeHandler(file.name), 
            "data": this.encodeFileHandler(file)
        }))
    }

в моем encodeFileHandler мне нужен способ конвертировать данные в base64, но я не вижу свойства, содержащего необработанные данные, в объекте file.

Есть ли способ получить к нему доступ, или у кого-нибудь есть лучшая альтернатива, которую я мог бы использовать?

Answer 1

Попробуйте плагин File encode для filepond, он делает именно то, что вам нужно:

... он кодирует удаленный файл как строку base64 и сохраняет строку в скрытом поле ввода в виде строки JSON. Он использует строку JSON, поэтому он также может добавить размер файла, тип, имя и метаданные.

Использование (React):
Импортируйте код плагина:

import FilePondPluginFileEncode from 'filepond-plugin-file-encode';

Зарегистрируйте плагин:

registerPlugin(FilePondPluginFileEncode);

Подробнее здесь

Answer 2

Для тех, кто ищет способ удалить blob из объекта FilePond, вот что сработало для меня. Я сохранил ссылку на объект FilePond вот так:

      pond = FilePond.create(
    document.querySelector('#file'), {
        allowMultiple: true,
        instantUpload: false,
        allowProcess: false
    });

А потом использовал pond.getFiles()метод получения объекта файлов FilePond. Это отличается от файловых объектов BLOB-объектов,

Файл FilePond - это не то же самое, что файл JavaScript или Blob. Файл FilePond - это оболочка для файлового объекта JavaScript. Документы FilePond

Однако вы можете использовать file свойство, чтобы получить такой файл BLOB-объекта,

      pondFiles = pond.getFiles();
for (var i = 0; i < pondFiles.length; i++) {
    // todo get file blob with pondFiles[i].file
}