Vue 3 File Upload Component

Build a file upload component in Vue 3 with drag-and-drop, progress bar, multiple file support, preview thumbnails for images, and automatic upload with.

Javascript Vue File Upload Updated: 2026-01-15

Code

snippet

import { ref } from 'vue';

export default {
  setup() {
    const files = ref([]);
    const progress = ref({});

    const handleDrop = (e) => {
      files.value = [...e.dataTransfer.files];
      files.value.forEach(upload);
    };

    const upload = async (file) => {
      const fd = new FormData();
      fd.append('file', file);
      const res = await fetch('/api/upload', { method: 'POST', body: fd });
      progress.value[file.name] = 100;
      return res.json();
    };

    return { files, progress, handleDrop };
  },
}