Is there a way for FilePond compression / resize to be triggered manually?

Question

I'm using FilePond and Doka for managing and editing image uploads on a form with unique needs, and I am hoping to be able to resize and/or compress images automatically when a file is added to FilePond.

I'm using the React implementation of FilePond + Doka.

Image resizing and compression has been configured, and are working when a user edits an image and then hits 'Done' so it's clear that things are wired up correctly.

In our use case, we're not so concerned about the quality and resolution of the resulting images, but we're doing a lot of custom file management on the client size using IndexedDB and LocalStorage. Most user images won't be edited/marked up manually by users, so we'd like to be able to resize and compress manually before opening a transaction and pushing to IndexedDB.

I've tried to use filePond.current.processFiles() and find that everything runs, but the file size doesn't appear to change and this processing function also initiates a file upload.

// 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)
                },
              }))
            }
          />```

score 1 · Answer 1 · answered Nov 07 '19 at 08:00

1

you have to use the onpreparefile callback to access the output file.

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

Another option would be to use the server.process method (which receives transformed images) to store the images somewhere locally.

answered Nov 07 '19 at 08:00

Rik

3,328
1
20
23

Thank Rik. It seems onpreparefile isn't run if the instantUpload prop is set to false. Is there a mechanism for triggering the transform directly? – BJ Vicks Nov 07 '19 at 17:11
I haven't tested that but if you don't define a `server` property (as shown in the sandbox) the `instantUpload` setting is not used. – Rik Nov 08 '19 at 12:08
Good to know. Really, just looking to know if there's a way of doing something like: filePond.current.runCompression() or filePond.current.resizeImage(). This functionality is implemented by the plugins, but doesn't appear to be exposed to developers. Is that correct? – BJ Vicks Nov 08 '19 at 12:33
That's correct, at the moment it's automatically applied when using the `onpreparefile` handler or right before calling the `server.process` method. – Rik Nov 08 '19 at 16:03

Is there a way for FilePond compression / resize to be triggered manually?

1 Answers1