How To Check File Type and File Size in Ionic for Input Type File?
In this blog, we will discuss how to check file type and file size in Ionic for input type files. When we are using the ionic app and ionic-based website then we pick an image from the system we use input type file in HTML for the gallery upload section. Please check the blog carefully so that you can understand how the code is written and how it is tested. This blog is especially for those developers who are working on the Ionic framework.
Please follow the following steps:
This upper portion code add in html file. Please add the following code.
changeLeaveImage(ev) {
//let preview = document.getElementById("preview");
this.returnImage=null;
this.returnimageExt='';
let file = ev.files[0];
if(file.type=="image/jpeg" || file.type=="image/png"){ //file type checking
if (ev.files[0].size < 2000000){ //file size checking..
let reader = new FileReader();
reader.onloadend = (e)=>{
this.returnImage = reader.result;
this.returnimageExt = file.name.split(".").pop();
}
reader.readAsDataURL(file);
ev.value='';
}else{
this.alertServ.presentToast("File size should be under 2mb.");
}
}else{
// this.service.Validalert("Only .jpg and .png file type are allowed.");
// ev.value='';
}
}
The above function adds to your ts file. And we are commenting on some part of why this condition is checking. I this code you see the file type checking and file size also checking in nested condition.
Conclusion:
It is very important for file size checking in an input tag with type file in Ionic development. And the above code is tested by me. It was really worked fine for me. Hope you have enjoyed the blog. Please share your thoughts in the comment section. See you on my next blog.
