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-09 22:45:17Z

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 9, 2019 at 22:45

answered Aug 9, 2019 at 22:11

hugo

3,2612 gold badges14 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

KillMe Over a year ago

It says getFilesFromEvent not found. Also I'm trying to insert only 1 file at a time. What does it do?

hugo Over a year ago

Sorry, I had not included everything. But check out the link I included, I got the code from there.

KillMe Over a year ago

In my code posted above, why did dropzone uploader couldn't integrate with custom input field?

hugo Over a year ago

Because you had merely added you custom <input> as a child of <Dropzone>. The custom <Input> acts as a "glue" between both so they are correctly "wired" together.

KillMe Over a year ago

How to modify code if I just need to upload 1 file?

|

Collectives™ on Stack Overflow

Use React Dropzone Uploader with custom input field

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related