filepond: url.split is not a function

Summary

I’m noticing errors popping up occasionally when initialising Filepond with an existing file, causing the getFileNameFromURL method to call split on the url even though it’s undefined.

How to reproduce

Initialise Filepond (React) like so

<Filepond
  files={{
      source: "id",
      options: {
        type: 'local'
      }
  }}
/>

It now tries to fetch the file by using the ID and the configured backend URL. Randomly it will fail to properly get the url from the request and call getFilenameFromURL with undefined.

I haven’t found a reproducible case where this always happen, it just seems to happen “randomly”, perhaps due to a timing issue? In all of these cases the server returned with a 200 status code and the image.

Expected behaviour

To always get the correct url if the request itself is successful.

Additional information

Filepond version 4.2.0 It happens on a variety of devices, ranging from mobile to desktop, from Mac to Windows.

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 16

Most upvoted comments

Has there been any updates around this issue? I’ve run into it and will post if I find a solution.

dominiqueh on Apr 5, 2020

I ran into this same issue, and just spent several days fighting with it. What I am trying to do is disable the buttons on a form while an image is being processed and uploaded to my service. On the surface, this would seem quite easy, there are several lifecycle callbacks you can register for.

I don’t have a simple sandbox test case for you, but I can tell you exactly how to reproduce the error.

Create a ReactJS App
Use the filepond wrapper and example code from the documentation: https://pqina.nl/filepond/docs/patterns/frameworks/react/
Add handlers for any of these callbacks: beforeAddFile, onaddfile, onprocessfilestart. Within that handler, update the state of the react object, eg. this.setState({uploading: true});
Witness the error.

I haven’t looked deeply into the filepond code, but here is what I think is happening. The “addfile” process is operating asynchronously, the react setState() causes another render() call to occur before the “addfile” process is completed. This render essentially initiates another “addfile” process with the current value of this.state.files, and this one ends up creating the error we see.

If you comment out the setState() you added, you’ll see that onupdatefiles is called twice, but with setState() there it gets called three times, and one time through it is a Blob object not a File object, and that seems to cause the exact error. Note that it is also weird that onupdatefiles() is called twice on what should be “normal operation”, so that got me thinking …

If you remove {files} completely from the <FilePond>... definition, then I only see one call to onupdatefiles(), and everything seems to operate perfectly fine. So this just seems to be an issue with using a FilePond object as a “managed react object”.

Update:

I took a look at https://github.com/pqina/react-filepond/blob/master/lib/index.js and your use of allowFilesSync for the onupdatefiles option. That does explain why the other callbacks have issues and not this one, although the two calls to onupdatefiles (the way the sample code has it) suggests it is only “mostly working” as is. I wonder if your class shouldn’t do the work to have the file list managed, and essentially “proxy” the {files} param to make it work safely. I haven’t thought it through enough, but it seems like this class isn’t quite cutting it.

I noticed the maxParallelUploads option and thought I’d play with it. Setting the value to 1 has seemed to alleviate the issues I’ve been seeing for now. I don’t think it is “quite right”, but it seems to be working, so I’ll leave it as is and use it as is for a few days and see how it does.

allowMultiple={false} maxFiles={1} maxParallelUploads={1}

Keltin42 on Nov 7, 2019

False alarm, just wasn’t supplying the init data correctly.

ghost on May 27, 2019