This is going to be a quick tutorial. I have explained all the steps in the JavaScript file using comments.
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:
Before we start coding, we take a look at the pro project folder structure. We create a project folder structure called extract filename from a file input. Inside this folder, we have 3 files. They are index.HTML, style.css and script.js. The first file is the HTML document, the next one is the style sheet, and the last one is the script file
HTML:
We begin with the HTML document. The HTML document consists of input type= ‘file’.
CSS:
You can completely ignore the CSS file, as I have only used CSS to make the output presentable.
Javascript:
Next, implement functionality using JavaScript, we do this in the following steps:
- Create initial references
- Add input event listener to the file input element
- If the user selects a file and then extracts the file name
- If the user Clicks on cancel then display a warning message
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.
