Usare un custom FileUpload in PrimeReact
Oggi vediamo un esempio completo di custom FileUpload in PrimeReact.
Nella documentazione ufficiale, l'esempio è abbastanza scarno, e non si capisce come si deve fare.
Inoltre, la mia esigenza nasce dal fatto che ho dovuto mettere un controllo sulle misure dell'immagine da caricare; mentre il modulo prevede dei controlli solo sulle dimensioni (in termini di peso dell'immagine).
Per controllare la misura dell'immagine useremo gli oggetti FormData, FileReader e Image; essendo Javascript puro, sono compatibili con React.
Ecco il codice:
import React, {Component} from 'react';
import {FileUpload} from "primereact/fileupload";
import axios from "axios";
export class FormWebinar extends Component {
constructor(props) {
super(props);
this.checkImageDimension = this.checkImageDimension.bind(this);
this.state = {
img: ''
};
}
checkImageDimension(event) {
const file = event.files[0]
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = (e) => {
let image = new Image();
image.src = e.target.result;
image.onload = (e) => {
let height = this.height;
let width = this.width;
if (width > 400 || height > 400 || width != height) {
alert("L'immagine deve avere una dimensione massima di 400x400, e deve essere quadrata");
} else {
let formData = new FormData();
formData.append('locandina', file);
axios({
method: 'post',
url: 'upload.php',
data: formData,
headers: {'Content-Type': 'multipart/form-data'}
}).then((response) => {
if (response.data.res === 'ok') {
this.setState({
img: response.data.nome_file
});
} else {
alert(response.data.message);
}
});
}
};
}
}
render() {
return (
<div>
<FileUpload id="locandina"
name="locandina" mode="advanced" accept="image/*"
chooseLabel="Crea locandina personalizzata"
cancelLabel="Cancella" maxFileSize={2000000}
invalidFileSizeMessageSummary="{0}: File troppo grande"
customUpload={true}
uploadHandler={this.checkImageDimension}/>
</div>
);
}
}
In pratica controlliamo che le misure non eccedano quelle impostate; in caso inviamo il tutto al servere usando Axios.
Enjoy!
javascript react primereact fileupload axios filereader formdata image
Commentami!