[Feature request] Add method on file to retrieve the blob of the transformed image

[Tofandel]

It would be nice to be able to access the transformed blob from the file using something like

const blob = await file.getTransformedImage();

Basically like what filepond-plugin-encode does with file.getFileEncodeDataURL() but without the encoding part

[rikschennink]

Hi, you can use onpreparefile to access the data. Would that work for your use case?

[Tofandel]

Yes that's what I'm currently using, but in a weird way. I extend the Filepond file with a promise and then get the result of the promise or await in the submission, but it would definitely be simpler if this was built in with a method directly on the Filepond file

    extendFile(file) {
      if (file && !file.output) {
        const pr = new Promise((resolve, reject) => {
          const t = setTimeout(() => reject(new Error('Timeout')), 30000);
          file.extend('resolve', (...args) => {
            clearTimeout(t);
            resolve(...args);
          });
        });
        pr.catch(() => {});
        file.extend('output', pr);
      }
      return file;
    },
    updateFiles() {
        this.$emit('input', this.extendFile(this.$refs.pond.getFile()));
    },
    prepare(file, output) {
      file.resolve(output);
    },

Then on submit in a different component

const blob = await file.output;

[rikschennink]

Yeah that is a bit odd, I'll see if I can add this.

[rikschennink]

I've added requestPrepare to the fileItem API, it returns a Promise which resolves with the prepared file item.

[Tofandel]

requestPrepare works well on the first call, but on subsequent calls the promise never resolves, that's a problem when resubmitting a form

await file.requestPrepare(); // This one resolves a Blob
await file.requestPrepare(); // Never resolves so loops indefinitely

The result needs to be cached

[rikschennink]

@Tofandel I'll look into this when I have some time.