-
AI-powered Extensions
-
Data Grid
-
Tree List
-
Chat
-
HTML Editor
-
Form
-
Reporting
-
-
Data Grids / Data Management
-
Data Grid
- Overview
-
Data Binding
-
Filtering
- Sorting
-
Editing
-
Grouping
-
Selection
- Focused Row
- Paging
-
Scrolling
-
Columns
- AI Assistant
-
Master-Detail
-
Data Summaries
-
Drag & Drop
-
Export to PDF
-
Export to Excel
- Appearance
-
Customization
- State Persistence
-
Adaptability
-
Keyboard Navigation
- Right-To-Left Support
-
Tree List
- Overview
-
Data Binding
-
Filtering
- Sorting
-
Editing
-
Selection
- Focused Row
- Paging
-
Columns
- Drag & Drop
- State Persistence
- Adaptability
-
Keyboard Navigation
-
Card View
-
Pivot Grid
- Overview
-
Data Binding
-
Field Management
-
Data Summaries
- Drill Down
- Filtering
-
Scrolling
-
Export to Excel
- Chart Integration
- Customization
- State Persistence
-
Filter Builder
-
-
Data Visualization
-
Charts
- Overview
-
Data Binding
-
Common Concepts
-
Axis
-
Aggregation
-
Tooltips
-
Selection
-
Customization
-
Zooming
-
Export
-
-
Area Charts
-
Bar Charts
- Bullet Charts
-
Doughnut Charts
-
Financial Charts
-
Funnel and Pyramid Charts
-
Line Charts
- Pareto Chart
-
Pie Charts
-
Point Charts
-
Polar and Radar Charts
-
Range Charts
- Sankey Chart
-
Sparkline Charts
-
Tree Map
-
Gauges
- Overview
-
Runtime update
-
Bar Gauge
-
Circular Gauge
-
Linear Gauge
-
Diagram
- Overview
-
Data Binding
-
Featured Shapes
-
Custom Shapes
-
Document Capabilities
-
User Interaction
- UI Customization
- Adaptability
-
-
Scheduling / Planning
-
Scheduler
- Overview
-
Data Binding
-
Views
-
Appointments
-
Timetable
- Editing
-
Grouping
- Virtual Scrolling
- Drag & Drop
-
Customization
- Adaptability
-
Gantt
- Overview
- Data Binding
-
Filtering
- Sorting
- Strip Lines
- Export to PDF
- Validation
-
Customization
-
-
Reporting
-
AI-powered Extensions
-
Interaction
-
Report Types
-
Data binding
-
Real-life Reports
-
Layout Features
-
Report Controls
-
Web-specific Features
-
-
Rich Text Editor
- Overview
- Load/Save
- Document Protection
-
Templates
- Autocorrect
-
Customization
- Simple View
-
Spreadsheet
- Overview
-
Open a Document
- Export And Printing
-
Features
-
UI Customization
-
Messaging
-
WYSIWYG Editor
-
Forms
-
Data Editors
- Overview
-
Common Concepts
-
Calendar
- Check Box
- Color Box
-
Date Box
-
Date Range Box
-
Number Box
- Radio Group
-
Range Selector
- Range Slider
- Slider
- Switch
- Text Area
- Text Box
-
Drop-Downs
- Autocomplete
-
Drop Down Box
-
Select Box
-
Tag Box
-
Lookup
-
Buttons
-
File Upload / File Management
-
File Manager
- Overview
-
File System Types
-
Customization
-
File Uploader
-
-
Popup and Notifications
-
Navigation
- Overview
- Accordion
-
Context Menu
-
Menu
- Multi View
-
Drawer
-
Tab Panel
-
Tabs
-
Toolbar
-
Stepper
- Pagination
-
List
-
Tree View
- Right-to-Left Support
-
Layout
-
Tile View
- Splitter
-
Gallery
- Scroll View
-
-
Interactive Wrappers
-
Sortable
- Resizable
-
-
Progress Indicators
-
Maps
- Overview
-
Map
-
Vector Map
-
Data Binding
- Multiple Layers
-
Markers
- Legend
-
Zooming and Panning
-
Customization
-
-
Localization
Related Demos:
Your search did not match any results.
File Uploader - Form Upload
The JavaScript FileUploader component allows an end user to upload files to the server. This demo illustrates the use of the JavaScript FileUploader within a web page. To select a file using the Open file dialog, click the Select photo button. Note that the Open file dialog only accepts image file types as the accept configuration property of the JavaScript FileUploader is set to «image/*».
The source code for the NetCore version of this demo will be available soon.
$(() => {
$('#first-name').dxTextBox({
value: 'John',
name: 'FirstName',
inputAttr: { 'aria-label': 'First Name' },
});
$('#last-name').dxTextBox({
value: 'Smith',
name: 'LastName',
inputAttr: { 'aria-label': 'Last Name' },
});
$('#file-uploader').dxFileUploader({
selectButtonText: 'Select photo',
labelText: '',
accept: 'image/*',
uploadMode: 'useForm',
inputAttr: { 'aria-label': 'Select Photo' },
});
$('#button').dxButton({
text: 'Update profile',
type: 'success',
onClick() {
DevExpress.ui.dialog.alert('This demo only illustrates the form upload interface. Uploading to a server is not available.', 'Click Handler');
// $("#form").submit();
},
});
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.4/css/dx.light.css" />
<script src="js/dx.all.js?v=26.1.4"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="index.js"></script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="container">
<form id="form" method="post" action="" enctype="multipart/form-data">
<h3>Profile Settings</h3>
<div class="dx-fieldset">
<div class="dx-field">
<div class="dx-field-label">First Name:</div>
<div class="dx-field-value" id="first-name"></div>
</div>
<div class="dx-field">
<div class="dx-field-label">Last Name:</div>
<div class="dx-field-value" id="last-name"></div>
</div>
</div>
<div id="fileuploader-container">
<div id="file-uploader"></div>
</div>
<div id="button"></div>
</form>
</div>
</div>
</body>
</html>
#form {
max-width: 600px;
margin: auto;
}
#button {
margin-top: 50px;
margin-right: 20px;
float: right;
}
#fileuploader-container {
border: 1px solid #d3d3d3;
margin: 20px 20px 0;
}
#form h3 {
margin-left: 20px;
font-weight: normal;
font-size: 22px;
}
To see an example of server-side implementation, refer to the HTML Form Upload article for ASP.NET or PHP.
This demo does not actually upload the selected file. To upload a file, submit the form. The form element should contain the action attribute, which holds the URL of the page providing server scenarios for saving uploaded files.