Sending form with multiple files and text

I’m new on Vue.Js and Axios… and got a mission on my job to make things working (help me aa).
I have these lines of code that I need to make work and I don’t understand where my mistake is.
I can upload files via Insomnia… But via Vue and Axios code, I can’t. Can you help me with that? I need it for my job. Running everything on my localhost.

My form code:

          <div class="mb-4">
            <label for="titleInput" class="form-label">Título do vídeo</label>
            <input v-model="title" type="text" class="form-control" id="titleInput"/>
          <div class="mb-4">
            <label for="thumbnailInput" class="form-label">Thumbnail do Vídeo</label>
            <input @change="onFileSelected" type="file" class="form-control" id="thumbnailInput" aria-describedby="thumbnailHelp" required />

            <div id="thumbnailHelp" class="form-text">
Por favor, selecione a imagem de destaque do vídeo.
<div class="mb-4">
<label for="thumbnailInput" class="form-label">Vídeo</label>
<input @change="upload(video)" type="file" class="form-control" id="thumbnailInput" aria-describedby="videoHelp" required/>

            <div id="videoHelp" class="form-text">
Por favor, selecione o arquivo de vídeo que deseja utilizar.
          <button @click="onUpload" type="submit" class="btn btn-primary">

My Vue.Js Code:

import axios from "axios";
const BASE_URL = "http://localhost:1337";
export default {
  name: "home",
  data() {
return {
  title: "",
  selectedFile: null,
  loading: true,
  errored: false,
  // mounted() {

  // },
  methods: {
onFileSelected(event) {
  this.selectedFile =[0];
onUpload() {
  const fd = new FormData();
  fd.append("image", this.selectedFile,;
    .post(`${BASE_URL}/videos`, fd, {
      headers: {
        "Content-Type": "multipart/form-data",
    .then((res) => {
    .catch((error) => {

And I got this error:

What I should do to get this working on Vue?

you always need to prefix your file property with files when creating or updating an entry. e.g. files.{propertyName} as stated here

in your case it is fd.append("files.image", this.selectedFile,;

1 Like

I’m getting this output:


mozAnon: false
mozSystem: false
onabort: null
onerror: null
onload: null
onloadend: null
onloadstart: null
onprogress: null
onreadystatechange: null
ontimeout: null
readyState: 0
response: “”
responseText: “”
responseType: “”
responseURL: “”
responseXML: null
status: 0
statusText: “”
timeout: 0
upload: XMLHttpRequestUpload { onloadstart: null, onprogress: null, onabort: null, … }
withCredentials: false

Status: “0”
I’ve already set Public to Upload files in permissions…