In this code, the user can select a file using the input type=” file”. Then we display the file extension of the corresponding file. This is a really simple project.
If you prefer to learn through a video tutorial instead of reading this blog post, you can check out the video down below. Also, subscribe to my YouTube channel, where I pause new tips, tricks, and tutorials every alternate day.
Project Folder Structure:
We create a project folder structure called – ‘Get File Extension’. Inside this folder, we have two files. These files are index.html and style.css. We write the js code for this project in the HTML file itself.
We begin with the HTML code. First, copy the code and paste it into your HTML file. The HTML code consists of a div with a class name container. Inside this div, we have an input-type file to help the user choose a file. Next, we also have a message div that displays the extension of the chosen file.
Next, we style this project using CSS. You can skip the CSS code as I have used it only to make the output more presentable.
We create initial references for file input and messages. Next, we call the function when there is input on the file input button. If the user selects a file we extract the file extension.
If the user clicks on the cancel button we display the message – “Please Select A File”.
That’s it for this tutorial. If you face any issues while creating this project you can download the source code by clicking on the download button below. Also, if you have any queries, suggestions, or feedback comment below.