javascriptfile-uploadfrontendvuejs3primevue

Getting response from PrimeVue FileUpload after uploading file


I'm currently using PrimeVue FileUpload.

How do I retrieve the response data from my API call after uploading a file using the PrimeVue FileUpload component? My backend API on localhost:8000 successfully returns JSON after the file upload, but I couldn't find any documentation mentioning how to get this response data. Thanks for the help.

Code:

<template>
    <!-- OTHER STUFF HERE -->
    <FileUpload
        ref="fileUploadRef"
        name="sales-order"
        url="http://localhost:8000/api/v1/upload-sales-order/"
        accept=".csv" 
    />
</template>

Solution

  • Take a look at the FileUpload component's emits in the PrimeVue docs. I think that you're looking for the upload emit.

    It can be used like this:

        <FileUpload
            @upload="onUpload"
            ref="fileUploadRef"
            name="sales-order"
            url="http://localhost:8000/api/v1/upload-sales-order/"
            accept=".csv" 
        />
    

    And here's how you can access the response data:

        const onUpload = (event) => {
          console.log(event.xhr.response);
        }