search

pqina / filepond-plugin-file-encode

🗜 Send FilePond Files Along with Form Submit
https://pqina.nl/filepond/
MIT License
13 stars 12 forks source link

Unexpected error when using getFileEncodeDataURL #22

Open socketopp opened 2 years ago

socketopp commented 2 years ago

I thought I would notify the maintainers of this error. Discovered in "filepond-plugin-file-encode": "^2.1.10".

Code essentially:

 onupdatefiles={(fileItems) => {
 const file =  fileItems[0].getFileEncodeDataURL();
 }

Here is the error log.

Unhandled Rejection (TypeError): base64Cache[item.id] is undefined

./node_modules/filepond-plugin-file-encode/dist/filepond-plugin-file-encode.js/</plugin/</<
~/node_modules/filepond-plugin-file-encode/dist/filepond-plugin-file-encode.js:72
handleFile
~/src/pages/Create/Create.js:48

  45 | console.log(fileItems);
  46 | // const res = await fileItems[0].getFileEncodeBase64String();
  47 | // try {
> 48 |   const re2 = fileItems[0].getFileEncodeDataURL();
     | ^  49 |   console.log(re2);
  50 | // } catch (error) {
  51 | //   console.log('reject', error);

onupdatefiles
~/src/components/FileUpload/FileUpload.js:32

  29 | imagePreviewMaxHeight={400}
  30 | imagePreviewMinHeight={200}
  31 | onupdatefiles={(fileItems) => {
> 32 |   if (fileItems.length) handleFile(fileItems);
     | ^  33 | }}
  34 | // imagePreviewMaxHeight={256}
  35 | // files={files}

./node_modules/react-filepond/dist/react-filepond.js/componentDidMount/options.onupdatefiles
~/node_modules/react-filepond/dist/react-filepond.js:80
exposeEvent
~/node_modules/filepond/dist/filepond.js:11724
./node_modules/filepond/dist/filepond.js/</createApp/routeActionsToEvents/</</<
~/node_modules/filepond/dist/filepond.js:11742
setTimeout handler*./node_modules/filepond/dist/filepond.js/</createApp/routeActionsToEvents/</<
~/node_modules/filepond/dist/filepond.js:11741
./node_modules/filepond/dist/filepond.js/</createApp/routeActionsToEvents/<
~/node_modules/filepond/dist/filepond.js:11736
routeActionsToEvents
~/node_modules/filepond/dist/filepond.js:11733
_write
~/node_modules/filepond/dist/filepond.js:11570
./node_modules/filepond/dist/filepond.js/</</<
~/node_modules/filepond/dist/filepond.js:12569
./node_modules/filepond/dist/filepond.js/</<
~/node_modules/filepond/dist/filepond.js:12568
./node_modules/filepond/dist/filepond.js/</createPainter/tick/<
~/node_modules/filepond/dist/filepond.js:1408
tick
~/node_modules/filepond/dist/filepond.js:1407
FrameRequestCallback*requestTick
~/node_modules/filepond/dist/filepond.js:1370
tick
~/node_modules/filepond/dist/filepond.js:1386
FrameRequestCallback*requestTick
~/node_modules/filepond/dist/filepond.js:1370
tick
~/node_modules/filepond/dist/filepond.js:1386
FrameRequestCallback*requestTick
~/node_modules/filepond/dist/filepond.js:1370
tick
~/node_modules/filepond/dist/filepond.js:1386
FrameRequestCallback*requestTick
~/node_modules/filepond/dist/filepond.js:1370
tick
~/node_modules/filepond/dist/filepond.js:1386
FrameRequestCallback*requestTick
~/node_modules/filepond/dist/filepond.js:1370
tick
~/node_modules/filepond/dist/filepond.js:1386
FrameRequestCallback*requestTick
~/node_modules/filepond/dist/filepond.js:1370
tick
~/node_modules/filepond/dist/filepond.js:1386
FrameRequestCallback*requestTick
~/node_modules/filepond/dist/filepond.js:1370
tick
~/node_modules/filepond/dist/filepond.js:1386
FrameRequestCallback*requestTick
~/node_modules/filepond/dist/filepond.js:1370
tick
~/node_modules/filepond/dist/filepond.js:1386
FrameRequestCallback*requestTick
~/node_modules/filepond/dist/filepond.js:1370
tick
~/node_modules/filepond/dist/filepond.js:1386
FrameRequestCallback*requestTick
~/node_modules/filepond/dist/filepond.js:1370
tick
~/node_modules/filepond/dist/filepond.js:1386
FrameRequestCallback*requestTick
~/node_modules/filepond/dist/filepond.js:1370
tick
~/node_modules/filepond/dist/filepond.js:1386
FrameRequestCallback*requestTick
~/node_modules/filepond/dist/filepond.js:1370
tick
~/node_modules/filepond/dist/filepond.js:1386
FrameRequestCallback*requestTick
~/node_modules/filepond/dist/filepond.js:1370
tick
~/node_modules/filepond/dist/filepond.js:1386
FrameRequestCallback*requestTick
~/node_modules/filepond/dist/filepond.js:1370
tick
~/node_modules/filepond/dist/filepond.js:1386
FrameRequestCallback*requestTick
~/node_modules/filepond/dist/filepond.js:1370
tick
~/node_modules/filepond/dist/filepond.js:1386
FrameRequestCallback*requestTick
~/node_modules/filepond/dist/filepond.js:1370
tick
~/node_modules/filepond/dist/filepond.js:1386
FrameRequestCallback*requestTick
~/node_modules/filepond/dist/filepond.js:1370
tick
~/node_modules/filepond/dist/filepond.js:1386
FrameRequestCallback*requestTick
~/node_modules/filepond/dist/filepond.js:1370
tick
~/node_modules/filepond/dist/filepond.js:1386
FrameRequestCallback*requestTick
~/node_modules/filepond/dist/filepond.js:1370
tick
~/node_modules/filepond/dist/filepond.js:1386
FrameRequestCallback*requestTick
~/node_modules/filepond/dist/filepond.js:1370
tick
~/node_modules/filepond/dist/filepond.js:1386
FrameRequestCallback*requestTick
~/node_modules/filepond/dist/filepond.js:1370
tick
~/node_modules/filepond/dist/filepond.js:1386

I get around this by wrapping try catch around getFileEncodeDataURL.

KentShikama commented 1 year ago

I'm getting the same error too through the React wrapper.

Uncaught TypeError: base64Cache[item.id] is undefined
    plugin filepond-plugin-file-encode.js:74
    onupdatefiles ImageUploadQuestion.js:65
    onupdatefiles ImageUploadQuestion.js:65
    onupdatefiles react-filepond.js:84
    exposeEvent filepond.js:11734
    routeActionsToEvents filepond.js:11752
    setTimeout handler*./node_modules/filepond/dist/filepond.js/</createApp/routeActionsToEvents/</< filepond.js:11751
    routeActionsToEvents filepond.js:11746
    routeActionsToEvents filepond.js:11744
    _write filepond.js:11580
    js filepond.js:12579
    js filepond.js:12578
    tick filepond.js:1408
    tick filepond.js:1407
    requestTick filepond.js:1370
    tick filepond.js:1386
    requestTick filepond.js:1370
    tick filepond.js:1386
    requestTick filepond.js:1370
    tick filepond.js:1386
    requestTick filepond.js:1370
    tick filepond.js:1386
    requestTick filepond.js:1370
    tick filepond.js:1386
    requestTick filepond.js:1370
    tick filepond.js:1386
    requestTick filepond.js:1370
    tick filepond.js:1386
    requestTick filepond.js:1370
    tick filepond.js:1386
    requestTick filepond.js:1370
    tick filepond.js:1386
    requestTick filepond.js:1370
    tick filepond.js:1386
    requestTick filepond.js:1370
    tick filepond.js:1386
    requestTick filepond.js:1370
    tick filepond.js:1386
    requestTick filepond.js:1370
    tick filepond.js:1386
    requestTick filepond.js:1370
    tick filepond.js:1386
    requestTick filepond.js:1370
    tick filepond.js:1386
    requestTick filepond.js:1370
    tick filepond.js:1386
    requestTick filepond.js:1370
    tick filepond.js:1386
    requestTick filepond.js:1370
    tick filepond.js:1386
    requestTick filepond.js:1370
    tick filepond.js:1386
    requestTick filepond.js:1370
    tick filepond.js:1386
    requestTick filepond.js:1370
    tick filepond.js:1386
    requestTick filepond.js:1370
    tick filepond.js:1386
    requestTick filepond.js:1370
    tick filepond.js:1386
    requestTick filepond.js:1370
    tick filepond.js:1386
[filepond-plugin-file-encode.js:74](webpack:///node_modules/filepond-plugin-file-encode/dist/filepond-plugin-file-encode.js)
semics-tech commented 11 months ago

This is also happening with the vue wrapper, gettting TypeError: Cannot read properties of undefined (reading 'data') because base64Cache[item.id] is undefined.

Is there a fix for this or a workaround? I'm unable to use this plugin

rikschennink commented 11 months ago

Should be fixed in 2.1.12