JSFiddle - React, Tailwind, and code Playground
HTML
<div class="file-well">
<input type="file" id="my_file_element">
<span id="filewelllabel">Aby dodać załącznik kliknij tutaj lub przeciągnij i upuść plik w ten obszar.<br/></span>
<span id="filewelllabel">Możesz dodać maksymalnie 5 plików (.pdf, .doc, .docx, .docm)</span>
</div>
</div>
<div id="files_list"></div>
CSS
.file-well,
.file-well input {
width: 99.5%;
height: 100px;
border: 2px solid #DDD;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
background-color: #FEFFEC;
text-align: center;
color: #BBB;
font-size: 1em;
font-family: Arial, sans-serif;
}
.file-well {
background-color: #FEFFEC
}
.file-well.filled {
background-color: #FEFFEC;
}
.file-well.hover {
background-color: #f3f4e3;
}
.file-well input {
opacity: 0.01; /* 1% visible */
}
#filewelllabel{
position: relative;
top: -80%;
}
JavaScript
var multi_selector = new MultiSelector(document.getElementById('files_list'), 5);
multi_selector.addElement(document.getElementById('my_file_element'));
/**
* Convert a single file-input element into a 'multiple' input list
*
* Usage:
*
* 1. Create a file input element (no name)
* eg. <input type="file" id="first_file_element">
*
* 2. Create a DIV for the output to be written to
* eg. <div id="files_list"></div>
*
* 3. Instantiate a MultiSelector object, passing in the DIV and an (optional) maximum number of files
* eg. var multi_selector = new MultiSelector( document.getElementById( 'files_list' ), 3 );
*
* 4. Add the first element
* eg. multi_selector.addElement( document.getElementById( 'first_file_element' ) );
*
* 5. That's it.
*
* You might (will) want to play around with the addListRow() method to make the output prettier.
*
* You might also want to change the line
* element.name = 'file_' + this.count;
* ...to a naming convention that makes more sense to you.
*
* Licence:
* Use this however/wherever you like, just don't blame me if it breaks anything.
*
* Credit:
* If you're nice, you'll leave this bit:
*
* Class by Stickman -- http://www.the-stickman.com
* with thanks to:
* [for Safari fixes]
* Luis Torrefranca -- http://www.law.pitt.edu
* and
* Shawn Parker & John Pennypacker -- http://www.fuzzycoconut.com
* [for duplicate name bug]
* 'neal'
*/
var i = 1;
function MultiSelector(list_target, max) {
// Where to write the list
this.list_target = list_target;
// How many elements?
this.count = 0;
// How many elements?
this.id = 0;
// Is there a maximum?
if (max) {
this.max = max;
} else {
this.max = -1;
}
;
/**
* Add a new file input element
*/
this.addElement = function (element) {
// Make sure it's a file input element
...