How to Get File Extensions Using JavaScript

Ever wondered how websites know the types of files you’re uploading? The secret lies in extracting the file extension. Today, we’ll embark on a journey to build a simple yet powerful tool using HTML, CSS, and JavaScript to effortlessly fetch the file extension. No need to be a coding wizard – let’s break it down step by step.

Understanding the Basics

HTML Structure

Our HTML lays the foundation for our tool. We have a neat container with a file input and a message to guide users.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Get File Extension</title>
  </head>
  <body>
    <div class="container">
      <input type="file" id="my-file" />
      <p id="message">Click on button to choose file</p>
    </div>
  </body>
</html>

HTML

Styling with CSS

Our CSS adds a touch of style to make the tool visually appealing. It’s kept clean and straightforward.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  background-color: #1e1c27;
  color: white;
  font-family: "Poppins", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.container {
  font-family: "Poppins", sans-serif;
  background-color: #ffffff;
  width: 400px;
  padding: 2em;
  display: flex;
  flex-direction: column;
  border-radius: 0.5em;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

input[type="file"] {
  font-family: "Poppins", sans-serif;
  margin-bottom: 1em;
  font-size: 1.2em;
  color: #474778;
  padding: 0.5em;
  border: 1px solid #ccc;
  border-radius: 0.3em;
  outline: none;
  cursor: pointer;
}

#message {
  text-align: center;
  background-color: #e6ecff;
  padding: 1.2em;
  color: #4a77f8;
  font-size: 1em;
  border-radius: 0.3em;
  margin-bottom: 1em;
}

CSS

Adding Magic with JavaScript

JavaScript is where the magic unfolds. It listens for changes in the file input, extracts the file extension, and updates the message accordingly.

//Initial Reference
let file = document.getElementById("my-file");
let message = document.getElementById("message");
//Call the function when there is input on the file input button
file.addEventListener("input", () => {
  //If user selects a file
  if (file.files.length) {
    let fileExtension = file.files[0].name.split(".").pop();
    message.innerHTML = fileExtension;
  }
  //If user clicks on cancel
  else {
    message.innerHTML = "Please select a file";
  }
});

JavaScript

The Magic Explained

HTML Structure:
- Our HTML sets up a container with a file input and a message.
CSS Styling:
- CSS adds a touch of style, making the tool visually appealing.
JavaScript Functionality:
- JavaScript listens for changes in the file input.
- When a file is selected, it extracts the extension and updates the message.
- If the user clicks cancel, a friendly reminder is displayed.

Bringing it to Life

Choosing a File:
- Click on the “Choose File” button.
Seeing the Magic:
- The tool instantly reveals the file extension.
Friendly Reminders:
- A message guides you to select a file if you haven’t.

Conclusion

Voila! You’ve just built a tool that effortlessly fetches file extensions. Whether you’re a coding enthusiast or just getting started, this guide empowers you to add a useful feature to your web toolkit.

Happy Coding!