DEV Community

File upload with React, Express and Google Cloud Storage with folder structure

Faith Morante on November 23, 2019

For the front end, we will use FilePond. It has a plugin for React for file uploads that supports previews, validations, drag and drop, etc. NOTE: ...

Read full post

vijaj-soni-Noetic • Dec 30 '19

const [imgCollection, setImgCollection] = useState('')
const [client, setClient] = useState('')
const [section, setSection] = useState('Section')

const onFileChange = (files) => {
    let items = files.map(fileItem => fileItem.file)
    setImgCollection([...imgCollection, items])
}

where i use these line of code its given me error

Faith Morante • Dec 30 '19

Hello,

What error do you get? Note, I'm using React Hooks.

Robert Terrell • Mar 5 '20

I noticed when i submit a file using the form it uploads correctly but for some reason it turns red and states error during load. My console shows the following: filepond.js:3139 GET localhost:3000/%5Bobject%20Object%5D 404 (Not Found) is there something I need to do to prevent this?

Faith Morante • Mar 5 '20

I wont be able to see that link as it is served through your localhost. Can you provide a screenshot of the error? thanks

Robert Terrell • Mar 5 '20 • Edited

That's what the error displays as in the console. The error message is the following:

"filepond.js:3139 GET localhost:3000/%5Bobject%20Object%5D 404 (Not Found)"

the file input turns red and continually flickers saying error during load. What's strange tho is that the file uploads correctly and displays, so im wondering if its the file change code that's possibly creating the error.