File type validation<\/b> before uploading to the server is mandatory for every file upload in the web application. It helps to ensure that the user has selected the correct types of files to upload. Client-side validation is more user-friendly than server-side. It will be a good idea to validate the file type before submitting to upload. Using JavaScript, you can easily check the selected file extension with allowed file extensions.<\/p>\n
In this tutorial, we will show how you can implement file extension validation in JavaScript<\/b>. Using our file type validation script, you can restrict the user to upload only the allowed file types.<\/p>\n
In our example script, we will validate image file using JavaScript<\/b> and allow user to select only .jpg, .jpeg, .png, and .gif type file. If the selected file extension is not matched with the specified types, the alert message will be shown to the user. Otherwise, the chosen image preview will be displayed under the file input field.<\/p>\nJavaScript Code<\/h2>\n
The Image file extensions regex is defined in On file select, the Here we have shown only the image file type validation, you can use this same script for other file types validation. You only need to specify the allowed file extensions on File type validation before uploading to the server is mandatory for every file upload in the web application. It helps to ensure that the user has selected the correct types of files to upload. Client-side <\/p>\n","protected":false},"author":1,"featured_media":2151,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[10],"tags":[132,66,257],"class_list":["post-2150","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-file","tag-javascript","tag-validation","cat-10-id","has_thumb"],"yoast_head":"\nfileValidation()<\/code> function contains the complete file type validation code. This JavaScript function needs to call for file extension validation.<\/p>\nfunction<\/span> fileValidation<\/span>(){\r\n var<\/span> fileInput =<\/span> document<\/span>.getElementById<\/span>('file'<\/span>);\r\n var<\/span> filePath =<\/span> fileInput.value<\/span>;\r\n var<\/span> allowedExtensions =<\/span> \/(\\.<\/span>jpg|\\.<\/span>jpeg|\\.<\/span>png|\\.<\/span>gif)$\/i<\/span>;\r\n if<\/span>(!<\/span>allowedExtensions.exec<\/span>(filePath)){\r\n alert<\/span>('Please upload file having extensions .jpeg\/.jpg\/.png\/.gif only.'<\/span>);\r\n fileInput.value<\/span> =<\/span> ''<\/span>;\r\n return<\/span> false<\/span>;\r\n }else<\/span>{\r\n \/\/Image preview<\/span>\r\n if<\/span> (fileInput.files &<\/span>&<\/span> fileInput.files[0<\/span>]) {\r\n var<\/span> reader =<\/span> new<\/span> FileReader<\/span>();\r\n reader<\/span>.onload<\/span> =<\/span> function<\/span>(e) {\r\n document<\/span>.getElementById<\/span>('imagePreview'<\/span>).innerHTML =<\/span> '<img src=\"'<\/span>+<\/span>e.target<\/span>.result+<\/span>'\"\/>'<\/span>;\r\n };\r\n reader.readAsDataURL(fileInput.files[0<\/span>]);\r\n }\r\n }\r\n}\r\n<\/pre>\nallowedExtensions<\/code> variable. If you want to validate other file types, change the regex with allowed extensions.<\/p>\nHTML Code<\/h2>\n
fileValidation()<\/code> function will be executed. If the allowed file types are selected, image preview will be shown in imagePreview<\/code> div.<\/p>\n<!-- File input field --><\/span>\r\n<input<\/span> type<\/span>=\"file\"<\/span> id<\/span>=<\/span>\"file\"<\/span> onchange<\/span>=\"return fileValidation()\"<\/span>\/>\r\n\r\n<!-- Image preview --><\/span>\r\n<div<\/span> id<\/span>=<\/span>\"imagePreview\"<\/span>><\/div<\/span>>\r\n<\/pre>\nConclusion<\/h2>\n
allowedExtensions<\/code> variable in JavaScript code. Apart from the file type validation, this script will help to display image preview without upload using JavaScript<\/b>.<\/p>\n","protected":false},"excerpt":{"rendered":"