Fires when a file is selected.

The cancelling of the select event prevents the selection from occurring.

Example - wiring up an event handler that triggers when a user selects a file

<input type="file" name="files" id="photos" />
        async: {
            saveUrl: "http://my-app.localhost/save",
            removeUrl: "http://my-app.localhost/remove"
        select: onSelect

    function onSelect(e) {
        $.each(e.files, function (index, value) {
            console.log("Name: " +;
            console.log("Size: " + value.size + " bytes");
            console.log("Extension: " + value.extension);

Event Data

e Object

A custom event object. The event can be canceled similar to a standard jQuery event object by using e.preventDefault();.

e.files Array

An array of the selected files.

Each item of the array is an object with the following properties:

  • name - The name of a selected file, including its extension.
  • extension - The file extension of a selected file, including the leading dot. For example, .jpg, .png, and so on.
  • size - The size of a selected file in bytes. If not available, the value is null.
  • rawFile - An in-memory representation of a selected file.
  • uid - The unique identifier of the file or batch of files.
In this article
Not finding the help you need? Improve this article