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>
)
}