I have a file input which returns what looks like a file path to me, and yet the fileReader is giving me the following error.

Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.

I feel like I am missing something here. Where am I going wrong?

import React from 'react';



    export default class TestPage extends React.Component {

        constructor() {

            super();

            this.state = {

                file: ''

            }

        }



        onChange(e) {

            let reader = new FileReader();

            reader.onload = function(e) {

              this.setState({file: reader.result})

            }

            reader.readAsDataURL(e.target.value);

        }



        render() {

            return (

                <div>

                    <input onChange={this.onChange.bind(this)} type=file name=file />

                    <br />

                    <video width=400 controls>

                        <source src={this.state.file} type=video/mp4 />

                    </video>

                </div>

            )

        }

    }