Extended File Upload Input HTML5 Web Component

Extended File Upload Input

AcidJs.XUpload is an extended input element for uploading files, similar to the <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 fun and easy:

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

Demo

Click to select files. Once files are selected, you can click the arrow to remove files.

The FileList interface is readonly, so in order to enable both removing files from the list and uploading the updated list, we create a new list out of the original FileList. The new postData array should be used for uploading files asynchronously. The updated upload data can be retrieved via the getPostData() method of the component (check the API below).

AcidJs.XUpload does not provide the actual server routines for file upload.

Default

Name, Label, Custom Width, Custom Height

Name, Label, Multiple Selection

Name, Label, Multiple, Disabled

Default, Icon

Default, Custom Icon

Icon, Disabled, Custom Width

Default, Icon, Disabled

Default, Label, Icon, Nofiles

Upload Directory ^*

^* 08.2014: Chrome

Accept Files:

By File Type ^*

^* 08.2014: Chrome, IE

By MIME-Type ^*

^* 08.2014: Chrome, Firefox, IE

By MIME-Type ^*

^* 08.2014: Chrome, Firefox, IE

Register Mozilla's X-Tags

You need to do this just once, and add the directive either in the <head /> section or before the closing <body /> tag of the page.

<script src="AcidJs.XUpload/lib/x-tag-components.js"></script>

Register the Component on the Page via HTML5 @import

You need to do this just once, and add the directive either in the <head /> section or before the closing <body /> tag of the page.

<link rel="import" href="AcidJs.XUpload/classes/XUpload.html" />

HTML Attributes

Check the blogpost or the documentation in the distrubution file (the download link is at the top of the page).

JavaScript API: Methods, Getters and Setters

Check the blogpost or the documentation in the distrubution file (the download link is at the top of the page).

Usage and Code Insight

            
<div class="grid">
    <div class="grid-row">
        <div class="grid-cell">
            <h4>Default</h4>
            <acidjs-xupload></acidjs-xupload>
        </div>
        <div class="grid-cell">
            <h4>Name, Label, Custom Width, Custom Height</h4>
            <acidjs-xupload width="140" height="44" name="file-02" label="Select files"></acidjs-xupload>
        </div>
        <div class="grid-cell">
            <h4>Name, Label, Multiple Selection</h4>
            <acidjs-xupload id="file-02" name="file-02" label="Browse for files" multiple></acidjs-xupload>
        </div>
    </div>
    <div class="grid-row">
        <div class="grid-cell">
            <h4>Name, Label, Multiple, Disabled</h4>
            <acidjs-xupload name="file-04" label="Browse for files..." disabled multiple></acidjs-xupload>
        </div>
        <div class="grid-cell">
            <h4>Default, Icon</h4>
            <acidjs-xupload width="150" height="54" icon="pages/x-upload-html5-web-component/example/AcidJs.XUpload/icons/icon-01.svg"></acidjs-xupload>
        </div>
        <div class="grid-cell">
            <h4>Default, Custom Icon</h4>
            <acidjs-xupload icon="pages/x-upload-html5-web-component/example/AcidJs.XUpload/icons/icon-02.svg"></acidjs-xupload>
        </div>
    </div>
    <div class="grid-row">
        <div class="grid-cell">
            <h4>Icon, Disabled, Custom Width</h4>
            <acidjs-xupload icon="pages/x-upload-html5-web-component/example/AcidJs.XUpload/icons/icon-03.svg" width="200" disabled></acidjs-xupload>
        </div>
        <div class="grid-cell">
            <h4>Default, Icon, Disabled</h4>
            <acidjs-xupload icon="pages/x-upload-html5-web-component/example/AcidJs.XUpload/icons/icon-04.svg" disabled></acidjs-xupload>
        </div>
        <div class="grid-cell">
            <h4>Default, Label, Icon, Nofiles</h4>
            <acidjs-xupload label="Choose files from your Computer" icon="pages/x-upload-html5-web-component/example/AcidJs.XUpload/icons/icon-04.svg" nofiles></acidjs-xupload>
        </div>
    </div>
    <div class="grid-row">
        <div class="grid-cell">
            <h4>Upload Directory <sup>*</sup></h4>
            <acidjs-xupload directory label="Select a Folder to Upload"></acidjs-xupload>
            <p><sup>*</sup> 08.2014: Chrome</p>
        </div>
        <div class="grid-cell">
            <h4>Accept Files:</h4>
            <div class="grid">
                <div class="grid-cell">
                    <h5>By File Type <sup>*</sup></h5>
                    <acidjs-xupload multiple accept=".gif" label="Select GIFs"></acidjs-xupload>
                    <p><sup>*</sup> 08.2014: Chrome, IE</p>
                </div>
                <div class="grid-cell">
                    <h5>By MIME-Type <sup>*</sup></h5>
                    <acidjs-xupload multiple accept="image/*" label="Select Images"></acidjs-xupload>
                    <p><sup>*</sup> 08.2014: Chrome, Firefox, IE</p>
                </div>
                <div class="grid-cell">
                    <h5>By MIME-Type <sup>*</sup></h5>
                    <acidjs-xupload multiple accept="video/*" label="Select Videos"></acidjs-xupload>
                    <p><sup>*</sup> 08.2014: Chrome, Firefox, IE</p>
                </div>
            </div>
        </div>
    </div>
</div>

/*
 * X-Upload HTML5 Web Component by Martin Ivanov (@wemakesitesnet)
 * More info regarding this exciting new technology: http://webcomponents.org/, http://www.x-tags.org/, http://www.polymer-project.org/
 * @author Martin Ivanov
 * @url developer website: http://wemakesites.net/
 * @url developer twitter: https://twitter.com/#!/wemakesitesnet
 * @url developer blog http://acidmartin.wordpress.com/
 **/

/*
 * Do you like this solution? Please, donate:
 * https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QFUHPWJB2JDBS
 **/

@-moz-document url-prefix() 
{
    acidjs-xupload img:-moz-loading 
    {
        visibility: hidden;
    }
    
    acidjs-xupload img:-moz-broken 
    {
        -moz-force-broken-image-icon: 0;
    }
}

acidjs-xupload button:-moz-focus-inner
{
    margin: 0;
    border: 0;
    padding: 0;
    outline: none;
}

acidjs-xupload button::-moz-focus-inner
{
    margin: 0;
    border: 0;
    padding: 0;
    outline: none;
}

acidjs-xupload[hidden],
acidjs-xupload [hidden],
acidjs-xupload img[src=""],
acidjs-xupload .acidjs-xupload-filelist-hidden div ,
acidjs-xupload[nofiles] > div > div,
acidjs-xupload[nofiles] label button
{
    display: none;
}

acidjs-xupload img,
acidjs-xupload li span,
acidjs-xupload label span,
acidjs-xupload li::before,
acidjs-xupload li span:first-child::before
{
    vertical-align: middle;
}

acidjs-xupload,
acidjs-xupload *,
acidjs-xupload::before,
acidjs-xupload *::before,
acidjs-xupload::after,
acidjs-xupload *::after
{
    margin: 0;
    padding: 0;
    border: 0;
    outline: none;
    list-style: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

acidjs-xupload,
acidjs-xupload img,
acidjs-xupload label span,
acidjs-xupload li span:first-child::before
{
    display: inline-block;
}

acidjs-xupload label span,
acidjs-xupload li::before,
acidjs-xupload li span:last-child
{
    font-size: .8em; 
}

acidjs-xupload label,
acidjs-xupload button
{
    cursor: pointer;
}

acidjs-xupload label span,
acidjs-xupload label button
{
    color: #fff;
}

acidjs-xupload > div > div,
acidjs-xupload label button
{
    position: absolute;
}

acidjs-xupload[disabled],
acidjs-xupload[nofiles] label button
{
    -webkit-pointer-events: none;
    -moz-pointer-events: none;
    pointer-events: none;
}

acidjs-xupload label,
acidjs-xupload:hover > div > div
{
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}

acidjs-xupload:hover label,
acidjs-xupload > div:not(.acidjs-xupload-filelist-hidden) label
{
    background: #e44d26;
}

acidjs-xupload:hover > div > div,
acidjs-xupload  > div:not(.acidjs-xupload-filelist-hidden) div
{
    border-color: #e44d26;
}

acidjs-xupload li span,
acidjs-xupload li::before
{
    display: table-cell;
}

acidjs-xupload
{
    color: #333;
    visibility: visible;
    cursor: default;
    font-family: Arial, Helvetica, Sans-serif;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

acidjs-xupload .acidjs-xupload-filelist-hidden label button::before
{
    content: "\25bc";
}

acidjs-xupload label button::before
{
    content: "\25b2";
}

acidjs-xupload button
{
    background: none transparent;
    text-align: center;
    font: bold .8em Arial, Helvetica, Sans-serif;
}

acidjs-xupload label button
{
    right: .5em;
    margin: .1em 0 0 .5em;
    line-height: 2.5em;
}

acidjs-xupload li button
{
    color: #e44d26;
    font-size: 1.5em;
}

acidjs-xupload label
{
    display: block;
    padding: 0 .5em;
    line-height: 2em;
    background: #0091c0;
    white-space: nowrap;
}

acidjs-xupload
{
    counter-reset: files;
}

acidjs-xupload > div > div
{
    box-shadow: 0 3px 3px 0 rgba(0, 0, 0, .5);
}

acidjs-xupload label span
{
    padding: 0 1.5em 0 0;
}

acidjs-xupload[disabled]
{
    opacity: .5;
}

acidjs-xupload ul:empty
{
    display: none;
}

acidjs-xupload img
{
    margin: 0 .5em 0 0;
    width: 1em;
    height: 1em;
}

acidjs-xupload ol
{
    display: table;
    width: 100%;
}

acidjs-xupload li
{
    display: table-row;
    font-size: .75em;
}

acidjs-xupload li::before
{
    padding: 0 0 0 .5em;
    width: 5%;
    counter-increment: files;
    content: counter(files, decimal-leading-zero)". ";
}

acidjs-xupload li span
{
    padding: .25em .5em;
}

acidjs-xupload li span:last-child
{
    text-align: right;
    width: 20%;
}

acidjs-xupload li span:first-child
{
    width: 80%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

acidjs-xupload li span:first-child::before
{
    content: "";
    width: 32px;
    height: 32px;
    background: url("images/file.svg") no-repeat center;
    background-size: cover;
    margin: 0 .25em;
}

acidjs-xupload > div
{
    position: relative;
    min-width: 100px;
}

acidjs-xupload > div > div
{
    z-index: 30;
    width: 250%;
    border: solid 2px #0091c0;
    max-height: 7.5em;
    background: #fff;
    overflow: auto;
}

acidjs-xupload li[class$="css"] span:first-child::before,
acidjs-xupload li[class$="scss"] span:first-child::before,
acidjs-xupload li[class$="sass"] span:first-child::before
{
    background-image: url("images/css.svg");
}

acidjs-xupload li[class$="js"] span:first-child::before,
acidjs-xupload li[class$="json"] span:first-child::before
{
    background-image: url("images/js.svg");
}

acidjs-xupload li[class$="asp"] span:first-child::before,
acidjs-xupload li[class$="aspx"] span:first-child::before
{
    background-image: url("images/aspx.svg");
}

acidjs-xupload li[class$="avi"] span:first-child::before
{
    background-image: url("images/avi.svg");
}

acidjs-xupload li[class$="bmp"] span:first-child::before
{
    background-image: url("images/bmp.svg");
}

acidjs-xupload li[class$="doc"] span:first-child::before,
acidjs-xupload li[class$="docx"] span:first-child::before
{
    background-image: url("images/doc.svg");
}

acidjs-xupload li[class$="doc"] span:first-child::before,
acidjs-xupload li[class$="docx"] span:first-child::before
{
    background-image: url("images/doc.svg");
}

acidjs-xupload li[class$="html"] span:first-child::before,
acidjs-xupload li[class$="xhtml"] span:first-child::before
{
    background-image: url("images/html.svg");
}

acidjs-xupload li[class$="jpg"] span:first-child::before,
acidjs-xupload li[class$="jpeg"] span:first-child::before
{
    background-image: url("images/jpg.svg");
}

acidjs-xupload li[class$="png"] span:first-child::before,
acidjs-xupload li[class$="apng"] span:first-child::before
{
    background-image: url("images/png.svg");
}

acidjs-xupload li[class$="gif"] span:first-child::before
{
    background-image: url("images/gif.svg");
}

acidjs-xupload li[class$="md"] span:first-child::before,
acidjs-xupload li[class$="txt"] span:first-child::before
{
    background-image: url("images/txt.svg");
}

acidjs-xupload li[class$="pdf"] span:first-child::before
{
    background-image: url("images/pdf.svg");
}

acidjs-xupload li[class$="mp3"] span:first-child::before
{
    background-image: url("images/mp3.svg");
}

acidjs-xupload li[class$="mp4"] span:first-child::before,
acidjs-xupload li[class$="mpg"] span:first-child::before,
acidjs-xupload li[class$="mpeg"] span:first-child::before
{
    background-image: url("images/mpg.svg");
}

acidjs-xupload li[class$="mid"] span:first-child::before,
acidjs-xupload li[class$="midi"] span:first-child::before
{
    background-image: url("images/midi.svg");
}

HTML5, CSS3 & JS Experiments