CODEWITHSUNDEEP
reactjsreact-dropzone
R4VANG3R
R4VANG3R

Reputation: 415

Multiple drop targets react-dropzone

Basically I want to have multiple <input/> inside one dropzone.

should look something like this

It would look something like that.
All the drop targets should enable their isDragActive when entering the parent panel.

Is this at all possible with react-dropzone?

Upvotes: 0

Views: 1938

Answers (1)

Maximilian Haindl
Maximilian Haindl

Reputation: 314

Just pass more <input's /> as childs to Dropzone like:

<Dropzone
  onDrop={(onDropProps) =>
    console.log("onDropProps in onDrop event handler", onDropProps)
  }
  accept='image/jpg,image/jpeg,image/png'
  multiple={true}
>
  {({ getRootProps, getInputProps, isDragActive }) => {
    console.log("getRootProps", getRootProps());
    console.log("getInputProps", getInputProps());
    console.log("isDragActive", isDragActive);
    return (
      <div>
        <div {...getRootProps()}>
          <input {...getInputProps()} />
          {<p className='fileDrop'>Try dropping one or more files here</p>}
        </div>

        <div {...getRootProps()}>
          <input {...getInputProps()} />
          {<p className='fileDrop'>Try dropping one or more files here</p>}
        </div>

        <div {...getRootProps()}>
          <input {...getInputProps()} />
          {<p className='fileDrop'>Try dropping one or more files here</p>}
        </div>
      </div>
    );
  }}
</Dropzone>

I am using Dropzone on a collapsable table, so when I collapse a row I'll get access to all three props like

enter image description here

Upvotes: 0

Related Questions