File upload using JavaScript with validation (Apply validation on frontend side)
JavaScript is a client side scripting language. With JavaScript we can easily validate our file with extension, file size.
input element object .files
<form action="" method="POST" enctype="multipart/form-data" id="form">
<label>Upload</label>
<input class="w3-input w3-white" id="file" name="file" type="file" />
<input name="upload" type="hidden" value="" />
<button id="Upload" name="upload" type="submit">Upload</button>
</form>
<div id="embed"></div>
<script>
document.getElementById('Upload').addEventListener('click', (e) => {
e.preventDefault();
if(document.getElementById('file').value){
// console.log(document.getElementById('file').files); All property of file
var files = document.getElementById('file').files;
var file_name = files[0].name;
var file_size = files[0].size;
var file_type = files[0].type;
var file_arr = file_name.split('.');
var file_ext = file_arr[file_arr.length-1];
var file_extensions = ['jpeg', 'JPEG', 'png', 'PNG', 'jpg', 'JPG','gif','GIF', 'mp3', 'MP3', 'mp4','MP4', 'docx','DOCX','xlsx','XLSX','ppt','PPT','pptx','PPTX','pdf','PDF'];
var errors = new Array();
if(!file_extensions.includes(file_ext)){
errors[0] = 'This file extension is not allowed';
}
if(file_size > 26214400){
errors[1] = 'File size must be less than 25 MB';
}
if(errors.length == 0){
document.getElementById('form').submit();
} else {
var msg = '';
errors.forEach( (value) => {
msg += '<div class="alert alert-danger em">'+value+'</div>';
});
document.getElementById('embed').insertAdjacentHTML('beforebegin', msg);
Remove();
}
}else{
document.getElementById('embed').insertAdjacentHTML('beforebegin', '<div class="alert alert-danger em">Select a file</div>');
Remove();
}
});
function Remove(){
setTimeout(() => {
document.querySelectorAll('.em').forEach( (value) => {
value.remove();
});
}, 5000);
}
</script>
Comments
Post a Comment