When filepond makes a GET request to my firebase storage, the link uses url decode %252F instead of %2F

Hi guys, I am a front end dev primarily so I don’t know too much regarding servers, get requests etc. but I am learning as I go.

App summary: On my web app, each user has a listing that has multiple images in Firebase Storage. When a user wants to edit their listing, I want to download the images that already exist in the listing and place them into Filepond, then the user can add new images, delete existing ones, and at if the user uploads them, itll wipe the existing listing photos and replace it with the new batch of photos.

(Using React, React Hooks, Firebase)

However, when I try to download the photos already in Firebase Storage, I get a 404 Object not found response. I can see that the URL filepond tries to use to download the image is different from the correct one, even though I am just passing it the URL.

Correct url:

FIREBASE STORAGE URL HERE users %2F gafspL9sdVSOXVkxYNlqzxyDbvG2 %2F listingPhotos %2F TtB6GhkV4T1Aro9wntgM %2F R03641951_M.jpg ?alt=media&token= media token here

The URL filepond tries to use:

FIREBASE STORAGE URL HERE users %252F gafspL9sdVSOXVkxYNlqzxyDbvG2 %252F listingPhotos %252F TtB6GhkV4T1Aro9wntgM %252F R03641951_M.jpg ?alt=media&token= media token here

From what I can see, its replacing the slashes in the URL with %252F, instead of %2F. From my research, I think %2F = /, whereas %252F = //, is this correct?

So, why is this happening and how can I configure Filepond to use the correct URL?

Here is what my Filepond looks like:

<FilePond
              files={photos}
              onupdatefiles={onDrop}
              allowMultiple={true}
              maxFiles={3}
              instantUpload={false}
              name="files"
              labelIdle='Drag & Drop your files or <span class="filepond--label-action">Browse</span>'
            />

Here is where I pass the existing photos (defaultPhoto’s) to the photos object (photos)

  useEffect(() => {
    //Pass the photos that already exist in Firebase to the photos object
    if (defaultPhotos != []) {
      defaultPhotos.forEach((photo) => {
        console.log("default photo: ", photo)
        setPhotos(photos => [...photos, {
          source: photo
        }])
      });
    }
  }, [defaultPhotos]);

And the on drop method for when a user puts a new image into the Filepond (not really tested this yet, first step was to pull in existing files from firebase, then check if the rest is working)

  const onDrop = (uploadedPhotos) => {
    setPhotos(uploadedPhotos);
  };

[Lewis-Seekio]

Ive managed to get round this by instead of passing the image URL’s of the already uploaded photos in firebase to firepond, I use axios to get the file object and pass that instead.

[rikschennink]

Oh sorry, I misread, it’s about downloading/reading images. Will take another look asap.