DevExtreme v24.2 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

React File Uploader - Form Upload

The FileUploader component allows an end user to upload files to the server. This demo illustrates the use of the 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 FileUploader is set to «image/*».

DevExtreme Accessibility Compliance
DevExtreme component libraries meet a variety of WCAG and Section 508 compliance standards. To assess this demo’s accessibility level, click the Run AXE® Validation button to launch the AXE® web accessibility evaluation tool.
All trademarks or registered trademarks are property of their respective owners. AXE® Terms of Use
The overall accessibility level of your application depends on the FileUploader features used.
To give you the ability to edit code on the fly, the demo uses SystemJS. For this reason, launching the demo takes some time. We strongly recommend that you do not use this approach in real projects.
Backend API

To see an example of server-side implementation, refer to the HTML Form Upload article for ASP.NET or PHP.

NOTE

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.