The file input field in depth

input elements are usually used in forms to collect values from users. They come in different types - email, password, text, file and so on.

The file input is used for retrieving files from users. All they have to do is click on the input, select a file, and submit the form. But, there's more to this input type which developers should also consider for better understanding and usage.

file input

<form>
  <input id="userImage" type="file" name="userImage" />
</form>

The above code is a basic code snippet for the file input. With this, the user should see a 'Choose File' button on the screen, which would enable file selection like images, videos, documents and so on.

The user can only select one file with the code above. An attribute which we would soon see is used in the input element to enable multiple selection.

Retrieving information of file selected

To get more information about the file selected (asides the name displayed on the screen, e.g size, type, etc), Javascript can be used like so:

const userImage = document.getElementById("userImage")
userImage.addEventListener("change", function (e) {
  console.log(e.target.files)
})

The above code adds an event listener (change) to the input file. A callback function is attached which logs the files attribute of the input (target) which the event was triggered on. The output is an object with two properties - 0 (with the value as the details of the file) and length (with the value, 1). If multiple files we selected, the files property will result with multiple properties like this: 0, 1, n, length.

The value attribute

This attribute in an input element of file is automatically generated by Javascript which holds the path to the image selected. The path to the image comes in the format C:\fakepath\<file-name>. According to MDN,

The string is prefixed with C:\fakepath, to prevent malicious software from guessing the user's file structure.

Special attributes that can be used with type=file

Asides the common attributes used by all input elements, file inputs has more which are:

1. multiple

When this attribute is specified in the input element, more than 1 file can be selected. You'd also notice that 'Choose File' would be replaced with 'Choose Files'

To access all images with Javascript, the same method above (e.target.files) is used.

2. files

Initializing this attribute is useless. What I mean is:

<form>
  <input files="myimage.jpg" id="userImage" type="file" name="userImage" />
</form>

It's useless because the value of the attribute is generated by Javascript when an image (/images) is selected.

3. accept

This attribute is used to specify the acceptable file types to be selected. This can be demonstrated with the following code:

<input accept=".png, .jpg" id="userImage" type="file" name="userImage" />

The acceptable files for the above input are images, but with the extension .png and .jpg. Another method of doing the above is:

<input
  accept="image/jpg, image/png"
  id="userImage"
  type="file"
  name="userImage"
/>

Also, to accept all forms of images, accept="image/*" can be used, which is a wildcard for all image types.

4. capture

This attribute specifies the method by which the image and video data can be selected. It has two values - user (which specifies the front camera) and environment (which specifies the back camera). If none is selected, the browser would by default choose a preferred method.

Wrap Up

I hope this article has explained the awesome file input type. Now you have total control of files you want from your users when developing a website.

Thanks for reading : )