Welcome to yet another lecture.
Are you beginning to see how powerful this input element is and why?
I said it's perhaps one of the most complex in HTML because there are so many different types and it
completely transforms the functionality of an input when you use different types.
And now I want to talk about a very useful one.
You're going to be using this a lot in your career, and that is when you allow the user to upload files.
And here HTML gives us a very convenient type called file.
So, what can I say about the file [type]? Well, obviously it allows the user to attach files to a form. And
the file picker widget can be used to choose one or more files to send. And to create this file picker
widget,
all we need is the input element with its type set to file.
You know this already.
What's interesting though is that we as developers can restrict or constrain the type of files that
we will accept.
Say we don't want a video file.
We can specify that. Say we don't want a PNG, we only want JPEGs.
We can specify that. Well, how do we do that?
Easy.
The types of files that are accepted can be constrained using the "accept" attribute.
Whaaat? The accept attribute.
If you will recall, when discussing forms earlier on in this course, we mentioned that the accept attribute
was removed by HTML5.
But remember my students, this was in the context of using it on the form element itself.
You can and should use the accept attribute on inputs with type file.
And I've just given you an example below.
Here we have defined the accept attribute as accepting all audio files, video files and image files.
So just remember that although we shouldn't use it on the form wrap itself, we should be using it on
the input of type file.
And before we finish up, I just want to mention two more things.
One, I want to mention that if you want to let the user pick more than one file, you can and you do
so by adding the multiple attribute to your input, just like you see on the screen in front of you.
So that's the first thing I wanted to mention.
The last thing I want to mention is that for a file to be properly sent to a server, don't forget to
include the multipart/form-data attribute to the form element itself.
And I know it seems like a decade ago, but we did go through the multipart/form-data in a lot of detail.
But to remind you on the actual form wrap itself, we set its encoding type to multipart/form-data.
If you don't do that, the issue you'll have is that the file name will be sent to the server, but not
the actual contents of the file itself.
So there we have it.
That's pretty much all I wanted to say on the input type file.
It's a very intuitive widget. And keep going
my dear students.
Grab a coffee, grab a Red Bull, stay motivated.
You got to keep going through this course.
I know there's a lot we're covering, but it's really, really going to help you in your career.
See you now.