JavaScript/jQuery FileUploader - Getting Started
jQuery
Angular
Vue
React
FileUploader is a UI component that allows users to upload files to your server. This tutorial guides you through the following steps:
- Add FileUploader to a page and configure component settings.
- Connect FileUploader to a backend.
- Configure FileUploader validation and upload permissions.
- Customize the appearance of FileUploader visual elements.
Each section in this tutorial covers a single configuration step. You can find the complete source code in the following GitHub repository:
Create and Configure FileUploader
jQuery
Add DevExtreme to your jQuery application and use the code below to create a FileUploader component.
$(function() {
$("#file-uploader").dxFileUploader({ });
});
<html>
<head>
<!-- ... -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/25.1.4/css/dx.light.css">
<script type="text/javascript" src="https://cdn3.devexpress.com/jslib/25.1.4/js/dx.all.js"></script>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<div id="file-uploader"></div>
</body>
</html>Angular
Add DevExtreme to your Angular application and use the code below to create a FileUploader component.
<dx-file-uploader></dx-file-uploader>
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DxFileUploaderModule } from 'devextreme-angular';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
DxFileUploaderModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }Vue
Add DevExtreme to your Vue application and use the code below to create a FileUploader component.
<script setup lang="ts">
import { reactive } from 'vue';
import { DxFileUploader } from 'devextreme-vue/file-uploader';
import 'devextreme/dist/css/dx.light.css';
</script>
<template>
<DxFileUploader />
</template>React
Add DevExtreme to your React application and use the code below to create a FileUploader component.
import React, { JSX } from 'react';
import { FileUploader } from 'devextreme-react/file-uploader';
import 'devextreme/dist/css/dx.light.css';
export default function App(): JSX.Element {
return (
<FileUploader />
);
}To configure FileUploader functionality, specify the following properties:
- multiple
Specifies if users can upload multiple files at once. - uploadMode
Configures how FileUploader sends files to your server. This property accepts the following values:- "instantly" (default)
The component uploads with HTTP requests immediately after users select files. - "useButtons"
The component uploads with HTTP requests after users select files and press an upload button. - "useForm"
The component uploads using an HTML form when users submit the form.
- "instantly" (default)
- allowCanceling
Allows users to remove selected files and cancel uploading. Applies only if uploadMode is "instantly" or "useButtons".
This example sets uploadMode to "useButtons" and enables the multiple and allowCanceling properties:
jQuery
$(function() {
$("#file-uploader").dxFileUploader({
multiple: true,
uploadMode: 'useButtons',
allowCanceling: true,
});
});Angular
<dx-file-uploader
[multiple]="true"
uploadMode="useButtons"
[allowCanceling]="true"
></dx-file-uploader>Vue
<template>
<DxFileUploader
:multiple="true"
upload-mode="useButtons"
:allow-canceling="true"
/>
</template>React
export default function App(): JSX.Element {
return (
<FileUploader
multiple={true}
uploadMode="useButtons"
allowCanceling={true}
/>
);
}Connect FileUploader to a Backend
To connect FileUploader to a backend when uploadMode is "instantly" or "useButtons", specify one of the following properties:
- uploadUrl
Specifies a target URL for HTTP requests. The uploadMethod property allows you to choose between POST (default) and PUT requests. - uploadFile
Defines a custom uploading function. You can implement uploadFile if you want to process files on the client before uploading.
You must configure your server to accept uploaded files. Refer to the following topics for server-side implementation examples:
To connect FileUploader to a backend when uploadMode is "useForm", configure HTML form submission functionality. For more information about how to submit HTML form data, refer to the following article on MDN: Sending form data.
Configure Upload Permissions
To configure FileUploader permissions, specify the following properties:
- accept
Specifies file types and extensions the component accepts. Assign MIME types to this property. Alternatively, define allowedFileExtensions to specify accepted file extensions. - minFileSize/maxFileSize
These properties specify the minimum/maximum file size the component accepts. To allow users to upload large files with less strain on your server resources, you can enable chunk uploading.
This example configures FileUploader to accept image files up to 32 MB:
jQuery
$(function() {
$("#file-uploader").dxFileUploader({
accept: 'image/*',
maxFileSize: 32000000,
});
});Angular
<dx-file-uploader
accept="image/*"
[maxFileSize]="32000000"
></dx-file-uploader>Vue
<template>
<DxFileUploader
accept="image/*"
:max-file-size="32000000"
/>
</template>React
export default function App(): JSX.Element {
return (
<FileUploader
accept="image/*"
maxFileSize={32000000}
/>
);
}Customize FileUploader
You can customize FileUploader visual elements as your needs dictate. To customize the file drag and drop zone, specify the dropZone property. To configure display text, specify properties such as labelText, readyToUploadMessage, and uploadButtonText.
This example implements a custom drop zone and configures the labelText property:
jQuery
$(function() {
$("#file-uploader").dxFileUploader({
labelText: 'Drop Images Here to Upload...',
dropZone: '.file-uploader-block',
});
});Angular
<dx-file-uploader
labelText="Drop Images Below to Upload..."
dropZone=".file-uploader-block"
></dx-file-uploader>Vue
<template>
<DxFileUploader
label-text="Drop Images Below to Upload..."
drop-zone=".file-uploader-block"
/>
</template>React
export default function App(): JSX.Element {
return (
<FileUploader
labelText="Drop Images Below to Upload..."
dropZone=".file-uploader-block"
/>
);
}To customize FileUploader visual elements further, use custom CSS. This example implements styles to position the labelText string below the "Select a file" button. Additionally, this example centers the component horizontally inside the FileUploader drop zone. Scrollbars appear when the file list overflows the drop zone container (overflow-y: auto;).
.demo-container {
margin: 50px;
height: 50vh;
}
.file-uploader-block {
width: 100%;
height: 100%;
background-color: #f5f5f5;
border-radius: 16px;
}
#file-uploader {
height: 100%;
}
.dx-fileuploader-input-wrapper {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
.dx-fileuploader-input-container {
text-align: center;
}
#file-uploader .dx-fileuploader-wrapper {
overflow-y: auto;
}For more information about customizing DevExtreme FileUploader, refer to the following topic: Customize FileUploader