Async in Vue Uploader component
7 Nov 202424 minutes to read
The uploader component allows you to upload the files asynchronously. The upload process requires save and remove action URL to manage the upload process in the server.
* The save action is necessary to handle the upload operation* The remove action is optional, can handle the removed files from serverThe File can be uploaded automatically or manually. For more information, you can refer to theAuto Upload section from the documentation.
To get start quickly with Async in Vue Uploader component, you can check on this video:
Multiple file upload
By Default, the uploader component allows you to select and upload multiple files simultaneously. The selected files are organized in a list for every file selection until you clear it by clicking clear button that is shown in footer.
You can enable the multiple file selection by usingmultiple API.
The following example explains aboutmultiple file upload settings.
In the following example, explains about multiple file upload settings.
<template><div><ejs-uploaderref="uploadObj"id='defaultfileupload'name="UploadFiles":asyncSettings="path"></ejs-uploader></div></template><scriptsetup>import{UploaderComponentasEjsUploader}from'@syncfusion/ej2-vue-inputs';constpath={saveUrl:'https://services.syncfusion.com/vue/production/api/FileUploader/Save',removeUrl:'https://services.syncfusion.com/vue/production/api/FileUploader/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><template><div><ejs-uploaderref="uploadObj"id='defaultfileupload'name="UploadFiles":asyncSettings="path"></ejs-uploader></div></template><script>import{UploaderComponent}from'@syncfusion/ej2-vue-inputs';exportdefault{name:"App",components:{"ejs-uploader":UploaderComponent},data:function(){return{path:{saveUrl:'https://services.syncfusion.com/vue/production/api/FileUploader/Save',removeUrl:'https://services.syncfusion.com/vue/production/api/FileUploader/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>Single file upload
You can select and upload a single file by disabling the multiple file selection property. The file list item is removed for every selection and it always maintain a single file to upload.
The following example explains about single file upload settings.
<template><div><ejs-uploaderref="uploadObj"id='defaultfileupload'name="UploadFiles":asyncSettings="path":multiple='multiple'></ejs-uploader></div></template><scriptsetup>import{UploaderComponentasEjsUploader}from'@syncfusion/ej2-vue-inputs';constpath={saveUrl:'https://services.syncfusion.com/vue/production/api/FileUploader/Save',removeUrl:'https://services.syncfusion.com/vue/production/api/FileUploader/Remove'};constmultiple=false;</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><template><div><ejs-uploaderref="uploadObj"id='defaultfileupload'name="UploadFiles":asyncSettings="path":multiple='multiple'></ejs-uploader></div></template><script>import{UploaderComponent}from'@syncfusion/ej2-vue-inputs';exportdefault{name:"App",components:{"ejs-uploader":UploaderComponent},data:function(){return{path:{saveUrl:'https://services.syncfusion.com/vue/production/api/FileUploader/Save',removeUrl:'https://services.syncfusion.com/vue/production/api/FileUploader/Remove'},multiple:false}}}</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>Save Action
The save action handler upload the files that needs to be specified in thesaveUrl property.
The save handler receives the submitted files and manages the save process in server. After uploading the files to server location, the color of the selected file name changes to green and the remove icon is changed as bin icon.
* When the file is uploaded successfully, the event “success” triggers to handle the operation after upload.* When the file is failed to upload, the event “failure” triggers with information, which cause this failure.You can cancel the upload process by setting the upload event argumenteventargs.cancel to true.
<template> <div> <ejs-uploader ref="uploadObj" id='defaultfileupload' name="UploadFiles" :asyncSettings= "path" ></ejs-uploader> </div></template><script setup>import { UploaderComponent } from '@syncfusion/ej2-vue-inputs';export default { data: function() { return { path: { saveUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Save' } } }}</script>Server-side configuration for save action
This section explains how to handle the server-side action for saving the file from server.
publicasyncTask<IActionResult>Save(IFormFileUploadFiles){if(UploadFiles.Length>0){if(!Directory.Exists(uploads))// Create the directory if not exists{Directory.CreateDirectory(uploads);}varfilePath=Path.Combine(uploads,UploadFiles.FileName);// Get the file pathusing(varfileStream=newFileStream(filePath,FileMode.Create))// Create the file{awaitUploadFiles.CopyToAsync(fileStream);// Save the file}}returnOk();}Server-side configuration for saving and returning responses
The following example demonstrates the server-side action for saving files on the server and returning responses in JSON, String, and File formats.
[AcceptVerbs("Post")]publicIActionResultSave(){// for JSON Datatry{// Process uploaded datavarresponseData=new{Success=true,Message="Files uploaded successfully",// Additional data can be added here};returnJson(responseData);}catch(Exceptione){varerrorResponse=new{Success=false,Message="File upload failed: "+e.Message};returnJson(errorResponse);}// for String Datatry{// Process string datavardata="success";// Return the string datareturnContent(data);}catch(Exception){vardata="failed";returnContent(data);}// for File Datatry{// Example: Retrieve file path for stream.txtvarfilePath="stream.txt";// Example file path// Get full file pathvarfullPath=Path.GetFullPath(filePath);// Return the filereturnPhysicalFile(fullPath,"text/plain");}catch(Exceptione){// Handle file retrieval failurereturnContent("Failed to retrieve file response: "+e.Message,"text/plain");}}Client-side configuration for saving and returning responses
The following example demonstrates the client-side action for saving files on the server and returning responses in JSON, String, and File formats.
<template><div><ejs-uploaderref="uploadObj"id='defaultfileupload'name="UploadFiles":asyncSettings="path":success="onSuccessHandler"></ejs-uploader></div></template><scriptsetup>import{UploaderComponentasEjsUploader}from'@syncfusion/ej2-vue-inputs';constpath={saveUrl:'api/FileUploader/Save'};constonSuccessHandler=(args)=>{if(args.e!==null)// Check if the event argument is not null{varresponseText=args.e.target.responseText;if(responseText.trim()!==""){// for JSON and File DatasvarjsonResponse=JSON.parse(responseText);if(jsonResponse!==null&&jsonResponse.hasOwnProperty("Success")){varisSuccess=jsonResponse["Success"];if(isSuccess){// File upload successvarmessage=jsonResponse.hasOwnProperty("Message")?jsonResponse["Message"]:"File uploaded successfully";// Additional processing as needed}}// for string Datavarmessage=responseText;// Additional processing as needed}}}</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><template><div><ejs-uploaderref="uploadObj"id='defaultfileupload'name="UploadFiles":asyncSettings="path":success="onSuccessHandler"></ejs-uploader></div></template><script>import{UploaderComponent}from'@syncfusion/ej2-vue-inputs';exportdefault{name:"App",components:{"ejs-uploader":UploaderComponent},data:function(){return{path:{saveUrl:'api/FileUploader/Save'}}},methods:{onSuccessHandler:function(args){if(args.e!==null)// Check if the event argument is not null{varresponseText=args.e.target.responseText;if(responseText.trim()!==""){// for JSON and File DatasvarjsonResponse=JSON.parse(responseText);if(jsonResponse!==null&&jsonResponse.hasOwnProperty("Success")){varisSuccess=jsonResponse["Success"];if(isSuccess){// File upload successvarmessage=jsonResponse.hasOwnProperty("Message")?jsonResponse["Message"]:"File uploaded successfully";// Additional processing as needed}}// for string Datavarmessage=responseText;// Additional processing as needed}}}}}</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>Remove Action
The remove action is optional. Specify the URL to handle remove process from server. The remove handler receives the posted files and handle the remove operation in server.
* When the files are removed successfully from server, the success event triggers to denote the process has completed.* When remove action fails, the event “failure” triggers with information, which cause failure in remove process.You can differentiate the file operation whether the success event triggers from save or remove action in its argumentseventArgs.operation.
You can remove the files which is not uploaded locally by clicking the remove icon. In this case, the success or failure events will not be triggered.
<template> <div> <ejs-uploader ref="uploadObj" id='defaultfileupload' name="UploadFiles" :asyncSettings= "path" ></ejs-uploader> </div></template><script setup>import { UploaderComponent } from '@syncfusion/ej2-vue-inputs';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>Server-side configuration for remove action
To remove an uploaded file from the server, it is sufficient to send only the file name. You can achieve this by setting thepostRawFile property of theRemovingEventArgs tofalse during theremoving event. This ensures that only the file name is sent to the server in the Remove action.
Here is an example:
<template><divclass="control-fluid"><ejs-uploader :asyncSettings="path":dropArea="dropElement":removing="onFileRemove"></ejs-uploader></div></template><script>import{UploaderComponent}from'@syncfusion/ej2-vue-inputs';exportdefault{data:function(){return{path:{saveUrl:'https://services.syncfusion.com/vue/production/api/FileUploader/Save',removeUrl:'https://services.syncfusion.com/vue/production/api/FileUploader/Remove',},dropElement:'.control-fluid',};},components:{'ejs-uploader':UploaderComponent,},methods:{onFileRemove:function(args){args.postRawFile=false;},},};</script>Here’s how to handle the server-side action for removing the file from server.
publicvoidRemove(stringUploadFiles){if(UploadFiles!=null){varfilePath=Path.Combine(uploads,UploadFiles);if(System.IO.File.Exists(filePath)){System.IO.File.Delete(filePath);// Delete the file}}}WhenpostRawFile is enabled, the complete file data will be sent to the server-sideRemove action. ThepostRawFile option is enabled by default.
Here is an example:
<template><divclass="control-fluid"><ejs-uploader :asyncSettings="path":dropArea="dropElement":removing="onFileRemove"></ejs-uploader></div></template><script>import{UploaderComponent}from'@syncfusion/ej2-vue-inputs';exportdefault{data:function(){return{path:{saveUrl:'https://services.syncfusion.com/vue/production/api/FileUploader/Save',removeUrl:'https://services.syncfusion.com/vue/production/api/FileUploader/Remove',},dropElement:'.control-fluid',};},components:{'ejs-uploader':UploaderComponent,},methods:{onFileRemove:function(args){// The `postRawFile` option is enabled by default.},},};</script>Here’s how to receive the file data in the server-sideRemove action:
publicvoidRemove(IFormFileUploadFiles){// Your file removal logic goes here!}Auto Upload
By default, the uploader processes the files to upload once the files are selected and added in upload queue. To upload manually, disable theautoUpload property. When you disable this property, you can use the action buttons to call upload all or clear all actions manually. You can change those buttons text using thebuttons property in the Uploader component.
<template><div><ejs-uploaderref="uploadObj"id='defaultfileupload'name="UploadFiles":asyncSettings="path":autoUpload='autoUpload'></ejs-uploader></div></template><scriptsetup>import{UploaderComponentasEjsUploader}from'@syncfusion/ej2-vue-inputs';constpath={saveUrl:'https://services.syncfusion.com/vue/production/api/FileUploader/Save',removeUrl:'https://services.syncfusion.com/vue/production/api/FileUploader/Remove'};constautoUpload=false;</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><template><div><ejs-uploaderref="uploadObj"id='defaultfileupload'name="UploadFiles":asyncSettings="path":autoUpload='autoUpload'></ejs-uploader></div></template><script>import{UploaderComponent}from'@syncfusion/ej2-vue-inputs';exportdefault{name:"App",components:{"ejs-uploader":UploaderComponent},data:function(){return{path:{saveUrl:'https://services.syncfusion.com/vue/production/api/FileUploader/Save',removeUrl:'https://services.syncfusion.com/vue/production/api/FileUploader/Remove'},autoUpload:false}}}</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>Sequential Upload
By default, the uploader component process multiple files to upload simultaneously. When you enable thesequentialUpload property, the selected files will process sequentially (one after the other) to the server. If the file uploaded successfully or failed, the next file will upload automatically in this sequential upload. This feature helps to reduce the upload traffic and reduce the failure of file upload.
<template><div><ejs-uploaderref="uploadObj"id='defaultfileupload'name="UploadFiles":asyncSettings="path":sequentialUpload='sequentialUpload'></ejs-uploader></div></template><scriptsetup>import{UploaderComponentasEjsUploader}from'@syncfusion/ej2-vue-inputs';constpath={saveUrl:'https://services.syncfusion.com/vue/production/api/FileUploader/Save',removeUrl:'https://services.syncfusion.com/vue/production/api/FileUploader/Remove'};constsequentialUpload=true;</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><template><div><ejs-uploaderref="uploadObj"id='defaultfileupload'name="UploadFiles":asyncSettings="path":sequentialUpload='sequentialUpload'></ejs-uploader></div></template><script>import{UploaderComponent}from'@syncfusion/ej2-vue-inputs';exportdefault{name:"App",components:{"ejs-uploader":UploaderComponent},data:function(){return{path:{saveUrl:'https://services.syncfusion.com/vue/production/api/FileUploader/Save',removeUrl:'https://services.syncfusion.com/vue/production/api/FileUploader/Remove'},sequentialUpload:true}}}</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>Preloaded Files
The uploader component allows you to preloaded the list of files that are uploaded in the server. The preloaded files are useful to view and remove the files from server that can be achieved by thefiles property. By default, the files are configured with uploaded successfully state on rendering file list. By default, the files are configured with uploaded successfully state on rendering file list. The following properties are mandatory to configure the preloaded files:
* Name* Size* Type<template><div><ejs-uploaderid='preloadFiles'ref="uploadObj"name="UploadFiles":asyncSettings="path"><e-files><e-uploadedfilesname='Nature'size=11000type='.png'></e-uploadedfiles><e-uploadedfilesname='TypeScript Succintly'size=20000type='.pdf'></e-uploadedfiles><e-uploadedfilesname='ASP.NET Webhooks'size=35000type='.docx'></e-uploadedfiles></e-files></ejs-uploader></div></template><scriptsetup>import{UploaderComponentasEjsUploader,FilesDirectiveasEFiles,UploadedfilesDirectiveasEUploadedfiles}from'@syncfusion/ej2-vue-inputs';constpath={saveUrl:'https://services.syncfusion.com/vue/production/api/FileUploader/Save',removeUrl:'https://services.syncfusion.com/vue/production/api/FileUploader/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><template><div><ejs-uploaderid='preloadFiles'ref="uploadObj"name="UploadFiles":asyncSettings="path"><e-files><e-uploadedfilesname='Nature'size=11000type='.png'></e-uploadedfiles><e-uploadedfilesname='TypeScript Succintly'size=20000type='.pdf'></e-uploadedfiles><e-uploadedfilesname='ASP.NET Webhooks'size=35000type='.docx'></e-uploadedfiles></e-files></ejs-uploader></div></template><script>import{UploaderComponent,FilesDirective,UploadedfilesDirective}from'@syncfusion/ej2-vue-inputs';exportdefault{name:"App",components:{"ejs-uploader":UploaderComponent,"e-files":FilesDirective,"e-uploadedfiles":UploadedfilesDirective},data:function(){return{path:{saveUrl:'https://services.syncfusion.com/vue/production/api/FileUploader/Save',removeUrl:'https://services.syncfusion.com/vue/production/api/FileUploader/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>Adding additional HTTP headers with upload action
The Uploader component allows you to add the additional headers withsave andremove action requests using theuploading andremoving events, which helps to send validation token on file upload. Access the current request and set the request header within these events.
The following code block shows how to add the additional headers with save and remove action request.
<template> <div> <ejs-uploader id='preloadFiles' ref="uploadObj" name="UploadFiles" :asyncSettings= "path" :uploading= "addHeaders" :removing= "addHeaders" ></ejs-uploader> </div></template><script setup> import { UploaderComponent } from '@syncfusion/ej2-vue-inputs';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: { addHeaders: function (args) { args.currentRequest.setRequestHeader('custom-header', 'Syncfusion'); } }}</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 exploreVue File Upload feature tour page for its groundbreaking features. You can also explore ourVue File Upload example to understand how to browse the files which you want to upload to the server.
See Also
[8]ページ先頭