Почему я не могу просмотреть, что я загрузил?

Question

Я хочу просмотреть то, что я загрузил, но не смог.Я могу успешно загрузить файл, но когда я нажимаю Preview Image, в консоли появляется сообщение об ошибке:

react-dom.development.js:57 Uncaught Error: Objects are not valid as a 
  React child (found: [object File]). If you meant to render a collection 
  of children, use an array instead.
in div (at Upload.js:53)
in form (at Upload.js:39)
in div (at Upload.js:38)
in Upload (at App.js:9)
in div (at App.js:8)
in App (at src/index.js:7)
at invariant (react-dom.development.js:57)
at throwOnInvalidObjectType (react-dom.development.js:13460)
at reconcileChildFibers (react-dom.development.js:14291)
at reconcileChildren (react-dom.development.js:14675)
at updateHostComponent (react-dom.development.js:15025)
at beginWork (react-dom.development.js:15723)
at performUnitOfWork (react-dom.development.js:18750)
at workLoop (react-dom.development.js:18791)
at HTMLUnknownElement.callCallback (react-dom.development.js:147)
at Object.invokeGuardedCallbackDev (react-dom.development.js:196)
at invokeGuardedCallback (react-dom.development.js:250)
at replayUnitOfWork (react-dom.development.js:17998)
at renderRoot (react-dom.development.js:18909)
at performWorkOnRoot (react-dom.development.js:19812)
at performWork (react-dom.development.js:19722)
at performSyncWork (react-dom.development.js:19696)
at interactiveUpdates$1 (react-dom.development.js:19984)
at interactiveUpdates (react-dom.development.js:2267)
at dispatchInteractiveEvent (react-dom.development.js:5081)

Что я делаю неправильно и как я могу это исправить?

Вот мой Upload.js файл:

import React, { Component } from 'react';
import $ from 'jquery';

class Upload extends Component {
    constructor(props) {
        super(props);

        this.state = {
            selectedFile: null,
            prevImgURL: '',
            imgPrev: false
        };
        this.imageChange = this.imageChange.bind(this);
    }

    fileUpload() {
        if($("#new_post_image").click()) {
           this.setState({imgPrev: true});
        }
    }

    imageChange(e) {
        e.preventDefault();
        let reader = new FileReader();
        let file = e.target.files[0];

        reader.onloadend = () => {
            this.setState({
                selectedFile: file,
                prevImgURL: reader.result
            });
        }
        reader.readAsDataURL(file);
    }

    render() {
        return(
            <div>
                <form>
                    <input
                        id="new_post_image"
                        type="file"
                        onChange={this.imageChange}
                        name="image"
                        accept="image/*"
                    />

                    <button
                        type="button"
                        onClick={this.fileUpload.bind(this)}
                        >Preview Image</button>

                    <div>
                        {this.state.imgPrev ? this.state.selectedFile : null}
                    </div>

                </form>
            </div>
        );
    }
}

export default Upload;