DevExtreme v23.2 is now available.

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

Your search did not match any results.

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

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.

Backend API
import React, { useCallback, useRef } from 'react'; import FileUploader from 'devextreme-react/file-uploader'; import Button from 'devextreme-react/button'; import TextBox from 'devextreme-react/text-box'; import notify from 'devextreme/ui/notify'; const firstNameLabel = { 'aria-label': 'First Name' }; const lastNameLabel = { 'aria-label': 'Last Name' }; export default function App() { const formElement = useRef(null); const onClick = useCallback(() => { notify('Uncomment the line to enable sending a form to the server.'); // formElement.current.submit(); }, []); return ( <form id="form" ref={formElement} method="post" action="" encType="multipart/form-data"> <h3>Profile Settings</h3> <div className="dx-fieldset"> <div className="dx-field"> <div className="dx-field-label">First Name:</div> <TextBox inputAttr={firstNameLabel} name="FirstName" value="John" className="dx-field-value" /> </div> <div className="dx-field"> <div className="dx-field-label">Last Name:</div> <TextBox inputAttr={lastNameLabel} name="LastName" value="Smith" className="dx-field-value" /> </div> </div> <div className="fileuploader-container"> <FileUploader selectButtonText="Select photo" labelText="" accept="image/*" uploadMode="useForm" /> </div> <Button className="button" text="Update profile" type="success" onClick={onClick} /> </form> ); }
import React, { useCallback, useRef } from 'react'; import FileUploader from 'devextreme-react/file-uploader'; import Button from 'devextreme-react/button'; import TextBox from 'devextreme-react/text-box'; import notify from 'devextreme/ui/notify'; const firstNameLabel = { 'aria-label': 'First Name' }; const lastNameLabel = { 'aria-label': 'Last Name' }; export default function App() { const formElement = useRef(null); const onClick = useCallback(() => { notify('Uncomment the line to enable sending a form to the server.'); // formElement.current.submit(); }, []); return ( <form id="form" ref={formElement} method="post" action="" encType="multipart/form-data" > <h3>Profile Settings</h3> <div className="dx-fieldset"> <div className="dx-field"> <div className="dx-field-label">First Name:</div> <TextBox inputAttr={firstNameLabel} name="FirstName" value="John" className="dx-field-value" /> </div> <div className="dx-field"> <div className="dx-field-label">Last Name:</div> <TextBox inputAttr={lastNameLabel} name="LastName" value="Smith" className="dx-field-value" /> </div> </div> <div className="fileuploader-container"> <FileUploader selectButtonText="Select photo" labelText="" accept="image/*" uploadMode="useForm" /> </div> <Button className="button" text="Update profile" type="success" onClick={onClick} /> </form> ); }
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.tsx'; ReactDOM.render( <App />, document.getElementById('app'), );
window.exports = window.exports || {}; window.config = { transpiler: 'ts', typescriptOptions: { module: 'system', emitDecoratorMetadata: true, experimentalDecorators: true, jsx: 'react', }, meta: { 'react': { 'esModule': true, }, 'typescript': { 'exports': 'ts', }, 'devextreme/time_zone_utils.js': { 'esModule': true, }, 'devextreme/localization.js': { 'esModule': true, }, 'devextreme/viz/palette.js': { 'esModule': true, }, }, paths: { 'npm:': 'https://unpkg.com/', }, defaultExtension: 'js', map: { 'ts': 'npm:plugin-typescript@4.2.4/lib/plugin.js', 'typescript': 'npm:typescript@4.2.4/lib/typescript.js', 'react': 'npm:react@17.0.2/umd/react.development.js', 'react-dom': 'npm:react-dom@17.0.2/umd/react-dom.development.js', 'prop-types': 'npm:prop-types@15.8.1/prop-types.js', 'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.28.1/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@23.2.5/cjs', 'devextreme-react': 'npm:devextreme-react@23.2.5/cjs', 'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@1.6.4/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.2.5/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@4.1.51/dist/dx-gantt.js', '@devextreme/runtime': 'npm:@devextreme/runtime@3.0.12', 'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js', 'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js', 'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js', 'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js', 'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/dist/inferno-hydrate.min.js', 'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js', 'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js', 'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js', 'devextreme-cldr-data': 'npm:devextreme-cldr-data@1.0.3', // SystemJS plugins 'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js', // Prettier 'prettier/standalone': 'npm:prettier@2.8.4/standalone.js', 'prettier/parser-html': 'npm:prettier@2.8.4/parser-html.js', }, packages: { 'devextreme': { defaultExtension: 'js', }, 'devextreme-react': { main: 'index.js', }, 'devextreme/events/utils': { main: 'index', }, 'devextreme/localization/messages': { format: 'json', defaultExtension: '', }, 'devextreme/events': { main: 'index', }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js', }, }, packageConfigPaths: [ 'npm:@devextreme/*/package.json', 'npm:@devextreme/runtime@3.0.12/inferno/package.json', ], babelOptions: { sourceMaps: false, stage0: true, react: true, }, }; System.config(window.config);
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render(<App />, document.getElementById('app'));
<!DOCTYPE html> <html> <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=1.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/23.2.5/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.tsx"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></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; }