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
    <div id="fileUploaderContainer"></div>
    JavaScript
    $(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
    <form action="/upload.php" method="post" enctype="multipart/form-data">
        <div id="fileUploaderContainer"></div>
        <input type="submit">
    </form>
    JavaScript
    $(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