Drag’n’Drop mező

Húzza ide

a fájlt a feltöltéshez

vagy klikkeljen ide a tallózáshoz

FELTÖLTÖTT FÁJLOK
Lorem ipsum dolor sit amet,sed diam nonumy eirmod.pdf (234kb)	törlés
Lorem ipsum dolor sit amet,sed diam nonumy eirmod.pdf (234kb)	törlés
60%

<fieldset>
    <legend>Drag’n’Drop mező</legend>
    <div class="row">
        <div class="col-lg-12 col-md-12">
            <div class="form-group">
                <div class="dotted-border">
                    <div class="drag-drop">
                    <p class="text-center">Húzza ide</p>
                    <span class="text-uppercase text-center">a fájlt a feltöltéshez</span>
                </div>
                    <label class="btn btn-file">vagy klikkeljen ide a tallózáshoz
                    <input type="file" tabindex="0" id="fileUpload" name="fileUpload" > </label>
                </div>
            </div>
        </div>
    </div>
    <h4>feltöltött fájlok listája</h4>
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <table class="table table-responsive uploads">
                <thead>
                    <tr>
                        <th class="text-left">Dokumentum neve</th>
                        <th>&nbsp;</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- ITEM -->
                    <tr>
                        <td class="text-left"><span>Lorem ipsum dolor sit amet,sed diam nonumy eirmod.pdf (234kb)</span></td>
                        <td class="text-right"><a href="#" title="File törlése" class="delFile">törlés</a></td>
                    </tr>
                    <!-- ITEM -->
                    <tr>
                        <td class="text-left"><span>Lorem ipsum dolor sit amet,sed diam nonumy eirmod.pdf (234kb)</span></td>
                        <td class="text-right"><a href="#" title="File törlése" class="delFile">törlés</a></td>
                    </tr>
                    <tr class="uploadProgress">
                        <td colspan="6">
                            <div class="progressCont relative">
                                <div class="progress">
                                    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
                                </div>
                                <p><span aria-live="polite">60%</span></p>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</fieldset>

.btn-file input[type=file] {
     position: absolute;
     top: 0;
     right: 0;
     min-width: 100%;
     min-height: 100%;
     text-align: right;
     filter: alpha(opacity=0);
     opacity: 0;
     -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
     outline: none;
     background: #FFF;
     cursor: inherit;
     display: block;
}
 .btn-file,
 .btn-file:hover, 
 .btn-file:focus,
 .btn-file:active, 
 .btn-file.active,
 .btn-file.active:hover, 
 .btn-file:focus:hover {
     border: 1px solid #004b88;
     color: #004b88;
     text-transform: uppercase;
     padding: 6px;
     background-color: transparent;
     font-size: 0.8rem;
}
 .dotted-border {
     width: 100%;
     height: 205px;
     border: 3px dotted #c2cddb;
     padding: 0;
     background: url('../../../img/drag-n-drop-bgr.png') no-repeat 50% 20px;
     margin: 0;
     text-align: center;
}
 .drag-drop {
     height: 140px;
}
 table.uploads .progress {
     height: 2px;
     width: 95%;
     margin: 0 0 15px 0;
}
 table.uploads .progressCont {
     width: 100%;
}
 table.uploads .progressCont span {
     color: #333;
     display: inline-block;
     position: absolute;
     left: 98%;
     top: -10px;
     font-size: 0.8rem;
}
 table.uploads tbody tr.uploadProgress>td {
     border-top-color: transparent;
}
 .progress-bar-success {
     background-color: #5F853B;
}
 .progress-bar-warning {
     background-color: #F4D116;
}
 .progress-bar-danger {
     background-color: #c20029;
}