CODEWITHSUNDEEP
reactjsdropzone.js
Anaïs Saez
Anaïs Saez

Reputation: 1339

React Dropzone : change style when you're dragging and drop

I'm a junior developer, and react is new for me So i use dropzone-react, and i search how to change the style when you're dragging a file in the zone ? Dropzone react purposes a basic style for that, but i don't find how can i change this ? Do you have an example ? Thank you !

Upvotes: 2

Views: 6556

Answers (1)

Pradeep
Pradeep

Reputation: 665

An exmple for refrence 

const { Component } = React
const { render } = ReactDOM
const Dropzone = reactDropzone


const handleDropRejected = (...args) => console.log('reject', args)

class ImageUpload extends Component {
  constructor(props) {
    super(props)

    this.state = { preview: null }
    this.handleDrop = this.handleDrop.bind(this)
  }

  handleDrop([{ preview }]) {
    this.setState({ preview })
  }

  render() {
    const { preview } = this.state

    const dropzoneStyle = {
    width  : "20%",
    height : "150px",
    border : "1px solid black"
};
const dropzoneStyleActive = {
    width  : "20%",
    height : "150px",
    border : "5px solid green"
};

    return (    
      <section>
        <Dropzone 
          //onDrop={ this.handleDrop } 
          style={dropzoneStyle}
          activeStyle={dropzoneStyleActive}
          accept="image/jpeg,image/jpg,image/tiff,image/gif" multiple={ false } onDropRejected={ handleDropRejected }>
          Drag a file here or click to upload.
        </Dropzone>
        { preview &&
        <img src={ preview } alt="image preview" />
        }
      </section>
    )
  }
}

render(<ImageUpload />, document.getElementById('main'))

You can use the activeClassName and className properties to apply different styling when you drag the file in dropzone.

Upvotes: 3

Related Questions