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.
A file object is returned which contains the details(such as name, file size etc) of the file uploaded. In the javascript file, I listen to the change event on the original file upload button(which we have hidden).
Constraint validation: If the type attribute is in the Reset Button state or the Button state, the element is barred from constraint validation. With the arrival of HTML 5, several new attributes have been added to this element ( formaction, formenctype, formmethod, formnovalidate. The label of a button is represented by the content of the element. If the type attribute is in the Submit Button state, the element is specifically a submit button. The button element, having the 'submit' value in its type attribute, represents a button that, when pressed, submits the form it belongs to. What I did was to include a span tag (with an id of file-chosen) right after our custom file upload button. The missing value default and invalid value default are the Submit Button state. Unfortunately, we don't get to see that with our custom button. 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. This kind of validation can be circumvented by the user via specially crafted HTTP requests, so it does not replace server-side input validation.
It could partially or completely replace JavaScript input validation. Now we have this beautiful custom button, which actually works like the original file upload button:Īt this point, we are done. HTML input validation is done automatically by the browser based on special attributes on the input element. Enter fullscreen mode Exit fullscreen mode