Folder path in Vue3 version

[AngeloLaudani]

Folder path in Vue3 version

[beepsoft]

I had the same problem. It seems that FileUpload's uploadHtml5() uses the wrong value for the filename in the multipart request. I fixed it with a customAction based on uploadHtml5() like this:

<template>
  ...
  <file-upload
      :custom-action="customAction"
      ...
  />
  ...
</template>

<script>  
export default {
  data() {
    ...
    return {
      // Custom action to have the full (relative) path of file included in the upload and not just
      // the file name
      customAction: async function customAction(file, component) {
        // This is based on component.uploadHtml5 to fix the filename setting
        const form = new window.FormData()
        let value
        for (const key in file.data) {
          value = file.data[key]
          if (value && typeof value === 'object' && typeof value.toString !== 'function') {
            if (value instanceof File) {
              form.append(key, value, value.name)
            } else {
              form.append(key, JSON.stringify(value))
            }
          } else if (value !== null && value !== undefined) {
            form.append(key, value)
          }
        }
        // Moved file.name as the first option to set the filename of the uploaded file, since file.name
        // contains the full (relative) path of the file not just the filename as in file.file.filename
        // @ts-ignore
        form.append(this.name, file.file, file.name || file.file.name || file.file.filename)
        const xhr = new XMLHttpRequest()
        xhr.open('POST', file.postAction || '')
        return component.uploadXhr(xhr, file, form)
      }
    }
  }
  ...
}
</script>