Ad

React Dropzone Image Not Shown On Template

- 1 answer

I have used react dropzone component for multiple image upload but the image preview is not shown on my template.Files are shown on console.Where have i done wrong? I have used this component from here https://github.com/okonet/react-dropzone . let me know what else i have to provide to examine this issue with fine-tooth comb. Thanks for help in advance. Your help will be appreciated.

The code is

var Gallery = React.createClass({
    getInitialState: function () {
    return {
     files:[]
    };
},

onDrop(files) {
    console.log('Received files: ', files);
    this.setState({
        files: files
    });
},

showFiles() {
    var files = this.state;
    console.log('files',files);

    if (!files.length) {
        return null;
    }

    return (
        <div>
            <h3>Dropped files: </h3>
            <ul className="col-md-4">
                {
                    files.map((file, idx) => {
                        return (
                            <li key={idx}>
                                <img src={file.preview} width={100}/>
                                <div>{file.name + ' : ' + file.size + ' bytes.'}</div>
                            </li>
                        );
                    })
                }
            </ul>
        </div>
    );
},

render: function () {
  return (
       <div>
            <div className="col-md-12">
              <Dropzone onDrop={this.onDrop}>
                Try dropping some files here, or click to select files to upload.
            </Dropzone>
            {this.showFiles()}
            </div>
            <div className="row">
                <button className="btn" onClick={this.submit}>Next</button>
            </div>
      </div>
  );
},
});
Ad

Answer

The problem is in the showFiles method.

var files = this.state;
//const {files}=this.state

you don't assign the files to the file var, but the whole state.

i managed to solve the problem by doing this

var files = this.state.files || null;
Ad
source: stackoverflow.com
Ad