Home Examples Charts Dashboard Projects Menu

Vue.js examples
Learn Vue.js

Vue file upload

Related:
Vue: Step-By-Step Guide To Mastering Vue.js From Beginner To Advanced (Vue.js, Learning Vue js 2)

A drag and drop (with fallback) file uploader component for Vue.js. This component lets you upload a file to a specified endpoint.

The component is reusable, you can have multiple upload forms in your app.
This is a drag and drop component.

vue file upload drag drop

Github: https://github.com/aaronhipple/vue-file-upload

Install

To install type this command:

npm install vue-file-upload

Javascript
To include it in your project, use the code below:

import FileUpload from \’vue-file-upload\
export default {
components: { FileUpload }
}

The file SampleApp.vue contains the actual display code. There’s also an endpoint specified there.

<template>
<div id="app">
<h1>Upload your files here.</h1>
<file-upload
:debug="true"
:upload-options="uploadOptions"
upload-endpoint="https://api.imgur.com/3/image"
file-key="image"
class="my-uploader"></file-upload>
</div>
</template>

Build Setup
Build with npm. If you don’t have npm installed, you’ll need to install it for this component.

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# run unit tests
npm run unit

# run e2e tests
npm run e2e

# run all tests
npm test

← vue data grid vue tweet app →

© vuejsexamples.net - Privacy Policy - Cookie Policy