FileUpload: Custom upload bug on clear list

[vt167098]

How to clear the file list of fileupload(basic mode) after the upload is successful?

Now after the upload is complete, you cannot re-select other files to upload.

[MattSala]

I'm having a similiar issue when using Custom Uploader with Vue 3. There should be a callback that clears the component. I have posted this issue in PrimeLand discord and was informed it's most likely a bug.

[plenexy]

Also faced this problem.
So far I have solved it in another way.

Specified at FileUpload key = "data.uploadKey"
default uploadKey = 0

After custom uploading the files, I increase the key value by 1. The component is cleared

[Davidpsj]

One way that I fix this issue is put a ref (fileUpload) on FileUpload component and inside the uploader handler the following implement:

this.$refs.fileUpload.clear();
this.$refs.fileUpload.uploadedFileCount = 0;

After upload successfully, the uploadedFileCount no make sense to another uploading flow in my case, so I reset the count.
Note: I'm using primevue 2.9.0. This issues is present yet.

[tmlmt]

I'm using primevue 3.21.0 with Nuxt 3.0.0 and I still have this problem mentioned here with a custom uploader.
Had to use the fix proposed by @Davidpsj to be able to upload again after having uploaded once.
Am I doing anything wrong?

Here's my uploader:

const uploader = async (event: FileUploadUploaderEvent) => {
  const formData = new FormData();

  // MimeType Check on all files
  let filesToSend = 0;
  const filesToHandle = Array.isArray(event.files)
    ? event.files
    : [event.files];
  for (const f of filesToHandle) {
    const valid = await validateImageMimeType(f);
    if (valid) {
      formData.append("images", f);
      filesToSend += 1;
    } else {
      console.log("Unauthorised type")
    }
  }

  if (filesToSend > 0) {
    const { data, error } = await useFetch<string[]>(
      "/api/images",
      {
        method: "POST",
        body: formData,
      }
    );

    if (error.value) {
      console.log("Error")
    }

    if (data.value) {
      console.log("Hurray!")
      imageSrc.value = data.value;
    }
  }
  // If I don't add these two lines, I can't upload again after having uploaded once
  fileUpload.value.clear();
  fileUpload.value.uploadedFileCount = 0;
};

And my component :

<FileUpload
      name="image[]"
      :customUpload="true"
      accept="image/*"
      :maxFileSize="10000000"
      :multiple="true"
      :fileLimit="1"
      ref="fileUpload"
      @uploader="uploader"
    >
      <template #empty>
        <div class="flex align-items-center justify-content-center flex-column">
          <i class="pi pi-cloud-upload text-7xl text-500" />
          <p class="mt-4">Drag and drop images to upload</p>
        </div>
      </template>
    </FileUpload>

[Jeffrey-IKUU]

Bug is still here. I had to use the same solution to reset the limit. The removeUploadedFileCallback() was working just fine, the files[] and uploadedFiles[] are cleared but the uploadCount is not. @tugcekucukoglu "nuxt-primevue": "^0.2.1",

[peer-sk]

It seems issue still there. The following solution worked for me:

<template>
  <FileUpload
    ref="fileUploadRef" // Use ref to access the FileUpload component
    :multiple="true"
    :maxFileSize="10485760"
    accept="image/png,image/jpg,image/jpeg,application/pdf"
    @uploader="onAdvancedUpload"
    @select="onSelectedFiles"
  />
</template>

<script setup>
import { ref, nextTick } from 'vue';

// Define ref for FileUpload component
const fileUploadRef = ref(null);
const files = ref([]);

// Event handler for when files are selected
const onSelectedFiles = (event) => {
  files.value = event.files;
};

// Event handler for when files are uploaded
const onAdvancedUpload = async () => {
  await nextTick(() => {
    if (fileUploadRef.value) {
      fileUploadRef.value.clear(); // Clear the selected files in FileUpload component
      files.value = []; // Explicitly reset the files array
    }
  });
};
</script>