Olá a todos,
Tenho mais um problema para compartilhar com vocês.
Estou desenvolvendo um E-Commerce com React, e no cadastro de produto preciso adicionar varias imagens para o mesmo produto. Como estou usando Firebase como base, pensei em fazer o upload dos arquivos, pegar a URL gerada pelo Storage e gravar esses endereços no cadastro usando Array.
Mas me deparei com um problema meio estranho. Estou usando isso const [files, setFiles] = useState([])
para receber as informações dos arquivos. Porem, quando inicio a pagina do cadastro e adiciono as imagens o sistema não consegue adicionar nesse Array, ele passa vazio, se logo em seguida eu adicionar mais um arquivo, o Array é carregado com tudo que tinha antes.
Console com setFile em branco
Console com setFile com os dados depois de uma segunda tentativa
Abaixo os códigos da pagina que estou usando.
import React, { useEffect, useState } from 'react';
import { Link, Redirect } from 'react-router-dom';
import { useDispatch } from 'react-redux';
import { addProductStart, fetchProductsStart } from './../../../store/reducers/Produtos/products.actions';
import FormInput from './../../../loja/componentes/forms/FormInput';
import FormSelect from './../../../loja/componentes/forms/FormSelect';
import { Carousel } from 'react-responsive-carousel';
import "react-responsive-carousel/lib/styles/carousel.min.css";
import userIMG from './../../../loja/assets/user.png';
import CKEditor from 'ckeditor4-react';
import fbConfig, { storage } from '../../../fbConfig';
import firebase from 'firebase';
const AdminNovoCadastroProdutos = props => {
const dispatch = useDispatch();
const [tasks, setTasks] = useState([])
const [files, setFiles] = useState([])
const [productType, setProductType] = useState('solar');
const [productName, setProductName] = useState('');
const [productThumbnail, setProductThumbnail] = useState([]);
const [productPrice, setProductPrice] = useState(0);
const [productQuantidade, setProductQuantidade] = useState(0);
const [productVoltagem, setProductVoltagem] = useState(0);
const [productDesc, setProductDesc] = useState('');
var gravado = false;
const onFileChange = e => {
var newFile = [];
const itensCopy = Array.from(tasks);
for (let i = 0; i < e.target.files.length; i++) {
console.log(i)
newFile = e.target.files[i];
newFile["id"] = Math.random();
console.log(newFile);
// add an "id" property to each File object
itensCopy.push({ value: newFile });
setFiles(itensCopy);
}
onUploadSubmission();
};
function addNewTask(task) {
const itensCopy = Array.from(productThumbnail);
itensCopy.push({ id: productThumbnail.length, value: task });
setProductThumbnail(itensCopy);
console.log(itensCopy)
}
const onUploadSubmission = e => {
// prevent page refreshing
var flag = 0;
const promises = [];
files.forEach(file => {
const uploadTask =
storage.ref().child(`your/file/path/${file.name}`).put(file);
promises.push(uploadTask);
uploadTask.on(
firebase.storage.TaskEvent.STATE_CHANGED,
snapshot => {
const progress =
((snapshot.bytesTransferred / snapshot.totalBytes) * 100);
if (snapshot.state === firebase.storage.TaskState.RUNNING) {
console.log(`Progress: ${progress}%`);
}
},
error => console.log(error.code),
async () => {
const downloadURL = await uploadTask.snapshot.ref.getDownloadURL();
addNewTask(downloadURL)
}
);
});
Promise.all(promises)
.then(() => alert('All files uploaded'))
.catch(err => console.log(err.code));
}
useEffect(() => {
dispatch(
fetchProductsStart()
);
}, []);
const resetForm = () => {
setProductType('mens');
setProductName('');
setProductThumbnail([]);
setProductPrice(0);
setProductDesc('');
setProductQuantidade(0);
setProductVoltagem(0);
gravado = true;
};
const handleSubmit = e => {
e.preventDefault();
dispatch(
addProductStart({
productType,
productName,
productThumbnail,
productPrice,
productDesc,
productQuantidade,
productVoltagem
})
);
resetForm();
};
return (
<div className='bg-grey'>
<div className='container '>
<h2>Novo Produto</h2>
<form onSubmit={handleSubmit}>
<div className='col-sm-6'>
<Carousel>
<div>
<img src={userIMG} />
<p className="legend">Legend 1</p>
</div>
<div>
<img src={userIMG} />
<p className="legend">Legend 2</p>
</div>
<div>
<img src={userIMG} />
<p className="legend">Legend 3</p>
</div>
</Carousel>
<label htmlFor="imagemPortfolio">Imagem Portfólio</label>
<input type="file" multiple className="form-control-file" id="imagemPortfolio" onChange={onFileChange} />
</div>
<div className="col-sm-6">
<FormInput
label="Nome"
type="text"
handleChange={e => setProductName(e.target.value)}
required
/>
<FormSelect
label="Tipo"
options={[{
value: "solar",
name: "Placa Solar"
}, {
value: "kit",
name: "Kit Solar"
}]}
handleChange={e => setProductType(e.target.value)}
required
/>
<CKEditor
onChange={evt => setProductDesc(evt.editor.getData())}
/>
<FormInput
label="Preço"
type="number"
min="0.00"
max="1000000.00"
step="0.01"
handleChange={e => setProductPrice(e.target.value)}
required
/>
<FormInput
label="Quantidade"
type="number"
min="0"
max="1000000"
handleChange={e => setProductQuantidade(e.target.value)}
required
/>
<FormInput
label="Voltagem Gerada"
type="number"
min="0.00"
max="1000000.00"
step="0.01"
handleChange={e => setProductVoltagem(e.target.value)}
required
/>
</div>
<br />
<button type="submit" className="btn btn-primary">Salvar</button>
<Link to='/admin/produtos'>
<button className="btn btn-primary btn-cancelar">Cancelar</button>
</Link>
</form>
</div>
<br />
</div>
);
}
export default AdminNovoCadastroProdutos;