Client-Side Settings

Depending on the uploadMode you choose, the FileUploader widget uploads files using an HTML form or using the FormData interface and a series of Ajax requests. The uploadMode option accepts one of the following values.

  • "instantly" (default)
    Ajax upload. Files are uploaded instantly after they are selected.

  • "useButtons"
    Ajax upload. Files are uploaded after a user clicks the Upload button.

  • "useForm"
    HTML form upload. Files are uploaded when the HTML form is submitted.

View Demo

NOTE
Because Internet Explorer 9 does not support the FormData interface, you can only upload files using the HTML form in this browser.

The following examples show how to configure the FileUploader for uploading files using Ajax requests and using an HTML form. Note that in both cases, the name option is specified, so that the uploaded files can be accessed on the server.

  • Ajax upload

    HTML
    JavaScript
    <div id="fileUploaderContainer"></div>
    $(function() {
        $("#fileUploaderContainer").dxFileUploader({
            name: "file",
            // Uncomment the following line to allow a user to upload multiple files
            // multiple: true,
            uploadMode: "useButtons", // or "instantly"
            uploadUrl: "/upload.php"
        });
    });
  • HTML form upload

    HTML
    JavaScript
    <form action="/upload.php" method="post" enctype="multipart/form-data">
        <div id="fileUploaderContainer"></div>
        <input type="submit">
    </form>
    $(function() {
        $("#fileUploaderContainer").dxFileUploader({
            name: "file",
            // Uncomment the following lines to allow a user to upload multiple files
            // multiple: true,
            // name: "files[]",
            uploadMode: "useForm"
        });
    });
NOTE
If you allow a user to upload multiple files using an HTML form, the value of the name option must end with square brackets as shown in the commented-out code line in the example above.
See Also