Quasar Framework Uploader with axios

Question

A question about the quasar framework uploader component. I need to post the images to a URL that will rename the uploaded file and return the full path.

I'm using the upload-factory and axios

But I'm having problems understanding exactly how to pass the file to axios as if it was just an input type file. Basically I need to make it as If I'm sending a form with a single input file like this:

<input type="file" name="banner">

This is the component:

<q-uploader
  url=""
  extensions=".gif,.jpg,.jpeg,.png"
  :filter="filterFiles"
  :upload-factory="uploadFile" />

This is the upload method, but I keep getting an error response from the server.

uploadFile (file, updateProgress) {
  const formData = new FormData()
  formData .set('banner', file)
  var headers = {
    'Content-Type': 'multipart/form-data'
  }
  axios.post('http://someurl/uploadFile', formData , headers)
    .then(function (response) {
      console.log(response)
    })
    .catch(function (response) {
      console.log(response)
    })
}

If I post a plain html form with method="post" enctype="multipart/form-data" and a

<input type="file" name="banner">

I get my OK response from the server with the processed/uploaded image URL

Answer 1

I have successfully done direct uploading of the file on a button click to python API. But in vue3 and Quasar 2 with some additional formData. Thought might be helpful

This is component:

<q-btn
   label="Upload"
   @click="openFilePicker"
/>
<q-uploader
   ref="uploadFile"
   class="hidden"
   accept=".jpg, .jpeg, .png"
   @added="uploadFileFn"
/>

Setup:

setup() {
    return {
      uploadFile: ref(null),
    }
  },

Methods:

openFilePicker() {
   this.$refs.uploadFile.pickFiles();
},
uploadFileFn(file) {
   this.uploadFile = file[0];
   let fd = new FormData();
   fd.append("file", this.uploadFile);
   fd.append("id", "1");
   fd.append("name", "test_user");

   this.$axios.post('/upload_file_with_additional_form_data', fd, {
      headers: {'Content-Type': undefined},
   }).then(
   function (response) {
      if (response.data.success) {
          console.log(response)
      }
   }.bind(this))
}

This is working fine for me.