JSFiddle - React, Tailwind, and code Playground

by Prithviraj mitra

HTML

<div id="TextBoxDiv1" data-id="1" class="textboxdiv_new">
    <div class="row">
        <div class="large-3 columns left button-mar-top-btm">
            <label class="tiny button radius multipleimg">
                <input type="file" id="ques_32[]" value="" class="imgupload" name="ques_32[]" data-id=1>Upload Photo</label>
        </div>
        <div class="large-7 left columns button-mar-top-btm">
            <input type="text" class="file-upload-input" id="filename1">
        </div>
        <div class="large-2 left columns button-mar-top-btm"><a class="button radius tiny alert removeField" href="#">×</a>

        </div>
    </div>
</div>
<div id="TextBoxDiv2" data-id="2" class="textboxdiv_new">
    <div class="row">
        <div class="large-3 columns left button-mar-top-btm">
            <label class="tiny button radius multipleimg">
                <input type="file" value="" class="imgupload" name="ques_32[]" data-id=2 id="ques_32[]">Upload Photo</label>
        </div>
        <div class="large-7 left columns button-mar-top-btm">
            <input type="text" class="file-upload-input" id="filename2">
        </div>
        <div class="large-2 left columns button-mar-top-btm"><a class="button radius tiny alert removeField" href="#">×</a>

        </div>
    </div>
</div>

CSS

label input[type="file"] {
    position: fixed;
    top: -1000px;
}
button, .button {
    background-color: #fbb428;
    border-color: #e59904;
    border-style: solid;
    border-width: 0;
    color: #0e92a1;
    cursor: pointer;
    display: inline-block;
    font-family:"museo-sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
    font-size: 1rem;
    font-weight: 300;
    line-height: normal;
    margin: 0 0 1.25rem;
    padding: 0.625rem 1.25rem 0.6875rem;
    position: relative;
    text-align: center;
    text-decoration: none;
    transition: background-color 300ms ease-out 0s;
}
.question_row .columns {
    background: none repeat scroll 0 0 #0b7582;
    border-radius: 6px;
    margin-bottom: 1rem;
    margin-top: 1rem;
    padding-bottom: 1rem;
    padding-top: 0.5rem;
}
.question_row .columns:before {
    border-color: #0b7582 transparent transparent;
    border-style: solid;
    border-width: 15px 5px 0;
    bottom: -7px;
    content:"";
    display: none;
    height: 0;
    left: -6px;
    position: absolute;
    width: 0;
}
.column, .columns {
    float: left;
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
    position: relative;
}
.large-3 {
    width: 25%;
}

JavaScript

$('.imgupload').on('change', function (e) {
    var imgid = $(this).attr("id");
    var filenames = [].slice.call(e.target.files).map(function (f) {
        alert(f.name);
        return f.name;
    });
    $('#filename' + $(this).attr("data-id")).val(filenames);
});