score:9

Accepted answer

here's an example how can you use filereader.readasdataurl

const {usestate} = react;

const filetodatauri = (file) => new promise((resolve, reject) => {
    const reader = new filereader();
    reader.onload = (event) => {
      resolve(event.target.result)
    };
    reader.readasdataurl(file);
    })

const app = () => {
  const [datauri, setdatauri] = usestate('')

  const onchange = (file) => {
    
    if(!file) {
      setdatauri('');
      return;
    }

    filetodatauri(file)
      .then(datauri => {
        setdatauri(datauri)
      })
    
  }

  return <div>
  <img width="200" height="200" src={datauri} alt="avatar"/>
  <input type="file" onchange={(event) => onchange(event.target.files[0] || null)} />
  </div>
}


reactdom.render(
    <app/>,
    document.getelementbyid('root')
  );
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<div id="root"></div>

score:0

select file method -

    selectfile = () => {
    let uploadfile = document.getelementbyid('upload_doc');
    if (uploadfile) {
        this.setstate({
            selecteduploadfile: uploadfile.files[0],
        });
    }
   };

upload file and sent as form data -

 const formdata = new formdata();
   formdata.append('file', this.state.selectedfile);
   this.uploadfile(formdata); // here you can use fetch/axios to send the form data

score:0

function datauritoblob(datauri) {
    var bytestring = atob(datauri.split(',')[1]);
    var ab = new arraybuffer(bytestring.length);
    var ia = new uint8array(ab);
    for (var i = 0; i < bytestring.length; i++) {
        ia[i] = bytestring.charcodeat(i);
    }
    var bb = new blob([ab]);
    return bb;
}

score:3

use filereader

fileuploadinputchange(e) {
    let reader = new filereader();
    reader.onload = function(e) {
      this.setstate({uploadedimage: e.target.result});
    };
    reader.readasdataurl(event.target.files[0]);
}

to show/preview image:

<avatar src={this.state.uploadedimage} name="foo bar" classname={'position-relative button-cursor'}/>

// or .. for image , use below
<img src={this.state.uploadedimage} alt={""} />

Related Query

More Query from same tag