Skip to content

Required Features

Jump to bottom Edit New page
Davit Barbakadze edited this page Nov 24, 2013 · 23 revisions

Plupload is multi-runtime file uploader. Keyword here is - multi-runtime. Which means that if one runtime fails to initialize, it will try another. The problem is that runtimes are not equally backed up with the same features. Flash for example has severe problems with chunking and accessing raw file data in general. Also it cannot trigger file dialog programmatically (just like Silverlight). Additionally, Flash and Silverlight have to operate in two modes and the actual set of capabilities depends on the mode that they've been initialized into. HTML4 is the most crippled of all - it can't chunk, it can't resize the images, it can't upload binary streams, it even can't report a progress.

In most cases you do not even need to know about those complexities, but if you are planning something fancy, like extracting ID3v2 tags from MP3 files on client-side or such, you will need a way to tell the Plupload about those capabilities that you'll require, otherwise it might choose a wrong runtime.

Plupload has a number of options that are supported in one runtime, but aren't - in another (see the feature table below). But when you request them in the config, by default, they do not affect the decision-making process in any way (there are exclusions to the rule however). Instead they are considered as recommendations, so that if a runtime that is selected in the end can fulfill them, it will fulfill them. Otherwise they will simply be ignored. This is done to achieve the ultimate purpose - to upload the file, whatever it takes.

Operational Modes

Currently there are two operational modes: browser and client. HTML runtimes (HTML5 and HTML4) operate in browser mode only, so additional mode is only for third party shims - Flash and Silverlight.

The whole necessity of introducing additional operational mode arose from the fact that features may be or may not be supported, depending on the way you initialize the runtime. In the table

<tr>
  <th width="174">Capability</th>
  <th width="331">Description</th>
  <td width="40"><sup>browser</sup></td>
  <td width="40"><sup>browser</sup></td>
  <td width="40"><sup>client</sup></td>
  <td width="40"><sup>browser</sup></td>
  <td width="40"><sup>client</sup></td>
  <td width="40"><sup>browser</sup></td>
</tr>
<tr>
  <td>
    <strong>
      access_binary
    </strong>
  </td>
  <td>
    <em>
      provide access to raw binary data of the file
    </em>
  </td>
  <td width="40"><font color="#006600">✔</font></td>
  <td width="40"><font color="#006600">✔</font> <sup><a href="#wiki-fn_1">[1]</a></sup></td>
  <td width="40"><font color="#cc0000">✘</font></td>
  <td width="40"><font color="#006600">✔</font></td>
  <td width="40"><font color="#006600">✔</font></td>
  <td width="40"><font color="#cc0000">✘</font> <sup><a href="#wiki-fn_8">[8]</a></sup></td>
</tr>
<tr>
  <td>
    <strong>
      access_image_binary
    </strong>
  </td>
  <td>
    <em>
      provide access to raw binary data of the image
    </em>
  </td>
  <td width="40"><font color="#006600">✔</font></td>
  <td width="40"><font color="#006600">✔</font> <sup><a href="#wiki-fn_1">[1]</a></sup></td>
  <td width="40"><font color="#cc0000">✘</font></td>
  <td width="40"><font color="#006600">✔</font></td>
  <td width="40"><font color="#006600">✔</font></td>
  <td width="40"><font color="#cc0000">✘</font> <sup><a href="#wiki-fn_8">[8]</a></sup></td>
</tr>
<tr>
  <td>
    <strong>
      display_media
    </strong>
  </td>
  <td>
    <em>
      display binary data as thumbs for example
    </em>
  </td>
  <td width="40"><font color="#006600">✔</font></td>
  <td width="40"><font color="#006600">✔</font></td>
  <td width="40"><font color="#006600">✔</font></td>
  <td width="40"><font color="#006600">✔</font></td>
  <td width="40"><font color="#006600">✔</font></td>
  <td width="40"><font color="#cc0000">✘</font> <sup><a href="#wiki-fn_8">[8]</a></sup></td>
</tr>
<tr>
  <td>
    <strong>
      do_cors
    </strong>
  </td>
  <td>
    <em>
      make cross-domain requests
    </em>
  </td>
  <td width="40"><font color="#006600">✔</font></td>
  <td width="40"><font color="#006600">✔</font></td>
  <td width="40"><font color="#006600">✔</font></td>
  <td width="40"><font color="#006600">✔</font></td>
  <td width="40"><font color="#006600">✔</font></td>
  <td width="40"><font color="#cc0000">✘</font></td>
</tr>
<tr>
  <td>
    <strong>
      drag_and_drop
    </strong>
  </td>
  <td>
    <em>
      accept files dragged and dropped from the desktop
    </em>
  </td>
  <td width="40"><font color="#006600">✔</font></td>
  <td width="40"><font color="#cc0000">✘</font></td>
  <td width="40"><font color="#cc0000">✘</font></td>
  <td width="40"><font color="#cc0000">✘</font></td>
  <td width="40"><font color="#cc0000">✘</font></td>
  <td width="40"><font color="#cc0000">✘</font></td>
</tr>
<tr>
  <td>
    <strong>
      filter_by_extension
    </strong>
  </td>
  <td>
    <em>
      filter files in selection dialog by their extensions
    </em>
  </td>
  <td width="40"><font color="#006600">✔</font> <sup><a href="#wiki-fn_7">[7]</a></sup></td>
  <td width="40"><font color="#006600">✔</font></td>
  <td width="40"><font color="#006600">✔</font></td>
  <td width="40"><font color="#006600">✔</font></td>
  <td width="40"><font color="#006600">✔</font></td>
  <td width="40"><font color="#006600">✔</font> <sup><a href="#wiki-fn_7">[7]</a></sup></td>
</tr>
<tr>
  <td>
    <strong>
      resize_image
    </strong>
  </td>
  <td>
    <em>
      resize image
    </em>
  </td>
  <td width="40"><font color="#006600">✔</font></td>
  <td width="40"><font color="#006600">✔</font> <sup><a href="#wiki-fn_1">[1]</a></sup></td>
  <td width="40"><font color="#cc0000">✘</font></td>
  <td width="40"><font color="#006600">✔</font></td>
  <td width="40"><font color="#006600">✔</font></td>
  <td width="40"><font color="#cc0000">✘</font></td>
</tr>
<tr>
  <td>
    <strong>
      report_upload_progress
    </strong>
  </td>
  <td>
    <em>
      periodically report how many bytes were uploaded
    </em>
  </td>
  <td width="40"><font color="#006600">✔</font></td>
  <td width="40"><font color="#006600">✔</font> <sup><a href="#wiki-fn_2">[2]</a></sup></td>
  <td width="40"><font color="#006600">✔</font></td>
  <td width="40"><font color="#006600">✔</font></td>
  <td width="40"><font color="#006600">✔</font></td>
  <td width="40"><font color="#cc0000">✘</font></td>
</tr>
<tr>
  <td>
    <strong>
      return_response_headers
    </strong>
  </td>
  <td>
    <em>
      provide access to the headers of http response
    </em>
  </td>
  <td width="40"><font color="#006600">✔</font></td>
  <td width="40"><font color="#cc0000">✘</font></td>
  <td width="40"><font color="#cc0000">✘</font></td>
  <td width="40"><font color="#cc0000">✘</font></td>
  <td width="40"><font color="#006600">✔</font></td>
  <td width="40"><font color="#cc0000">✘</font></td>
</tr>
<tr>
  <td>
    <strong>
      return_response_type
    </strong>
  </td>
  <td>
    <em>
      support http response of specific type
    </em>
  </td>
  <td width="40"><font color="#006600">✔</font></td>
  <td width="40"><font color="#006600">✔</font></td>
  <td width="40"><font color="#006600">✔</font> <sup><a href="#wiki-fn_9">[9]</a></sup></td>
  <td width="40"><font color="#006600">✔</font></td>
  <td width="40"><font color="#006600">✔</font></td>
  <td width="40"><font color="#006600">✔</font> <sup><a href="#wiki-fn_9">[9]</a></sup></td>
</tr>
<tr>
  <td>
    <strong>
      return_status_code
    </strong>
  </td>
  <td>
    <em>
      return http status code of the response
    </em>
  </td>
  <td width="40"><font color="#006600">✔</font></td>
  <td width="40"><font color="#006600">✔</font></td>
  <td width="40"><font color="#006600">✔</font> <sup><a href="#wiki-fn_10">[10]</a></sup></td>
  <td width="40"><font color="#006600">✔</font> <sup><a href="#wiki-fn_10">[10]</a></sup></td>
  <td width="40"><font color="#006600">✔</font></td>
  <td width="40"><font color="#006600">✔</font> <sup><a href="#wiki-fn_10">[10]</a></sup></td>
</tr>
<tr>
  <td>
    <strong>
      send_custom_headers
    </strong>
  </td>
  <td>
    <em>
      send custom http header with the request
    </em>
  </td>
  <td width="40"><font color="#006600">✔</font></td>
  <td width="40"><font color="#006600">✔</font></td>
  <td width="40"><font color="#cc0000">✘</font></td>
  <td width="40"><font color="#cc0000">✘</font></td>
  <td width="40"><font color="#006600">✔</font></td>
  <td width="40"><font color="#006600">✔</font></td>
</tr>
<tr>
  <td>
    <strong>
      select_file
    </strong>
  </td>
  <td>
    <em>
      pick up a files from a dialog
    </em>
  </td>
  <td width="40"><font color="#006600">✔</font> <sup><a href="#wiki-fn_3">[3]</a></sup></td>
  <td width="40"><font color="#006600">✔</font></td>
  <td width="40"><font color="#006600">✔</font></td>
  <td width="40"><font color="#006600">✔</font></td>
  <td width="40"><font color="#006600">✔</font></td>
  <td width="40"><font color="#006600">✔</font></td>
</tr>
<tr>
  <td>
    <strong>
      select_folder
    </strong>
  </td>
  <td>
    <em>
      select a folder from a dialog
    </em>
  </td>
  <td width="40"><font color="#006600">✔</font> <sup><a href="#wiki-fn_3">[4]</a></sup></td>
  <td width="40"><font color="#cc0000">✘</font></td>
  <td width="40"><font color="#cc0000">✘</font></td>
  <td width="40"><font color="#cc0000">✘</font></td>
  <td width="40"><font color="#cc0000">✘</font></td>
  <td width="40"><font color="#cc0000">✘</font></td>
</tr>
<tr>
  <td>
    <strong>
      select_multiple
    </strong>
  </td>
  <td>
    <em>
      select multiple files at once from a file dialog
    </em>
  </td>
  <td width="40"><font color="#006600">✔</font> <sup><a href="#wiki-fn_4">[5]</a></sup></td>
  <td width="40"><font color="#006600">✔</font></td>
  <td width="40"><font color="#006600">✔</font></td>
  <td width="40"><font color="#006600">✔</font></td>
  <td width="40"><font color="#006600">✔</font></td>
  <td width="40"><font color="#cc0000">✘</font></td>
</tr>
<tr>
  <td>
    <strong>
      send_binary_string
    </strong>
  </td>
  <td>
    <em>
      send raw binary data (typically a binary string)
    </em>
  </td>
  <td width="40"><font color="#006600">✔</font></td>
  <td width="40"><font color="#006600">✔</font> <sup><a href="#wiki-fn_1">[1]</a></sup></td>
  <td width="40"><font color="#cc0000">✘</font></td>
  <td width="40"><font color="#006600">✔</font></td>
  <td width="40"><font color="#006600">✔</font></td>
  <td width="40"><font color="#cc0000">✘</font></td>
</tr>
<tr>
  <td>
    <strong>
      send_browser_cookies
    </strong>
  </td>
  <td>
    <em>
      send browser cookies with http request
    </em>
  </td>
  <td width="40"><font color="#006600">✔</font></td>
  <td width="40"><font color="#006600">✔</font></td>
  <td width="40"><font color="#cc0000">✘</font></td>
  <td width="40"><font color="#006600">✔</font></td>
  <td width="40"><font color="#cc0000">✘</font></td>
  <td width="40"><font color="#006600">✔</font></td>
</tr>
<tr>
  <td>
    <strong>
      send_multipart
    </strong>
  </td>
  <td>
    <em>
      send multipart/form-data
    </em>
  </td>
  <td width="40"><font color="#006600">✔</font></td>
  <td width="40"><font color="#006600">✔</font></td>
  <td width="40"><font color="#006600">✔</font></td>
  <td width="40"><font color="#006600">✔</font></td>
  <td width="40"><font color="#006600">✔</font></td>
  <td width="40"><font color="#006600">✔</font></td>
</tr>
<tr>
  <td>
    <strong>
      slice_blob
    </strong>
  </td>
  <td>
    <em>
      slice the file or blob
    </em>
  </td>
  <td width="40"><font color="#006600">✔</font></td>
  <td width="40"><font color="#006600">✔</font> <sup><a href="#wiki-fn_1">[1]</a></sup></td>
  <td width="40"><font color="#cc0000">✘</font></td>
  <td width="40"><font color="#006600">✔</font></td>
  <td width="40"><font color="#006600">✔</font></td>
  <td width="40"><font color="#cc0000">✘</font></td>
</tr>
<tr>
  <td>
    <strong>
      stream_upload
    </strong>
  </td>
  <td>
    <em>
      upload file without preloading it to memory
    </em>
  </td>
  <td width="40"><font color="#006600">✔</font></td>
  <td width="40"><font color="#cc0000">✘</font></td>
  <td width="40"><font color="#006600">✔</font></td>
  <td width="40"><font color="#006600">✔</font></td>
  <td width="40"><font color="#006600">✔</font></td>
  <td width="40"><font color="#006600">✔</font></td>
</tr>
<tr>
  <td>
    <strong>
      summon_file_dialog
    </strong>
  </td>
  <td>
    <em>
      programmatically trigger file dialog
    </em>
  </td>
  <td width="40"><font color="#006600">✔</font></td>
  <td width="40"><font color="#cc0000">✘</font></td>
  <td width="40"><font color="#cc0000">✘</font></td>
  <td width="40"><font color="#cc0000">✘</font></td>
  <td width="40"><font color="#cc0000">✘</font></td>
  <td width="40"><font color="#006600">✔</font> <sup><a href="#wiki-fn_6">[6]</a></sup></td>
</tr>
<tr>
  <td>
    <strong>
      upload_filesize
    </strong>
  </td>
  <td>
    <em>
      upload file of specific size
    </em>
  </td>
  <td width="40"><font color="#006600">✔</font></td>
  <td width="40"><font color="#006600">✔</font> <sup><a href="#wiki-fn_1">[1]</a></sup></td>
  <td width="40"><font color="#006600">✔</font></td>
  <td width="40"><font color="#006600">✔</font></td>
  <td width="40"><font color="#006600">✔</font></td>
  <td width="40"><font color="#006600">✔</font></td>
</tr>
  <tr>
  <td>
    <strong>use_http_method</strong></td>
  <td><em>use specific http method</em></td>
  <td width="40"><font color="#006600">✔</font></td>
  <td width="40"><font color="#006600">✔</font> <sup><a href="#wiki-fn_11">[11]</a></sup></td>
  <td width="40"><font color="#006600">✔</font> <sup><a href="#wiki-fn_11">[11]</a></sup></td>
  <td width="40"><font color="#006600">✔</font> <sup><a href="#wiki-fn_11">[11]</a></sup></td>
  <td width="40"><font color="#006600">✔</font></td>
  <td width="40"><font color="#006600">✔</font> <sup><a href="#wiki-fn_11">[11]</a></sup></td>
</tr>

Supported Features

1. Not effective on files over 200mb (the whole file should be preloaded in memory first).
2. Progress is estimated - browser mode in Flash has multiple benefits, and only two real drawbacks, although quite huge ones. The first one is [1] and second is inability to report upload progress. So we approximate it.
3. Seems essential, but not supported in iOS5 or less (upload is simply not possible there).
4. Only in Chrome 11+. It should be mentioned though that this feature requires separate file picker, since the same control cannot pick up files and folders simultaneously. It has to be one or the other.
5. In general this feature is available in every modern environment, but sometimes, usually due to unexpected bugs, it has to be disabled. Like in iOS and Safari on Windows.
6. IE can trigger file dialog programmatically but fails to upload selected file to an iframe, resulting into an Access Denied error.
7. Reliably files can be filtered only after selection. There are multiple problems with the file dialog.
8. Features are supported or unsupported depending on the environment, but in generally it is usually safer to assume them - unsupported.
9. Only text and document, and additionally - json (if window.JSON is defined).
10. Only 200 and 404.
11. Only GET and POST.

Add a custom footer

Table of Contents

Clone this wiki locally