Use React Dropzone Uploader with custom input field

Question

Can I integrate input inside react dropzone uploader? Basically the file I get from input should go to dropzone uploader.

React File Dropzone: https://github.com/fortana-co/react-dropzone-uploader

<Dropzone
    maxFiles={1}
    accept="image/*"
    getUploadParams={getUploadParams}
    onChangeStatus={handleChangeStatus}
    multiple={false}
    ref={setInputEl}
>
    <input
        ref={setInputEl}
        accept="image/*"
        className={classes.input}
        id="icon-button-file"
        type="file"
        onChange={handleFileChange}
    />
</Dropzone>

hugo · Accepted Answer · 2019-08-09T22:45:17.613

4

Yes, you can.

From the official live examples:

// https://github.com/quarklemotion/html5-file-selector
import { getDroppedOrSelectedFiles } from 'html5-file-selector'

const CustomInput = () => {
  const handleSubmit = (files, allFiles) => {
    console.log(files.map(f => f.meta))
    allFiles.forEach(f => f.remove())
  }

  const getFilesFromEvent = e => {
    return new Promise(resolve => {
      getDroppedOrSelectedFiles(e).then(chosenFiles => {
        resolve(chosenFiles.map(f => f.fileObject))
      })
    })
  }

  return (
    <Dropzone
      accept="image/*,audio/*,video/*,.pdf"
      getUploadParams={() => ({ url: 'https://httpbin.org/post' })}
      onSubmit={handleSubmit}
      InputComponent={Input}
      getFilesFromEvent={getFilesFromEvent}
    />
  )
}

Where Input is a custom component you provide:

const Input = ({ accept, onFiles, files, getFilesFromEvent }) => {
  const text = files.length > 0 ? 'Add more files' : 'Choose files'

  return (
    <label style={{ backgroundColor: '#007bff', color: '#fff', cursor: 'pointer', padding: 15, borderRadius: 3 }}>
      {text}
      <input
        style={{ display: 'none' }}
        type="file"
        accept={accept}
        multiple
        onChange={e => {
          getFilesFromEvent(e).then(chosenFiles => {
            onFiles(chosenFiles)
          })
        }}
      />
    </label>
  )
}

To clarify how this is different from your code: you had merely added you custom <input> as a child of <Dropzone>. You need to do as above so both are correctly "wired" together.

edited Aug 09 '19 at 22:45

answered Aug 09 '19 at 22:11

hugo

3,067
2
12
22

It says getFilesFromEvent not found. Also I'm trying to insert only 1 file at a time. What does it do? – KillMe Aug 09 '19 at 22:28
Sorry, I had not included everything. But check out the link I included, I got the code from there. – hugo Aug 09 '19 at 22:37
In my code posted above, why did dropzone uploader couldn't integrate with custom input field? – KillMe Aug 09 '19 at 22:41
1

Because you had merely added you custom `` as a child of ``. The custom `` acts as a "glue" between both so they are correctly "wired" together. – hugo Aug 09 '19 at 22:46
How to modify code if I just need to upload 1 file? – KillMe Aug 09 '19 at 23:02
I would say remove the `multiple` attribute in `` – hugo Aug 09 '19 at 23:05
@KillMe there's a prop `multiple` on `Dropzone` you can set to false. ``. But it looks like you have already done that in your original example. – DJ2 Sep 04 '19 at 18:24
@DJ2 You can see that Dropzone's `multiple` attr is not passed to `Input`, and therefore can’t be used by the rendered . In my example, has the `multiple` attr set, so it makes total sense that you can select multiple files. – hugo Sep 04 '19 at 21:14

Use React Dropzone Uploader with custom input field

1 Answers1