Есть ли способ, чтобы сжатие / изменение размера FilePond запускалось вручную? - PullRequest
Новая
       7

Есть ли способ, чтобы сжатие / изменение размера FilePond запускалось вручную?

0 голосов
/ 05 ноября 2019

Я использую FilePond и Doka для управления и редактирования загрузок изображений в форме с уникальными потребностями, и я надеюсь, что смогу автоматически изменять размеры и / или сжимать изображения при добавлении файла в FilePond.

Я использую реализацию React для FilePond + Doka.

Изменение размера и сжатия изображения настроено и работает, когда пользователь редактирует изображение, а затем нажимает кнопку «Готово», поэтому становится ясно, что все связановверх правильно.

В нашем случае использования мы не столь обеспокоены качеством и разрешением получаемых изображений, но мы делаем много настраиваемого управления файлами для размера клиента, используя IndexedDB и LocalStorage. Большинство пользовательских изображений не будут редактироваться / размечаться пользователями вручную, поэтому мы хотели бы иметь возможность изменять размеры и сжимать их вручную перед открытием транзакции и отправкой в ​​IndexedDB.

Я пытался использовать filePond.current.processFiles () и обнаруживает, что все работает, но размер файла не изменяется, и эта функция обработки также инициирует загрузку файла. 

// Imports
import { FilePond, registerPlugin } from "react-filepond"
import FilePondPluginImageEdit from "filepond-plugin-image-edit"
import FilePondPluginImageExifOrientation from "filepond-plugin-image-exif-orientation"
import FilePondPluginImagePreview from "filepond-plugin-image-preview"
import FilePondPluginFileEncode from "filepond-plugin-file-encode"
import FilePondPluginImageTransform from "filepond-plugin-image-transform"
import FilePondPluginImageResize from "filepond-plugin-image-resize"
import * as Doka from "../../scripts/react-doka/lib/doka.esm.min"

// Register FilePond plugins
registerPlugin(
  FilePondPluginImageEdit,
  FilePondPluginImageExifOrientation,
  FilePondPluginImagePreview,
  FilePondPluginFileEncode,
  FilePondPluginImageTransform,
  FilePondPluginImageResize
)

// Component

          <FilePond
            ref={filePond}
            files={photoFiles}
            allowImageEdit={true}
            allowMultiple={true}
            maxFiles={10}
            allowImageExifOrientation={true}
            allowImageResize={true}
            imageResizeTargetWidth={800}
            imageResizeTargetHeight={800}
            imageResizeMode={"contain"}
            instantUpload={false}
            disabled={isDisabled}
            allowDrop={!isDisabled}
            allowBrowse={!isDisabled}
            labelIdle={cameraButton}
            server="api/"
            onupdatefiles={fileItems => {
              updateFiles(fileItems.map(fileItem => fileItem.file))
            }}
            imageEditEditor={
              (DokaInstance = Doka.create({
                utils: ["crop", "markup"],
                markupAllowAddMarkup: true,
                markupColorDefault: 3,
                outputData: true, //Output the modifications made as an object representing the changes
                outputStripImageHead: false, // exif data
                outputQuality: 75,
                outputWidth: 800,
                outputHeight: 800,
                outputFit: "contain",
                onconfirm: output => {
                  handleDokaConfirm(output)
                },
              }))
            }
          />```

1 Ответ

0 голосов
/ 07 ноября 2019

Вы должны использовать обратный вызов onpreparefile для доступа к выходному файлу.

https://codesandbox.io/s/vanilla-filepond-prepare-file-bm2vr

Другой вариант - использовать метод server.process (который получает преобразованные изображения)хранить изображения где-то локально.

...