Skip to content

Required Features

Jump to bottom Edit New page
Davit Barbakadze edited this page Jul 26, 2014 · 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 can't even 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 similar, you will need a way to tell 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, they do not affect decision-making process, by default (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 be ignored. This is done to achieve the ultimate purpose - 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>Capability</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> <br />
    <em>
    provide access to raw binary data of the file </em>
  </td>
  <td width="40"><span style="color: #006600;">✔</span></td>
  <td width="40"><span style="color: #006600;">✔</span> <sup><a href="#wiki-fn_1">[1]</a></sup></td>
  <td width="40"><span style="color: red;">✘</span></td>
  <td width="40"><span style="color: #006600;">✔</span></td>
  <td width="40"><span style="color: #006600;">✔</span></td>
  <td width="40"><span style="color: #cc0000;">✘</span> <sup><a href="#wiki-fn_8">[8]</a></sup></td>
</tr>
<tr>
  <td>
    <strong>
      access_image_binary
    </strong><br />
    <em style="font-size: 0.7em;">
      provide access to raw binary data of the image
    </em>
  </td>
  <td width="40"><span style="color: #006600;">✔</span></td>
  <td width="40"><span style="color: #006600;">✔</span> <sup><a href="#wiki-fn_1">[1]</a></sup></td>
  <td width="40"><span style="color: #cc0000;">✘</span></td>
  <td width="40"><span style="color: #006600;">✔</span></td>
  <td width="40"><span style="color: #006600;">✔</span></td>
  <td width="40"><span style="color: #cc0000;">✘</span> <sup><a href="#wiki-fn_8">[8]</a></sup></td>
</tr>
<tr>
  <td>
    <strong>
      display_media
    </strong><br />
    <em style="font-size: 0.7em;">
    display binary data as thumbs for example </em>
  </td>
  <td width="40"><span style="color: #006600;">✔</span></td>
  <td width="40"><span style="color: #006600;">✔</span></td>
  <td width="40"><span style="color: #006600;">✔</span></td>
  <td width="40"><span style="color: #006600;">✔</span></td>
  <td width="40"><span style="color: #006600;">✔</span></td>
  <td width="40"><span style="color: #cc0000;">✘</span> <sup><a href="#wiki-fn_8">[8]</a></sup></td>
</tr>
<tr>
  <td>
    <strong>
      do_cors
    </strong><br />
    <em style="font-size: 0.7em;">
      make cross-domain requests
    </em>
  </td>
  <td width="40"><span style="color: #006600;">✔</span></td>
  <td width="40"><span style="color: #006600;">✔</span></td>
  <td width="40"><span style="color: #006600;">✔</span></td>
  <td width="40"><span style="color: #006600;">✔</span></td>
  <td width="40"><span style="color: #006600;">✔</span></td>
  <td width="40"><span style="color: #cc0000;">✘</span></td>
</tr>
<tr>
  <td>
    <strong>
      drag_and_drop
    </strong><br />
    <em style="font-size: 0.7em;">
      accept files dragged and dropped from the desktop
    </em>
  </td>
  <td width="40"><span style="color: #006600;">✔</span></td>
  <td width="40"><span style="color: #cc0000;">✘</span></td>
  <td width="40"><span style="color: #cc0000;">✘</span></td>
  <td width="40"><span style="color: #cc0000;">✘</span></td>
  <td width="40"><span style="color: #cc0000;">✘</span></td>
  <td width="40"><span style="color: #cc0000;">✘</span></td>
</tr>
<tr>
  <td>
    <strong>
      filter_by_extension
    </strong><br />
    <em style="font-size: 0.7em;">
      filter files in selection dialog by their extensions
    </em>
  </td>
  <td width="40"><span style="color: #006600;">✔</span> <sup><a href="#wiki-fn_7">[7]</a></sup></td>
  <td width="40"><span style="color: #006600;">✔</span></td>
  <td width="40"><span style="color: #006600;">✔</span></td>
  <td width="40"><span style="color: #006600;">✔</span></td>
  <td width="40"><span style="color: #006600;">✔</span></td>
  <td width="40"><span style="color: #006600;">✔</span> <sup><a href="#wiki-fn_7">[7]</a></sup></td>
</tr>
<tr>
  <td>
    <strong>
      resize_image
    </strong><br />
    <em style="font-size: 0.7em;">
      resize image
    </em>
  </td>
  <td width="40"><span style="color: #006600;">✔</span></td>
  <td width="40"><span style="color: #006600;">✔</span> <sup><a href="#wiki-fn_1">[1]</a></sup></td>
  <td width="40"><span style="color: #cc0000;">✘</span></td>
  <td width="40"><span style="color: #006600;">✔</span></td>
  <td width="40"><span style="color: #006600;">✔</span></td>
  <td width="40"><span style="color: #cc0000;">✘</span></td>
</tr>
<tr>
  <td>
    <strong>
      report_upload_progress
    </strong><br />
    <em style="font-size: 0.7em;">
      periodically report how many bytes were uploaded
    </em>
  </td>
  <td width="40"><span style="color: #006600;">✔</span></td>
  <td width="40"><span style="color: #006600;">✔</span> <sup><a href="#wiki-fn_2">[2]</a></sup></td>
  <td width="40"><span style="color: #006600;">✔</span></td>
  <td width="40"><span style="color: #006600;">✔</span></td>
  <td width="40"><span style="color: #006600;">✔</span></td>
  <td width="40"><span style="color: #cc0000;">✘</span></td>
</tr>
<tr>
  <td>
    <strong>
      return_response_headers
    </strong><br />
    <em style="font-size: 0.7em;">
      provide access to the headers of http response
    </em>
  </td>
  <td width="40"><span style="color: #006600;">✔</span></td>
  <td width="40"><span style="color: #cc0000;">✘</span></td>
  <td width="40"><span style="color: #cc0000;">✘</span></td>
  <td width="40"><span style="color: #cc0000;">✘</span></td>
  <td width="40"><span style="color: #006600;">✔</span></td>
  <td width="40"><span style="color: #cc0000;">✘</span></td>
</tr>
<tr>
  <td>
    <strong>
      return_response_type
    </strong><br />
    <em style="font-size: 0.7em;">
    support http response of specific type </em>
  </td>
  <td width="40"><span style="color: #006600;">✔</span></td>
  <td width="40"><span style="color: #006600;">✔</span></td>
  <td width="40"><span style="color: #006600;">✔</span> <sup><a href="#wiki-fn_9">[9]</a></sup></td>
  <td width="40"><span style="color: #006600;">✔</span></td>
  <td width="40"><span style="color: #006600;">✔</span></td>
  <td width="40"><span style="color: #006600;">✔</span> <sup><a href="#wiki-fn_9">[9]</a></sup></td>
</tr>
<tr>
  <td>
    <strong>
      return_status_code
    </strong><br />
    <em style="font-size: 0.7em;">
    return http status code of the response </em>
  </td>
  <td width="40"><span style="color: #006600;">✔</span></td>
  <td width="40"><span style="color: #006600;">✔</span></td>
  <td width="40"><span style="color: #006600;">✔</span> <sup><a href="#wiki-fn_10">[10]</a></sup></td>
  <td width="40"><span style="color: #006600;">✔</span> <sup><a href="#wiki-fn_10">[10]</a></sup></td>
  <td width="40"><span style="color: #006600;">✔</span></td>
  <td width="40"><span style="color: #006600;">✔</span> <sup><a href="#wiki-fn_10">[10]</a></sup></td>
</tr>
<tr>
  <td>
    <strong>
      send_custom_headers
    </strong> <br />
    <em style="font-size: 0.7em;">
      send custom http header with the request
    </em>
  </td>
  <td width="40"><span style="color: #006600;">✔</span></td>
  <td width="40"><span style="color: #006600;">✔</span></td>
  <td width="40"><span style="color: #cc0000;">✘</span></td>
  <td width="40"><span style="color: #cc0000;">✘</span></td>
  <td width="40"><span style="color: #006600;">✔</span></td>
  <td width="40"><span style="color: #006600;">✔</span></td>
</tr>
<tr>
  <td>
    <strong>
      select_file
    </strong><br />
    <em style="font-size: 0.7em;">
      pick up a files from a dialog
    </em>
  </td>
  <td width="40"><span style="color: #006600;">✔</span> <sup><a href="#wiki-fn_3">[3]</a></sup></td>
  <td width="40"><span style="color: #006600;">✔</span></td>
  <td width="40"><span style="color: #006600;">✔</span></td>
  <td width="40"><span style="color: #006600;">✔</span></td>
  <td width="40"><span style="color: #006600;">✔</span></td>
  <td width="40"><span style="color: #006600;">✔</span></td>
</tr>
<tr>
  <td>
    <strong>
      select_folder
    </strong><br />
    <em style="font-size: 0.7em;">
      select a folder from a dialog
    </em>
  </td>
  <td width="40"><span style="color: #006600;">✔</span> <sup><a href="#wiki-fn_3">[4]</a></sup></td>
  <td width="40"><span style="color: #cc0000;">✘</span></td>
  <td width="40"><span style="color: #cc0000;">✘</span></td>
  <td width="40"><span style="color: #cc0000;">✘</span></td>
  <td width="40"><span style="color: #cc0000;">✘</span></td>
  <td width="40"><span style="color: #cc0000;">✘</span></td>
</tr>
<tr>
  <td>
    <strong>
      select_multiple
    </strong><br />
    <em style="font-size: 0.7em;">
    select multiple files at once from a file dialog </em>
  </td>
  <td width="40"><span style="color: #006600;">✔</span> <sup><a href="#wiki-fn_4">[5]</a></sup></td>
  <td width="40"><span style="color: #006600;">✔</span></td>
  <td width="40"><span style="color: #006600;">✔</span></td>
  <td width="40"><span style="color: #006600;">✔</span></td>
  <td width="40"><span style="color: #006600;">✔</span></td>
  <td width="40"><span style="color: #cc0000;">✘</span></td>
</tr>
<tr>
  <td>
    <strong>
      send_binary_string
    </strong><br />
    <em style="font-size: 0.7em;">
      send raw binary data (typically a binary string)
    </em>
  </td>
  <td width="40"><span style="color: #006600;">✔</span></td>
  <td width="40"><span style="color: #006600;">✔</span> <sup><a href="#wiki-fn_1">[1]</a></sup></td>
  <td width="40"><span style="color: #cc0000;">✘</span></td>
  <td width="40"><span style="color: #006600;">✔</span></td>
  <td width="40"><span style="color: #006600;">✔</span></td>
  <td width="40"><span style="color: #cc0000;">✘</span></td>
</tr>
<tr>
  <td>
    <strong>
      send_browser_cookies
    </strong><br />
    <em style="font-size: 0.7em;">
    send browser cookies with http request </em>
  </td>
  <td width="40"><span style="color: #006600;">✔</span></td>
  <td width="40"><span style="color: #006600;">✔</span></td>
  <td width="40"><span style="color: #cc0000;">✘</span></td>
  <td width="40"><span style="color: #006600;">✔</span></td>
  <td width="40"><span style="color: #cc0000;">✘</span></td>
  <td width="40"><span style="color: #006600;">✔</span></td>
</tr>
<tr>
  <td>
    <strong>
      send_multipart
    </strong> <br />
    <em style="font-size: 0.7em;">
      send multipart/form-data
    </em>
  </td>
  <td width="40"><span style="color: #006600;">✔</span></td>
  <td width="40"><span style="color: #006600;">✔</span></td>
  <td width="40"><span style="color: #006600;">✔</span></td>
  <td width="40"><span style="color: #006600;">✔</span></td>
  <td width="40"><span style="color: #006600;">✔</span></td>
  <td width="40"><span style="color: #006600;">✔</span></td>
</tr>
<tr>
  <td>
    <strong>
      slice_blob
    </strong><br />
    <em style="font-size: 0.7em;">
    slice the file or blob </em>
  </td>
  <td width="40"><span style="color: #006600;">✔</span></td>
  <td width="40"><span style="color: #006600;">✔</span> <sup><a href="#wiki-fn_1">[1]</a></sup></td>
  <td width="40"><span style="color: #cc0000;">✘</span></td>
  <td width="40"><span style="color: #006600;">✔</span></td>
  <td width="40"><span style="color: #006600;">✔</span></td>
  <td width="40"><span style="color: #cc0000;">✘</span></td>
</tr>
<tr>
  <td>
    <strong>
      stream_upload
    </strong><br />
    <em style="font-size: 0.7em;">
    upload file without preloading it to memory </em>
  </td>
  <td width="40"><span style="color: #006600;">✔</span></td>
  <td width="40"><span style="color: #cc0000;">✘</span></td>
  <td width="40"><span style="color: #006600;">✔</span></td>
  <td width="40"><span style="color: #006600;">✔</span></td>
  <td width="40"><span style="color: #006600;">✔</span></td>
  <td width="40"><span style="color: #006600;">✔</span></td>
</tr>
<tr>
  <td>
    <strong>
      summon_file_dialog
    </strong> <br />
    <em style="font-size: 0.7em;">
    programmatically trigger file dialog </em>
  </td>
  <td width="40"><span style="color: #006600;">✔</span></td>
  <td width="40"><span style="color: #cc0000;">✘</span></td>
  <td width="40"><span style="color: #cc0000;">✘</span></td>
  <td width="40"><span style="color: #cc0000;">✘</span></td>
  <td width="40"><span style="color: #cc0000;">✘</span></td>
  <td width="40"><span style="color: #006600;">✔</span> <sup><a href="#wiki-fn_6">[6]</a></sup></td>
</tr>
<tr>
  <td>
    <strong>
      upload_filesize
    </strong><br />
    <em style="font-size: 0.7em;">upload file of specific size </em>
  </td>
  <td width="40"><span style="color: #006600;">✔</span></td>
  <td width="40"><span style="color: #006600;">✔</span> <sup><a href="#wiki-fn_1">[1]</a></sup></td>
  <td width="40"><span style="color: #006600;">✔</span></td>
  <td width="40"><span style="color: #006600;">✔</span></td>
  <td width="40"><span style="color: #006600;">✔</span></td>
  <td width="40"><span style="color: #006600;">✔</span></td>
</tr>
  <tr>
  <td>
    <strong>use_http_method
    </strong><br />
    <em style="font-size: 0.7em;">use specific http method</em></td>
  <td width="40"><span style="color: #006600;">✔</span></td>
  <td width="40"><span style="color: #006600;">✔</span> <sup><a href="#wiki-fn_11">[11]</a></sup></td>
  <td width="40"><span style="color: #006600;">✔</span> <sup><a href="#wiki-fn_11">[11]</a></sup></td>
  <td width="40"><span style="color: #006600;">✔</span> <sup><a href="#wiki-fn_11">[11]</a></sup></td>
  <td width="40"><span style="color: #006600;">✔</span></td>
  <td width="40"><span style="color: #006600;">✔</span> <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