• vue

<template><div><divid="modalTarget"class="control-section; position:relative"style="height:350px;"><ejs-uploaderref="uploadObj"id='defaultfileupload'name="UploadFiles"></ejs-uploader></div></div></template><script>importVuefrom'vue';import{UploaderPlugin}from'@syncfusion/ej2-vue-inputs';Vue.use(UploaderPlugin);exportdefault{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>

Resumable upload

A built-in feature is available to pause, resume, retry, and cancel a file upload. This helps users upload high-resolution images, videos,and other large files safely. Additionally, it provides an option to pause and resume automatically based on server connection.

• Resumable upload documentation

Upload images with previews

The Vue File Upload component allows you to upload images and resize images, show an image preview or thumbnail, etc. before uploading them.

• Image preview example

Custom file upload button

The action buttons of the Vue File Upload component are completely customizable, including its file list, which helps create your own design for the file upload UI.

• Custom file upload button documentation

File types (file extensions)

Upload various file types and limit the file types from client-side, which is mandatory before uploading a file to the web application.

• File type documentation

File validation (filter)

Add validation to check file size limits with minimum and maximum ranges, number of files required, total size, and MIME type before uploading a file to a server.

• File validation example
• File validation documentation

Paste image to upload

The Vue File Upload component processes images from the clipboard, also. Simply copy and paste the images to be uploaded to a server.

• Paste upload documentation

Delete uploaded files

The Vue File Upload component provides a simple interface to delete the wrongly uploaded files from a server.

• Delete uploaded file documentation

Preload uploaded files

Users can configure previously uploaded files from the server. This is useful to view and remove files from the server.

• Preload files example
• Preload files documentation

Auto-upload

Initiate an automatic upload to upload files immediately upon adding them to the upload queue.

• Auto-upload documentation

Progress bar

The Vue File Upload component displays a built-in progress bar (progress indicator) with the progress percentage during each file upload. The bar is completely customizable.

• Custom progress bar documentation

Right-to-left (RTL)

The Vue File Upload component supports right-to-left rendering, which improves the user experience and accessibility for those who use RTL languages.

Other supported frameworks

The File Upload is available for the Blazor, React, Angular, and JavaScript frameworks. Explore its platform-specific options through the following links:

• Blazor File Upload
• React File Upload
• Angular File Upload
• JavaScript File Upload

Supported browsers

The Vue File Upload works well with all modern web browsers, including Chrome, Firefox, Edge, Safari, and Opera.