Extended File Upload Input, Wrapped as a HTML5 Web Component

HTML5, CSS3 and JavaScript

The Fine Art of Web Development by Martin Ivanov

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 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>

HTML Attributes

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

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

JavaScript Methods

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

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

JavaScript Events

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.

Categories and Tags

© 2006 - 2024 Martin Ivanov