The input file 1) is an input of type file that permits to select files or directory and send them to the browser file system api
<input type="file" />
<input type="file" multiple />
When using the webkitdirectory attribute (supported on all browsers 2)), you can upload all files present under a directory and its children.
Example:
<input type="file" webkitdirectory />
Note that after choosing your directory, you will get the following warning dialog
<input type="file" disabled />
The accept attribute specifies the file types accepted (mime and/or file extension)
Example for image and text file
<input type="file" accept="image/*,.txt"/>
Changing the description of the input file cannot be done via a standard attribute.
It's also not possible to disable the native default browser rendering of a input file (the appearance css property is not working).
The trick is to create a hidden input file with a visible label that refers to it via the for attributes.
<label for="my-input-file-id" class="btn btn-primary">Select an Image</label>
<input id="my-input-file-id" style="visibility:hidden;" type="file">
To see examples of how Javascript can take and handle the file chosen, see the dedicated fileApi page
When a file is send with multipart form data, the file is added in the formdata as a File object
Example:
<form onsubmit="handleSubmit(this); return false;">
<input type="file" name="myfile"/>
<br>
<input name="button" type="submit" value="Choose a file and see the data type" />
</form>
The FormData constructor takes a form element as parameter. See FormData constructor Specification
handleSubmit = (form) => {
// build the formData object
let formData = new FormData(form);
// retrieve the entries in a entries variable of iterator type
let entries = formData.entries();
// loop over the iterator
let result = entries.next();
while (!result.done) {
console.log("Input: Name: "+result.value[0]+", value: "+result.value[1].constructor.name);
result = entries.next();
}
}