JSFiddle - React, Tailwind, and code Playground

by painotpi

HTML

<input type="file" class="EnElm" />
<input type="file" />
<input type="file" />
<input type="file" class="EnElm" />
<input type="file" />
<input type="file" />

CSS

div {
    border: 1px solid;
    padding: 0px;
    margin: 15px;
    width: 400px;
    height: 50px;
    position: relative;
}
div input {
    position: absolute;
    width: 100%;
    height: 100%;
    visibility: hidden;
}

JavaScript

function eFileInput(selector) {
    var _selector = selector,
        _elements = []; //array of elements

    function getElements(_selector) {
        /*
         * Takes a selector as an argument and returns an array of matched elements.
         */
        var __aElements = [];

        __aElements = document.querySelectorAll(selector);
        __aElements = [].slice.call(__aElements);

        return __aElements;
    }

    function wrap(__aElms) {
        /*
         * Takes an array of elemens and enhances them.
         * Enhance =>  wrap with custom markup
         * TODO:
         * ----- This function needs to be tested for different html structures -----
         * ----- Change naming conventions -----
         * ----- move some code to settings object -----
         */

        for (var i = 0; i < __aElms.length; i++) {
            var parent = document.createElement("div"),
                ui_elm = document.createElement("span"),
                actualParent = __aElms[i].parentNode;

            parent.className = "control fileInput";

            parent.appendChild(ui_elm);
            parent.appendChild(__aElms[i]);

            actualParent.appendChild(parent);
        }
    }

    function wireup() {
        var _enhancedElements = document.querySelectorAll(".control.fileInput");
        var input_type = document.querySelectorAll("input[type='file']");

        var _evtClick;

        try {
            _evtClick = new MouseEvent('click', {
                'view': window,
                    'bubbles': true,
                    'cancelable': true
            });
        } catch (e) {
            //Must be ie? need a better way to check
            if (document.createEvent) {
                console.log("created from document.createEvent");
                _evtClick = document.createEvent("MouseEvent");
                _evtClick.initEvent("click", true, true);
            } else if (document.createEventObject) {
               ...