JavaScript/jQuery 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/*».

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.

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

Backend API

$(() => { $('#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/25.1.3/css/dx.light.css" /> <script src="js/dx.all.js"></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 20px; } #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.

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.