Hey everyone. Welcome to today’s tutorial. This tutorial is going to be a short and quick one. We will learn how to get file extensions from a chosen file. For this we need javascript.
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.
Video Tutorial:
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.
HTML:
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.
CSS:
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.
Javascript:
Lastly, we use javascript to implement the logic of our code. For this copy the code below and paste it into your script tag.
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.
