How to create a file uploader with Vue File Upload Component?
A quick start project that helps you to create a Vue File Upload component with a minimal code configuration.
Vue File Upload
The following section explains the steps required to create a simple Vue File Upload component.
Introduction
The Vue File Upload used in this project is created from the Syncfusion ej2-vue-inputs package. You can simply define it as <ejs-uploader> within the template.
Dependencies
Before starting this project, the Vue File Upload requires to add the Syncfusion ej2-vue-inputs package from the npmjs, which is distributed in the npm as @syncfusion scoped packages.
Creating Vue Project
To create the Vue project using the Vue CLI tool, follow the steps given below.
Install Vue CLI using the following command.
npm install -g @vue/cli
Now, create a new Vue project by using the command vue init webpack-simple and navigate to that folder.
vue init webpack-simple <project name> cd <project name>
Install the ej2-vue-inputs package through the npm install command.
npm install @syncfusion/ej2-vue-inputs –save
Registering the Vue Component
Register the Vue Component using Vue.use(), and then import the Component Plugin from the EJ2 Vue Package and register the same using the Vue.use() with Component Plugin as its argument.
import { UploaderPlugin } from '@syncfusion/ej2-vue-inputs';
Vue.use(UploaderPlugin);
Creating Vue File Upload
Add the EJ2 Vue uploader using <ejs-Uploader> to the <template> section of the App.vue file in the src directory.
<template> <div id="app"> <ejs-uploader ref="uploadObj" id='defaultfileupload' name="UploadFiles"></ejs-uploader> </div> </template>
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>
Run the application with the npm run dev command in the console, it will build your application and open in the browser.
Screenshot
Save action
The save action handler upload the files that needs to be specified in the saveUrl property. The save handler receives the submitted files and manages the save process in the server. After uploading the files to the server location, the color of the selected file name will be changed to green and the remove icon will be changed as bin icon.
<template>
<div id="app">
<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'
}
}
},
}
Server-side configuration for save action
This section explains about how to handle the server-side action for saving a file in the server.
[AcceptVerbs("Post")]
public void Save()
{
try
{
if (HttpContext.Current.Request.Files.AllKeys.Length > 0)
{
var httpPostedFile = HttpContext.Current.Request.Files["UploadFiles"];
if (httpPostedFile != null)
{
var fileSave = HttpContext.Current.Server.MapPath("UploadedFiles");
var fileSavePath = Path.Combine(fileSave, httpPostedFile.FileName);
if (!File.Exists(fileSavePath))
{
httpPostedFile.SaveAs(fileSavePath);
HttpResponse Response = HttpContext.Current.Response;
Response.Clear();
Response.ContentType = "application/json; charset=utf-8";
Response.StatusDescription = "File uploaded succesfully";
Response.End();
}
else
{
HttpResponse Response = HttpContext.Current.Response;
Response.Clear();
Response.Status = "400 File already exists";
Response.StatusCode = 400;
Response.StatusDescription = "File already exists";
Response.End();
}
}
}
}
catch (Exception e)
{
HttpResponse Response = System.Web.HttpContext.Current.Response;
Response.Clear();
Response.ContentType = "application/json; charset=utf-8";
Response.StatusCode = 400;
Response.Status = "400 No Content";
Response.StatusDescription = e.Message;
Response.End();
}
}
Remove action
The remove action is optional. Specify the URL to handle remove process from the server. The remove handler will receive the posted files and handle the remove operation in server.
<template>
<div id="app">
<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'
}
}
},
}
Server-side configuration for remove action
This section explains about how to handle the server-side action for removing a file from the server.
[AcceptVerbs("Post")]
public void Remove()
{
try
{
var fileSave = "";
if (HttpContext.Current.Request.Form["cancel-uploading"] != null)
{
fileSave = HttpContext.Current.Server.MapPath("UploadingFiles");
}
else
{
fileSave = HttpContext.Current.Server.MapPath("UploadedFiles");
}
var fileName = HttpContext.Current.Request.Files["UploadFiles"].FileName;
var fileSavePath = Path.Combine(fileSave, fileName);
if (File.Exists(fileSavePath))
{
File.Delete(fileSavePath);
}
}
catch (Exception e)
{
HttpResponse Response = HttpContext.Current.Response;
Response.Clear();
Response.Status = "404 File not found";
Response.StatusCode = 404;
Response.StatusDescription = "File not found";
Response.End();
}
}
Screenshot
Also, you can download and run the sample from this link
https://www.syncfusion.com/downloads/support/directtrac/general/ze/Vue_Uploader-1495325321
For more information about the File Upload functionalities, refer to this UG Documentation, API Reference and Samples.
