prescottprue / react-redux-firebase

Redux bindings for Firebase. Includes React Hooks and Higher Order Components.
https://react-redux-firebase.com
MIT License
2.55k stars 559 forks source link

React-dropzone Upload #993

Closed dancixx closed 3 years ago

dancixx commented 3 years ago

Hi guys!

I try to use react-dropzone to upload files. Uploading is working fine, but when the uploading action is done i cant see the response data on firebase.data.filesPath in redux store, only get the payload.

const firebase = useFirebase()
const filesPath = 'manThumbs'
const uploadedFiles = useSelector((state) => state.firebase.data && state.firebase.data.filesPath)

function onFilesDrop(files) {
        console.log('files', files)
        return firebase.uploadFiles(filesPath, files, filesPath)
}

function onFileDelete(file, key) {
        return firebase.deleteFile(file.fullPath, `${filesPath}/${key}`)
}

const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDropAccepted: onFilesDrop })

            <div {...getRootProps()}>
                <input {...getInputProps()} />
                {
                    isDragActive ?
                        <p>Drop the files here ...</p> :
                        <p>Drag 'n' drop some files here, or click to select files</p>
                }
            </div>

            <h3>Uploaded file(s):</h3>
            {uploadedFiles && uploadedFiles.map((file, key) => {
                return (<div key={file.name + key}>
                    <span>{file.name}</span>
                    <button onClick={() => onFileDelete(file, key)}>
                        Delete File
                      </button>
                </div>
                )
            })}

Is this a bug or something wrong?