Usare un custom FileUpload in PrimeReact

Mattepuffo's logo
Usare un custom FileUpload in PrimeReact

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!


Share this Post

Commentami!