React Image上传Dropzone

Question

I am in a bit of trouble. I am coding an image uploader with react, i created an upload component and i would like to get the preview image to show before i send it to the backend and upload it to a cdn. However, i cant manage to get the preview out from the state. no errors, it just does not seem to get the preview prop from the state. would love to know your input.

Heres is my component

 import React, { PropTypes } from 'react' var Dropzone = require('react-dropzone'); import './uploader.scss' class Uploader extends React.Component { constructor(props){ super(props) this.state = { files: [] }; } onDrop(files) { console.log(files); let filename = files[0].name; let preview = files[0].preview; this.setState({ files: files, name: filename, preview: preview }); } render() { return ( <div className = 'dropzoneContainer' > <Dropzone ref={(node) => { this.dropzone = node; }} onDrop={this.onDrop} className= 'zone' multiple={false}> <div className = 'dropzone' >Upload Image</div> {this.state.files.preview ? <div> <img src={this.state.preview} /> </div> : null} </Dropzone> </div> ); } } export default Uploader 

I am using this react drag and drop library http://okonet.ru/react-dropzone/

Thank you

Answer 1

It's this bit of code:

{this.state.files.preview ? <div>
  <img src={this.state.preview} />
</div> : null}

You change this.state.files.preview to this.state.preview and you should be fine.

Hope this helps!

Answer 2

Try

files.length == 0?
<Dropzone onDrop={this.onDrop.bind(this)}>
<p>Try dropping some files here, or click to select files to upload.
</p>
</Dropzone>
:<div>{files.map(f => <img src={f.preview} />)}</div> 

Answer 3

You can use React Dropzone Uploader , which gives you file previews out of the box, and also handles uploads for you.

import 'react-dropzone-uploader/dist/styles.css'
import Dropzone from 'react-dropzone-uploader'

const Uploader = () => {  
  return (
    <Dropzone
      getUploadParams={() => ({ url: 'https://httpbin.org/post' })} // specify upload params and url for your files
      onChangeStatus={({ meta, file }, status) => { console.log(status, meta, file) }}
      onSubmit={(files) => { console.log(files.map(f => f.meta)) }}
      accept="image/*,audio/*,video/*"
    />
  )
}

Uploads have progress indicators, and they can be cancelled or restarted. The UI is totally customizable.

Full disclosure: I wrote this library.