How to upload file in vue.js version 3

Question

I wanted to upload file using vue.js version 3.

I can able to import ref but not sure how to use it for fetching file data?

FileUploadTest.vue

<template>
<h1>File Upload</h1>
<div class="container">
    <div>
      <label>File
        <input type="file" id="file" ref="file" v-on:change="onChangeFileUpload()"/>
      </label>
        <button v-on:click="submitForm()">Upload</button>
    </div>
  </div>
</template>

<script src="./FileUploadTest.ts" lang="ts"></script>

FileUploadTest.ts

import { Options, Vue } from "vue-class-component";
import { ref } from 'vue';
import axios from "../../axios/index";

@Options({})
export default class FileUploadTest extends Vue {

    protected file: any;

    submitForm() {
        const formData = new FormData();
        formData.append('bytes', this.file);

        axios.post('https://localhost:44313/api/app/file/save',
            formData,
            {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            }
        ).then(function (data) {
            console.log(data.data);
        })
        .catch(function () {
            console.log('FAILURE!!');
        });
    }

    onChangeFileUpload() {
        debugger;
        this.file = ref(["file"]).value; 
    }
};

The actual file content is not storing in the this.file variable

this.file = ref(["file"]).value;

please share more code

Boussadjra Brahim
– Boussadjra Brahim

2021-01-13 14:22:22 +00:00
Commented Jan 13, 2021 at 14:22 — Boussadjra Brahim
– Boussadjra Brahim, Commented Jan 13, 2021 at 14:22
@BoussadjraBrahim added code. thanks

Sukesh Chand
– Sukesh Chand

2021-01-13 14:48:28 +00:00
Commented Jan 13, 2021 at 14:48 — Sukesh Chand
– Sukesh Chand, Commented Jan 13, 2021 at 14:48
may be useful this... Upload File

Ashok Parmar
– Ashok Parmar

2023-07-26 13:45:58 +00:00
Commented Jul 26, 2023 at 13:45 — Ashok Parmar
– Ashok Parmar, Commented Jul 26, 2023 at 13:45

Sukesh Chand · Accepted Answer · 2021-12-21 14:30:28Z

I can summarize the answer as below.

FileUpload.vue

<template>
  <div>
    <input
      type="file"
      @change="onFileChanged($event)"
      accept="image/*"
      capture
    />
  </div>
</template>

FileUpload.ts

import { defineComponent, ref } from "vue";

export default defineComponent({

    name: "FileUpload",

    setup() {
        const file = ref<File | null>();
        const form = ref<HTMLFormElement>();

        function onFileChanged($event: Event) {
            const target = $event.target as HTMLInputElement;
            if (target && target.files) {
                file.value = target.files[0];
            }
        }

        async function saveImage() {
            if (file.value) {
                try {
                // save file.value
                } catch (error) {
                    console.error(error);
                    form.value?.reset();
                    file.value = null;
                } finally {
                }
            }
        };

        return {
            saveImage,
            onFileChanged,
        }
    }
});

Muhammad Shahzad · Accepted Answer · 2021-09-12 13:04:12Z

19

Vue3.js upload file to server using composition api

<template>
      <input ref="file" v-on:change="handleFileUpload()"  type="file">
</template>
<script>

import { ref} from "vue"

export default{
    name:'Add',

    setup() {
        const file = ref(null)

        const handleFileUpload = async() => {
           // debugger;
            console.log("selected file",file.value.files)
            //Upload to server
        }

        return {
          handleFileUpload,
          file
       }
    }
}

</script>

answered Sep 12, 2021 at 13:04

Muhammad Shahzad

9,68022 gold badges90 silver badges130 bronze badges

3 Comments

Brent Over a year ago

This was helpful. I was trying to attach a v-model to my <FileUpload> tag, but I should have been using ref. Thanks for this info!

Navid Shad Over a year ago

The right path for file list is this, On template: <input ref="fileInput" > On script: this.$refs.fileInput.files

Brendan Over a year ago

@NavidShad This won't work with the composition api. You need to use a ref and then access the ref. e.g. const fileInput = ref() and fileInput.value.files

Gass · Accepted Answer · 2024-11-07 19:00:28Z

2023 approach with the latest syntax

I'm using the <script setup lang="ts"> for the composition API in Vuejs 3. lang="ts" specifies that the language is TypeScript instead of JavaScript.

<template>
    <main>
        <input ref="fileInput" type="file" @change="handleFileChange" />
        <button @click="doSomething">do something</button>
    </main>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const fileInput = ref<HTMLInputElement | null>(null)
const files = ref()

function handleFileChange() {
    files.value = fileInput.value?.files
}

function doSomething() {
    const file = files.value[0]
    console.log(file)
    // and do other things...
}
</script>

What's exactly happening ?

The ref is a special attribute that allows us to obtain reference to a DOM element or child.

To access the ref in the template we need to declare a ref in the script with the same name const fileInput = ref<HTMLInputElement | null>(null);

The files variable is an array-like object that can contain multiple files. To access the first or only file we can access it like so: const file = files.value[0] this will extract the first file object in files and then you are ready to use the file as you wish.

You may want to get the name:

file.name

Or the extension:

file.name.split('.').pop();

Or the name without the extension:

file.name.substring(0, file.name.lastIndexOf('.'))

Rob · Accepted Answer · 2021-09-28 13:05:55Z

Here's a simple component you could use for a file upload with the options api. No ref needed.

fileUpload.vue

<template>
    <input type="file" @change="onChange($event)">
</template>

<script>
export default {
    props: ['modelValue'],
    methods: {
        onChange(event) {
            this.$emit('update:modelValue', event.target.files[0]);
        },
    },
};
</script>

Your component...

<template>
    <form novalidate @submit.prevent="onSubmit">
        <file-upload v-model="form.file"></file-upload>
    </form>
</template>

<script>
import fileUpload from 'fileUpload';
export default {
    components: { fileUpload },
    data: () => ({ form: { file: null } }),
    methods: {
        onSubmit() {
            console.log(this.form);
            // post the form to the server
        }
    }
}
</script>

Boussadjra Brahim · Accepted Answer · 2021-01-13 17:21:52Z

3

Since you're using the option api you don't need the ref just use this.$refs.file :

   onChangeFileUpload() {
        debugger;
        this.file = this.$refs.file[0]; 
    }

answered Jan 13, 2021 at 17:21

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

2 Comments

Sukesh Chand Over a year ago

When using the Vue 3 Composition API via the setup() method, we don’t have access to this.$refs

Boussadjra Brahim Over a year ago

Yes but we could use returned ref as explained here

Miebaka · Accepted Answer · 2023-07-06 22:25:27Z

In as much as it's a frontend library, I'll still up in the core JavaScript function to play. Since every onchange listener has an parameter that hold the entire element, I'll use that to get the file value onced clicked.

<template>
  <form novalidate @submit.prevent="onSubmit">
    <input type="file" @change="addFile" />
  </form>
</template>

<script>
export default {
  name: "MyForm",

  data() {
    return {
      file: null,
    };
  },
  methods: {
    addFile(e) {
      this.file = e.target.files[0];
    },
    onSubmit() {
      console.log(this.file);
      // post the form to the server
    },
  },
};
</script>


This way you can modify it to whatever you want or upload it on the background while you fill other parts of the form.

Kaddu Livingstone · Accepted Answer · 2023-09-14 22:36:11Z

0

make sure you dont have a v-model on your file input

answered Sep 14, 2023 at 22:36

Kaddu Livingstone

1,7361 gold badge12 silver badges18 bronze badges

1 Comment

Yunnosch Over a year ago

You are contradicting an existing answer and a comment. You might want to improve clarity and helpfulness of your answer by adding an explanation of the reason to avoid v-models.

dmvstar · Accepted Answer · 2024-01-04 10:15:51Z

0

For example Your can use v-file-input

<v-card-text>
    <v-container>
        <v-row>
            <v-col cols="12" sm="12" md="12">
                <v-file-input v-model="file" show-size label="Template input"></v-file-input>
            </v-col>
        </v-row>
   </v-container>
</v-card-text>

answered Jan 4, 2024 at 10:15

dmvstar

413 bronze badges

Collectives™ on Stack Overflow

How to upload file in vue.js version 3

8 Answers 8

Comments

3 Comments

2023 approach with the latest syntax

What's exactly happening ?

Comments

Comments

2 Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

Comments

3 Comments

2023 approach with the latest syntax

What's exactly happening ?

Comments

Comments

2 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related