vue: V-input-file is not of type ‘HTMLFormElement’ error

Question

on Vue adding selected file to FormData ends with error in both v-input-file and input type=‘file’.

error massage: Failed to construct ‘FormData’: parameter 1 is not of type ‘HTMLFormElement’.

<template>
 <Layout v-if="$store.state.user">

<v-form
      id='myform'
      name='myForm'
      class='myform'
      ref="form"
      lazy-validation
      enctype="multipart/form-data"
      method="POST"
    >
      <!-- FILE UP-LOAD -->
      <template>
        <v-file-input
          :rules="rules_fileInput"
          accept="image/png, image/jpeg, image/bmp"
          show-size
          counter
          label="PNG, JPEG, BMP"
          placeholder="Pick an image"
          prepend-icon="mdi-camera"
          @change="onFilePicked"
        />
      </template>

 <v-btn dark @click="submitForm">
      Save
 </v-btn>

 </v-form>
 </Layout>
 </template>

 <script>
   export default {
   data: () => ({
     imageUpload: null,
   }),
   methods: {
   onFilePicked(file) {
      this.imageUpload = file;
   },
   async submitForm() {
     
console.log('this.imageUpload:', this.imageUpload) // showing file 
//const headersImg = { headers:{ 'Content-Type':'multipart/form-data'}};


const { data } = await axios.post(
  url,
  new FormData(
    `files.${this.imageUpload.name}`,
    this.imageUpload,
    this.imageUpload.name
  )
);
 }

enter image description here

the image above clearly some file data.

if i will try to append FormData like so:

async submitForm() {

  const formData = new FormData();

  formData.append(
    `files.${this.imageUpload.name}`,
    this.imageUpload,
    this.imageUpload.name
  );

  //console.log('...formData:', ...formData);
  const urlLocal = 'http://localhost:1337/upload';
  const urlLive = 'http://www.events-pr-server.ml/upload';

  // client in netlefy, server in heroku with: Allow all Origin - for this demo

  try {
    const { data } = await axios({
      method: 'post',
      url: urlLive,
      data: formData,
      headers: {
        'Content-Type': 'multipart/form-data',
        // 'Access-Control-Allow-Origin': '*',
      },
    });

results as: Files are empty

1. tatusCode: 400, error: “Bad Request”, message: “Bad Request”,…}.
2. data: {errors: [{id: “Upload.status.empty”, message: “Files are empty”}]}.

enter image description here enter image description here

Answer 1

Based on your last comment, i created a codepen to check the issue.

1. There is no HTMLFormElement error which i encountered, check below code pen https://codepen.io/kurtesy_/pen/MWJBwQX?editors=1111

2. Next to Post a formData using axios use the below protocol, you need to specify "Content-Type": "multipart/form-data"

   axios({
      method: "post",
      url: "your_url",
      data: formData,
      headers: { "Content-Type": "multipart/form-data" },
    })
      .then(function (response) {
        //handle success
        console.log(response);
      })
      .catch(function (response) {
        //handle error
        console.log(response);
      });