Extended File Upload Input, Wrapped as a HTML5 Web Component

Yesterday I finished my latest endeavor of the explorations of the amazing world of HTML5 Web Components. I must say that the deeper I get into the topic, the more I understand their importance, and I am pretty sure that very soon (even much sooner that I dared to speculate a couple of months ago) they will become really popular.

The new component is called AcidJs.XUpload, and is an extended input element for uploading files, similar to <input type=”file” />, but with a lot of additional out-of-the-box features such as multiple/directory upload, icon support, editing of the file list, custom events and last but not least – fully skinnable via CSS. Using it is charming, stylish and so HTML5:

[sourcecode language=”html”]
<acidjs-xupload></acidjs-xupload>
<acidjs-xupload width="140" height="44" name="file-02" label="Select files"></acidjs-xupload>
<acidjs-xupload id="file-02" name="file-02" label="Browse for files" multiple></acidjs-xupload>
<acidjs-xupload width="150" height="54" icon="AcidJs.XUpload/icons/icon-01.svg"></acidjs-xupload>
<acidjs-xupload directory label="Select a Folder to Upload"></acidjs-xupload>
<acidjs-xupload multiple accept=".gif" label="Select GIFs"></acidjs-xupload>
<acidjs-xupload multiple accept="image/*" label="Select Images"></acidjs-xupload>
<acidjs-xupload multiple accept="video/*" label="Select Videos"></acidjs-xupload>
[/sourcecode]

HTML Attributes

Any native HTML attribute (id, class, data-*, style, etc.) is supported, plus the component-specific:

• width – Optional width of the component. Default is auto.
• height – Optional height of the component. Default is 2em.
• name – Optional name of the component which will be used as query parameter. No default name.
• label – Optional label of the component. Default is Browse....
• icon – Optional icon of the component. By default no icon is set.
• disabled – If set, the component will be rendered disabled.
• multiple – If set, multiple selection will be enabled, so users will be able to select multiple files via Ctrl/Shift + Click or Ctrl + A.
• accept – Allows the setting of file filters (Check the examples for browser support).
• directory – If set, users will be able to upload a whole directory and sub-directories (Check the examples for browser support).
• nofiles – If set, users will be able to remove items from the drop down, containing the currently selected files.

* Due to security reasons, setters and getters are disabled.

JavaScript Methods

Any native JavaScript method (getElementById, querySelector, etc. plus the component-specific:

• getPostData() – returning the current FileList, which can be used to upload the data to the server (check the information on this page for more info regarding FileList).

* Due to security reasons, setAttribute and removeAttribute will not take effect.

JavaScript Events

• "acidjs-xupload-change" – Similar to the normal change event, but returning the FileList, which can be used to upload the data to the server (check the information on this page for more info regarding FileList):

  [sourcecode language=”javascript”]
  $("#file-02").bind("acidjs-xupload-change", function(e, data) {
      window.console.log(e.type, data);
  });
  [/sourcecode]

Check the demo on this page. You will also find a download link there. If you share the same interest towards HTML5 Web Components as I do these days, make sure you read my relevant blog posts and further endeavors on my HTML5, CSS3 and JavaScript Experiments and Insight website.