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!