felixrieseberg / felixrieseberg/React-Dropzone-Component
Pass more parameters in useDropzone
- Dominant language
- JavaScript
- Stars
- 999
- Forks
- 148
- PR merge metrics
- No merged PRs in 30d
Description
Is there a way to pass more than three parameters to onDrop function? I mean i have access to accepted, rejected an synthetic event. But i need to pass an ID too and i can't figure out how.
Here's my code. As you can see i console.log(event.target.id) but it's always 1. But when i console.log(uploadable.id) it is 2
`import React, { useEffect, useState, useCallback, useMemo } from 'react';
import { useDropzone } from 'react-dropzone';
import Header2 from '../layout/header2';
import Sidebar from '../layout/sidebar';
import Footer2 from '../layout/footer2';
import axios from '../../axiosConfig'
import ContentBody from '../element/contentBody';
import lang from '../../langObject'
const language = localStorage.getItem('language')
const baseStyle = {
flex: 1,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
padding: '20px',
borderWidth: 2,
borderRadius: 2,
borderColor: '#eeeeee',
borderStyle: 'dashed',
background: 'transparent',
color: '#9d9d9d',
outline: 'none',
transition: 'border .24s ease-in-out'
};
const activeStyle = {
borderColor: '#2196f3'
};
const acceptStyle = {
borderColor: '#00e676'
};
const rejectStyle = {
borderColor: '#ff1744'
};
function DocumentsCreateUser() {
const [uploadables, setUploadables] = useState([])
const ref = useRef()
const [files, setFiles] = useState([])
const onDrop = useCallback((accepted, rejected, event, id) => {
console.log(event)
}, [])
const {
getRootProps,
getInputProps,
isDragActive,
isDragAccept,
isDragReject
} = useDropzone({ accept: 'image/*', onDrop: (accepted, rejected, e, id) => onDrop(accepted, rejected, e, id), multiple: false })
const style = useMemo(() => ({
...baseStyle,
...(isDragActive ? activeStyle : {}),
...(isDragAccept ? acceptStyle : {}),
...(isDragReject ? rejectStyle : {})
}), [
isDragActive,
isDragReject,
isDragAccept
])
useEffect(() => {
axios.get('/api/user/documents')
.then((response) => {
console.log(response)
setUploadables(response.data.uploadables)
})
getRootProps().onDrop = console.log()
console.log(getRootProps().onDrop)
}, [])
return (
Upload Documents
{uploadables.map((uploadable, index) => {
if (index === 0) {
console.log(uploadable.id)
}
return (
{uploadable[`title_${language}`]}
{uploadable[`description_${language}`]}
{
isDragActive ?
{lang.get('pages.dropFileHere')}
:{lang.get('pages.dragDropImageOrSelect')}
}
)
})}
Upload Selected Documents
)
}
export default DocumentsCreateUser`
Contributor guide
No contributing guide indexed for this repository
Research direction
Start at the useDropzone and getRootProps entry points shown in the report, then inspect how the onDrop callback arguments are defined and passed. Determine whether the requested identifier is supported or requires an API change, and verify the result with the project's existing tests or examples; done means the requested context can be passed reliably or the limitation is documented.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend, web-dev
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100