here i am implementing the functionality of file upload but when coming to the UI part the default file upload is like
<input type="file" name="data">
which is like default file upload:
and i want to some thing like this
required file upload:
and here i don't want to apply any j query or java script just html,css,bootstrap if required is it possible?
use this code
// highlight drag area
var fileinput = document.querySelector('.file-input');
var filedroparea = document.querySelector('.file-drop-area');
var jssetnumber = document.querySelector('.js-set-number');
fileinput.addEventListener('dragenter', isactive);
fileinput.addEventListener('focus', isactive);
fileinput.addEventListener('click', isactive);
// back to normal state
fileinput.addEventListener('dragleave', isactive);
fileinput.addEventListener('blur', isactive);
fileinput.addEventListener('drop', isactive);
// add Class
function isactive() {
filedroparea.classList.add('is-active');
}
// change inner text
fileinput.addEventListener('change', function() {
var count = fileinput.files.length;
if (count === 1) {
// if single file then show file name
jssetnumber.innerText = fileinput.value.split('\\').pop();
} else {
// otherwise show number of files
jssetnumber.innerText = count + ' files selected';
}
});@import url(https://fonts.googleapis.com/css?family=Lato:400,300,700);
body {
background-color: #37385F;
color: #D7D7EF;
font-family: 'Lato', sans-serif;
}
h2 {
text-align: center;
margin: 50px 0;
}
.file-drop-area {
border: 1px dashed #7c7db3;
border-radius: 3px;
position: relative;
width: 450px;
max-width: 100%;
margin: 0 auto;
padding: 26px 20px 30px;
-webkit-transition: 0.2s;
transition: 0.2s;
}
.file-drop-area.is-active {
background-color: #3F4069;
}
.fake-btn {
background-color: #3F4069;
border: 1px solid #9E9EC4;
border-radius: 3px;
padding: 8px 15px;
margin-right: 8px;
font-size: 12px;
text-transform: uppercase;
}
.file-msg {
font-size: small;
font-weight: 300;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
max-width: calc(100% - 130px);
vertical-align: middle;
}
.file-input {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
cursor: pointer;
opacity: 0;
}
.file-input:focus {
outline: none;
}<h2>Styling Native File Input</h2>
<div class="file-drop-area">
<span class="fake-btn">Choose files</span>
<span class="file-msg js-set-number">or drag and drop files here</span>
<input class="file-input" type="file" multiple>
</div>You should use the File browser/Custom Forms in bootstrap 4. The code should looks like:
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile">
<label class="custom-file-label" for="customFile">Choose file</label>
</div>
and the component should looks like this:
Hope it works!
