how to use Dropzone in a react component

Question

I am trying to use Dropzone in a react component. But it doesn't work. varialble uploadfile is always undefined.

When I choose a file, this error occurs. The error. TypeError: Converting circular structure to JSON --> starting at object with constructor 'HTMLInputElement' | property '__reactFiber$35tlapmme54' -> object with constructor 'FiberNode' --- property 'stateNode' closes the circle

import React, { Component, useCallback } from 'react'
import {connect} from 'react-redux'
import { createProject } from '../../store/actions/projectActions'
import {Redirect} from 'react-router-dom'
import Dropzone  from 'react-dropzone';

class CreateProject extends Component {
    state = {
        title:'',
        content:'',
        uploadfile:'',
    }

    handleChange = (e) =>{
        this.setState({
            [e.target.id]: e.target.value
        })
    }

    handleSubmit = (e) =>{
        e.preventDefault();
        this.props.createProject(this.state)
        this.props.history.push('/')
    }

    onDrop = acceptedFiles => {
      if (acceptedFiles.length > 0) {
        this.setState({ uploadfile: acceptedFiles[0] })
      }
    }
  
    handleSubmitImg = (e) =>{
      e.preventDefault()
      //this.props.sampleteFunction()
    };

    

  render() {
   const maxSize = 3 * 1024 * 1024;
 

    const {auth} = this.props

    
    console.log("uploadFile"+this.uploadfile  ); //It always be Undefined
    if(!auth.uid) return <Redirect to="/signin" />
    return (
      <Dropzone
      onDrop={this.onDrop}
      accept="image/png,image/jpeg,image/gif,image/jpg"
      minSize={1}
      maxSize={maxSize}
    >
      {({ getRootProps, getInputProps }) => (

      <div className="container">
        <form onSubmit={this.handleSubmit} className="white">
            <h5 className="grey-text text-darken-3">
                Create Project
            </h5>
            <div className="input-field">
                <label htmlFor="title">Title</label>
                <input type="text" id="title" onChange={this.handleChange}/>
            </div>

            <div className="input-field">
                <label htmlFor="content">Project Content</label>
                <textarea id="content" className="materialize-textarea" onChange={this.handleChange}></textarea>
            </div>
            <div className="input-field">
                <button className="btn pink lighten-1 z-depth-0">Create</button>
            </div>
        </form>
            <div {...getRootProps()}>
                <input {...getInputProps()} />
                {console.log("SelectedFile"+ {...getRootProps() })}
                <p>Choose image File</p>
                {this.uploadfile ? <p>Selected file: {this.uploadfile.name}</p> : null}
            </div>

 
      </div>
  )}
</Dropzone>

    
    )
  }
}

const matchStateToProps = (state) => {
    return{
        auth: state.firebase.auth
    }
}

const mapDispatchToProps = (dispatch) => {
    return{
        createProject: (project) => dispatch(createProject(project))
    }
}

export default connect(matchStateToProps, mapDispatchToProps)(CreateProject)

Dharman · Accepted Answer · 2021-03-05 05:18:09Z

1

You have an error in below line

{this.uploadfile ? <p>Selected file: {this.uploadfile.name}</p> : null}

the uploadfile is a state variable, it can only be accessed like

this.state.uploadfile

edited Mar 5, 2021 at 5:18

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Mar 5, 2021 at 5:12

Vineet Kumar

687 bronze badges

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

Comments

Yadab · Accepted Answer · 2021-03-05 04:58:07Z

0

Try parsing received file.

function parseFile(file) {
  const updatedFile = new Blob([file], { type: file.type });
  updatedFile.name = file.name;

  return updatedFile;
}

And onDrop:

onDrop={(files) => this.onDrop((
                files.map((file) => parseFile(file))
            ))}

answered Mar 5, 2021 at 4:58

Yadab

1,9031 gold badge12 silver badges16 bronze badges

4 Comments

user14232549 Over a year ago

``` onDrop = acceptedFiles => { if (acceptedFiles.length > 0) { this.setState({ uploadfile: acceptedFiles[0] }) } } parseFile　= (file) =>{ const updatedFile = new Blob([file], { type: file.type }); updatedFile.name = file.name; return updatedFile; } render(){ <Dropzone onDrop={(files) => this.onDrop(( files.map((file) => this.parseFile(file)) ))} accept="image/png,image/jpeg,image/gif,image/jpg" minSize={1} maxSize={maxSize} > ```

user14232549 Over a year ago

Thank You for answering. I has modified above but Nothing changed.

user14232549 Over a year ago

sorry an error happened..Unhandled Rejection (TypeError): this.parseFile is not a function

Yadab Over a year ago

You need to remove this from this.parseFile and keep the parseFile function outside your react class.

Collectives™ on Stack Overflow

how to use Dropzone in a react component

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related