Getting Started
16 Mar 202311 minutes to read
This section explains how to create and configure the simple uploader component.
Prerequisites
System requirements for Syncfusion Vue UI components
Dependencies
The following are the dependencies required to use the uploader component in your application:
|-- @syncfusion/ej2-vue-inputs
|-- @syncfusion/ej2-inputs
|-- @syncfusion/ej2-vue-base
|-- @syncfusion/ej2-base
|-- @syncfusion/ej2-buttons
Get Started with Vue CLI
You can use Vue CLI
to setup your vue applications.
To install Vue CLI use the following command.
npm install -g @vue/cli
Start a new project using below Vue CLI command.
vue init webpack-simple quickstart
cd quickstart
npm install
Adding Syncfusion packages
All the available Essential JS 2 packages are published in npmjs.com
registry. You can choose the component that you want to install. For this application, we are going to use Uploader component.
To install Uploader component, use the following command
npm install @syncfusion/ej2-vue-inputs –save
Registering Vue Component
For Registering Vue Component two ways are available. They are as follows.
- Vue.use()
- Vue.component()
Using Vue.use()
Import the Component Plugin from the EJ2 Vue Package and register the same using Vue.use() with Component Plugin as its argument.
Refer the code snippet given below.
import { UploaderPlugin } from '@syncfusion/ej2-vue-inputs';
Vue.use(UploaderPlugin);
By Registering Component Plugin in Vue, all child directives are also globally registered.
Using Vue.component()
Import the Component and Component Plugin from EJ2 Vue Package, register the same using the Vue.component() with name of Component from ComponentPlugin and the EJ2 Vue Component as its arguments.
Refer the code snippet given below.
import { UploaderComponent, UploaderPlugin } from '@syncfusion/ej2-vue-inputs';
Vue.component(UploaderPlugin.name, UploaderComponent);
By using Vue.component(), only the EJ2 Vue Component is registered. Child directives needs to be registered separately.
Creating Vue Sample
Add the EJ2 Vue uploader using <ejs-Uploader>
to the <template>
section of the App.vue
file in src directory.
<template>
<div id="app">
<ejs-uploader ref="uploadObj" id='defaultfileupload' name="UploadFiles"></ejs-uploader>
</div>
</template>
<script>
import Vue from 'vue';
import { UploaderPlugin } from '@syncfusion/ej2-vue-inputs';
Vue.use(UploaderPlugin);
export default {
name: 'app',
data () {
return { }
}
}
</script>
Adding CSS Reference
Add uploader component’s styles as given below in <style>
section of the App.vue
file.
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
</style>
The Custom Resource Generator (CRG) is an online web tool, which can be used to generate the custom script and styles for a set of specific components.
This web tool is useful to combine the required component scripts and styles in a single file.
Running the Application
Now run the npm run dev
command in the console, it will build your application and open in the browser.
The
Essential JS2 AJAX
library has been integrated for uploader server requests. Hence, use the third partypromise
library like blue-bird to use the uploader in Internet Explorer.
<template>
<div>
<div id="modalTarget" class="control-section; position:relative" style="height:350px;">
<ejs-uploader ref="uploadObj" id='defaultfileupload' name="UploadFiles"></ejs-uploader>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import { UploaderPlugin } from '@syncfusion/ej2-vue-inputs';
Vue.use(UploaderPlugin);
export default {
data: function() {
return { }
}
}
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
#app {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.control-section {
height: 100%;
min-height: 200px;
}
</style>
Adding drop area
By default, the uploader component allows to upload files by drag the files from file explorer, and drop into the drop area. You can configure any other external element as drop target using dropArea property.
In the following sample, drop target is configured.
<template>
<div>
<div id='droparea' >
Drop files here to upload
</div>
<ejs-uploader ref="uploadObj" id='defaultfileupload' name="UploadFiles" :dropArea = "dropElement"></ejs-uploader>
</div>
</template>
<script>
import Vue from 'vue';
import { UploaderPlugin } from '@syncfusion/ej2-vue-inputs';
Vue.use(UploaderPlugin);
export default {
data: function() {
return {
dropElement: '#droparea'
}
}
}
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
#container {
visibility: hidden;
padding-left: 5%;
width: 100%;
}
#loader {
color: #008cff;
font-family: 'Helvetica Neue','calibiri';
font-size: 14px;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.fileupload {
margin: 20px auto;
width: 400px;
}
#droparea {
padding: 50px 25px;
margin: 30px auto;
border: 1px solid #c3c3c3;
text-align: center;
width: 20%;
display: inline-flex;
}
.e-file-select,
.e-file-drop {
display: none;
}
body .e-upload-drag-hover {
outline: 2px dashed brown;
}
#uploadfile {
width: 60%;
display: inline-flex;
margin-left: 5%;
}
</style>
Configure asynchronous settings
The uploader component process the files to upload in Asynchronous mode by default. Define the properties saveUrl and removeUrl to handle the save and remove action as follows.
<template>
<div>
<ejs-uploader ref="uploadObj" id='defaultfileupload' name="UploadFiles" :asyncSettings= "path" ></ejs-uploader>
</div>
</template>
<script>
import Vue from 'vue';
import { UploaderPlugin } from '@syncfusion/ej2-vue-inputs';
Vue.use(UploaderPlugin);
export default {
data: function() {
return {
path: {
saveUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Save',
removeUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Remove'
}
}
}
}
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
</style>
Handle success and failed upload
You can handle the success and failure actions using the success and failure events. To handle these event, define the function and assign it to corresponding event as follows.
<template>
<div>
<ejs-uploader ref="uploadObj" id='defaultfileupload' name="UploadFiles" :asyncSettings= "path" :success= "onUploadSuccess" :failure= "onUploadFailed" ></ejs-uploader>
</div>
</template>
<script>
import Vue from 'vue';
import { UploaderPlugin } from '@syncfusion/ej2-vue-inputs';
Vue.use(UploaderPlugin);
export default {
data: function() {
return {
path: {
saveUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Save',
removeUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Remove'
}
}
},
methods:{
onUploadSuccess: function (args) {
console.log('Uploaded successfully');
},
onUploadFailed: function (args) {
console.log('Upload fails');
}
}
}
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
</style>
You can also explore Vue File Upload feature tour page for its groundbreaking features. You can also explore our Vue File Upload example that shows how to render the file upload and browse the files which you want to upload to the server.