How to upload files using PrimeReact FileUpload Component

Question

I am a React/Spring beginner and I dont know how to make a Fileupload with Primereact. Their Documentation says following (https://www.primefaces.org/primereact/#/fileupload):

FileUpload requires a url property as the upload target and a name to identify the files at backend.

<FileUpload name="demo" url="./upload"></FileUpload>

But it neither say how do I fetch the data, how I access the "demo" in the backend, nor what kind of reponse I get.

Can anyone help me please? I have already searched the web but did not find anything.

Vaibhav Gidde · Accepted Answer · 2021-08-12 12:54:45Z

8

You can do something like this:

<FileUpload name="invoice"
    accept="image/*"
    customUpload={true}
    uploadHandler={invoiceUploadHandler}
    mode="basic"
    auto={true}
    chooseLabel="Upload invoice"/>

const invoiceUploadHandler = ({files}) => {
    const [file] = files;
    const fileReader = new FileReader();
    fileReader.onload = (e) => {
        uploadInvoice(e.target.result);
    };
    fileReader.readAsDataURL(file);
};

Send your request like this

const uploadInvoice = async (invoiceFile) => {
    let formData = new FormData();
    formData.append('invoiceFile', invoiceFile);

    const response = await fetch(`orders/${orderId}/uploadInvoiceFile`,
        {
            method: 'POST',
            body: formData
        },
    );
};

Important: Do not set any Content-Type header! This will be done automatically.

edited Aug 12, 2021 at 12:54

Vaibhav Gidde

7608 silver badges14 bronze badges

answered Apr 12, 2020 at 19:43

mleister

2,7143 gold badges34 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to upload files using PrimeReact FileUpload Component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related