felixrieseberg / felixrieseberg/React-Dropzone-Component

Pass more parameters in useDropzone

Open
#223 0 comments 0 reactions 0 assignees View on GitHub
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.