The file input field in depth
April 4th, 2020
3 mins read
Category: HTML
#javascriptMaximum of 20 articles can be saved!
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 : )
If you have any questions or contributions regarding this article, kindly reach Dillion Megida (@iamdillion) or visit us on twitter - @thewebfor5