Filtering and validating file uploads with Javascript

Faddal Ibrahim — Sat, 07 Nov 2020 13:50:04 +0000

I was working on the backend (using PHP and MySQL) of a personal project where I had to validate and filter files, allowing only png, and files below a certain size on the server.

I did the validation and filtering on the back end before realizing I could do the same on the frontend. This gives double-layered protection. Well, validation on the front end could be bypassed easily, but at least, it contributes to the robustness.

Here are the ways to achieve this on the front end using HTML or javascript.

Using just HTML

With HTML, you have to specify the file types using the accept attribute. With this, the window that appears after clicking the file upload button will display only those files specified in the accept attribute.

<input type="file" multiple accept=".jpg, .png"/>

In the above example, I am accepting only jpg and png files. Other files types like pdf or docx won't even show in the selection window.

This method is not really robust as the user could click All files from the file selection window, which would then display all file types for him to choose from (including the files we are trying to avoid)

Notice I have also included multiple to allow for multiple file uploads.

Moreover, you have no control over the size of the files. This is where Javascript comes in.

Using javascript

With javascript, we have control over the type of file as well as the size and other metadata the file comes with. The whole idea behind this procedure revolves around the file object that is created when we upload a file. This file object contains information about the file such as its name, size, date modified or created etc.


//attaching "change" event to the file upload button
document.getElementById("file").addEventListener("change", validateFile)

function validateFile(){
  const allowedExtensions =  ['jpg','png'],
        sizeLimit = 1_000_000; // 1 megabyte

  // destructuring file name and size from file object
  const { name:fileName, size:fileSize } = this.files[0];

  /*
  * if filename is apple.png, we split the string to get ["apple","png"]
  * then apply the pop() method to return the file extension
  *
  */
  const fileExtension = fileName.split(".").pop();

  /* 
    check if the extension of the uploaded file is included 
    in our array of allowed file extensions
  */
  if(!allowedExtensions.includes(fileExtension)){
    alert("file type not allowed");
    this.value = null;
  }else if(fileSize > sizeLimit){
    alert("file size too large")
    this.value = null;
  }
}

Are the better ways to do this? Or are my explanations confusing? How could I improve them. Let me know in the comments. Thanks for reading

How to create a custom file upload button

Faddal Ibrahim — Sun, 16 Aug 2020 16:13:14 +0000

I find the default HTML file upload button rather ugly. Annoying enough, there seems to be no way to style it directly. Here is how I created a custom file upload button.

1. Use a label tag and point its for attribute to the id of the default HTML file upload button

<!--default html file upload button-->
<input type="file" id="actual-btn"/>

<!--our custom file upload button-->
<label for="actual-btn">Choose File</label>

By doing this, clicking the label element in the browser toggles the default HTML file upload button (as though we clicked it directly).

The output of the above code is below. As you can see, we only have a Choose File text (from the label element) a few pixels to the right of the actual upload button.

We can click the Choose File text, and it will toggle the upload window (Click it and see)

2. Style the label element and hide the default HTML file upload button

We hide the default HTML file upload button in the browser by adding the hidden attribute to the tag like so

<input type="file" id="actual-btn" hidden/>

Now we style the label element to look more like a button.

label {
  background-color: indigo;
  color: white;
  padding: 0.5rem;
  font-family: sans-serif;
  border-radius: 0.3rem;
  cursor: pointer;
  margin-top: 1rem;
}

Now we have this beautiful custom button, which actually works like the original file upload button:

At this point, we are done. But there is one more glitch to fix.

With the default file upload button, there is a no file chosen text beside the button (scroll up to the first codepen window), which gets replaced with the name of the file we will be uploading. Unfortunately, we don't get to see that with our custom button. How do we do that?

What I did was to include a span tag (with an id of file-chosen) right after our custom file upload button.

In the javascript file, I listen to the change event on the original file upload button(which we have hidden). A file object is returned which contains the details(such as name, file size etc) of the file uploaded.

Then I set the text content of the span element(with the id of file-chosen) to the name property of the file object returned. The final result is below. Test it out.