Primevue FileUpload custom error handling

Question

For a project I'm using the PrimeVue component. Since I'm dutch and the app will be in Dutch as well, I would like to catch the "file size too large" error and replace it with a Toast message. However, I'm stuck with how to catch that error. I've tried to use the following:

<FileUpload 
     chooseLabel="Selecteer foto" 
     mode="basic" 
     @error="onFileError"
     @select="onFileSelect" 
     customUpload 
     accept="image/*" 
    :maxFileSize="1000000"
     severity="secondary" 
    :multiple="false"
 /> 

However, either the '@error' is not a valid option, or the filesize error is not triggering the @error option.

So I'm a bit stuck with how to catch that error...

my setup snippet:

"primevue": "^4.0.4", "vue": "^3.4.29", "tailwindcss": "^3.4.10", "tailwindcss-primeui": "^0.3.4"**

thank you in advance!

Answer 1

Use the @select="onUploadFileSelection" event, in there you can process the files yourself, e.g.:

  const onUploadFileSelection = (event: FileUploadSelectEvent): void => {
      const file: File = Array.isArray(event?.files)
        ? event?.files?.findLast((f: File): boolean => !!f?.size)
        : event?.files; // To have the most recent uploaded file

      if (file) {
        // Your allowed mime types
        const typeIndex = ALLOWED_MIME_TYPES.findIndex((uploadType: string) => uploadType === file.type);
        if (typeIndex >= 0) {
          /// Your file size
          if (file.size > TWENTY_MB_IN_BYTES) {
            // Report size error
          } else {
             // Do upload + error handling from your back-end
          }    
        } else {
          // Report type error
        }
      }
  };