file upload with progress bar react code example

Example: bulma react example upload file progress bar

import React, { useState } from 'react';

export default function Archivos(e) {

   const [indicador, setIndicador] = useState(0)

   const gSubirArchivo = (e) => {
      //console.info(e.target.files[0])
      let deque = "rucs"
      let data = new FormData()
      data.append("deque", deque);
      data.append("archivo", e.target.files[0]);

      var xhr = new XMLHttpRequest();
      xhr.upload.addEventListener("progress", function (e) {
         let percentComplete = Math.round(e.loaded / e.total) * 100;
         setIndicador(percentComplete);
      });

      xhr.addEventListener("readystatechange", function () {
         if (this.readyState === 4) {
            console.log(this.responseText);
            let resultado = JSON.parse(this.responseText)
            const fileName = document.querySelector('.file-name');
            fileName.textContent = resultado.nombre;
         }
      });
      let url = `${process.env.REACT_APP_API_BASE_URL}archivos/create`
      xhr.open("POST", url);

      xhr.send(data);
   }

   return (

      <div className="container">
      <div className="columns">
      <div className="column is-5">

         <div className="field">
         <label className="label">Adjuntar RUC:</label>
         <div className="file is-fullwidth is-small has-name">
         <label className="file-label">
            <input className="file-input" type="file" onChange={gSubirArchivo} />
            <span className="file-cta">
               <span className="file-icon">
                  <i className="fas fa-upload"></i>
               </span>
               <span className="file-label">
                  Seleccione...
               </span>
            </span>
            <span className="file-name">
               Falta seleccionar
            </span>
         </label>
         </div>

         <div className="progress-wrapper">
            <progress className="progress is-info is-small" value={indicador} max="100"></progress>
            <p className="progress-value is-white">{indicador}%</p>
         </div>
         </div>

      </div>
      </div>
      </div>
   )
}