React Image upload Dropzone

Question

Ich bin in ein bisschen Ärger. Ich kodiere einen Bild-Uploader mit react, ich habe eine Upload-Komponente erstellt und möchte das Vorschaubild anzeigen lassen, bevor ich es an das Backend sende und es auf eine CDN hochlade. Allerdings kann ich die Vorschau nicht aus dem Stand herausholen. keine Fehler, es scheint nur nicht die Vorschau-Prop von dem Zustand zu bekommen. würde gerne Ihre Eingabe wissen.

Heres ist meine Komponente

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

ich diese per Drag reagieren bin-and-Drop-Bibliothek http://okonet.ru/react-dropzone/

Danke

Answer 1

Es ist dieses Stück Code:

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

Sie ändern this.state.files.preview-this.state.preview und Sie sollten in Ordnung sein.

Hoffe, das hilft!

Answer 2

Versuchen

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>