UploadButton

   

• Heroku: http://upload-button.herokuapp.com/

Requirements

UploadButton uses both Custom Elements and Shadow DOM which at present time requires a bleeding-edge browser such as Chrome Canary.

Getting Started

Once you've satisfied the requirements you may begin adding the UploadButton HTML into your DOM:

<button is="upload-button">
    Upload File
</button>

With that the registerElement invocation within the module will register the type extension custom element — upload-button — as an extension of HTMLButtonElement.prototype which means that without any styling, the element will appear as a normal button — yet clicking on the element will invoke the file selection modal.

Attributes

By applying certain attributes to the button element these will automagically be relayed onto the input element for uploading the files.

• accept, default being *
• autofocus, default being unset
• disabled, default being unset
• form, default being unset
• multiple, default being unset
• name, default being unset
• required, default being unset

Attributes are defined in the usual way with the button element:

<button is="upload-button" multiple="multiple">
    Upload Files
</button>

Note: UploadButton also supports the adding of data- attributes to the button element as well, such as: data-multiple="multiple".