How to Upload Files From a Webpage
Here are 3 ways to upload files from a webpage: using HTML form, FormData, and showOpenFilePicker API.
Preface
Uploading files is a very common feature on the webpage, especially uploading pictures. Most content-creation websites like Medium, Twitter, StackOverflow, etc. support uploading pictures, compared to plain text, pictures will make the written content easy to understand.
In this article, we will learn 3 ways of uploading files on web pages. And we will use Node.js to implement a file upload server as shown in this post:
HTML Form
On the web page, we can use the <form> element to submit the information entered by the user, such as allowing the user to fill in the username and password when logging in to the website. The <form> element also supports uploading files. Only a few lines of HTML code are needed to implement uploading files. Of course, you need to pay attention to setting the attributes of the <form> element correctly:
We need to set the action , enctype , method . The action will be the URL that processes the form submission. The value of method must be post, otherwise, the form data will be appended to the URL. And the value of enctype must be multipart/form-data when we need to upload files.
Uploading files using the HTML <form> element is very simple and doesn’t even use JavaScript. The shortcomings are also obvious. After submitting the form, the page will jump to a new address, and there will also be a warning in Safari when refreshing the page.
Using JavaScript to submit form data
We can use ajax to implement a form submission to avoid page jumps caused by the HTML <form> elements.
When using JavaScript, we first need to get the uploaded file which can be accessed by listening to the change event of the input, then construct the form data, and finally, use fetch to submit the data.
When a file is selected, it will be automatically uploaded to the server:
In my projects, I use this method to upload files. But if we need to customize the style, we cannot directly implement it through CSS.
The showOpenFilePicker API
With the development of modern web technology, browsers support File System Access API which allows read, write and file management capabilities.
File System Access API has a method showOpenFilePicker that shows a file picker that allows selecting a file or multiple files. We can even use it in Chrome Devtools:
The showOpenFilePicker will return a promise whose fulfillment handler receives an array of FileSystemFileHandle objects.
This method is very convenient but is currently only supported by Chrome and Edge.
Conclusion
In this article, we learn about 3 ways to upload files from a web page. By using HTML <form> element, we can upload files without JavaScript, by using JavaScript, we can customize the interaction of uploading files, the most anticipated is that showOpenFilePicker makes uploading files easier and more scalable.
Hope this article can help you, I am looking forward to you following me for learning more practical tips to become a better developer.
More content at PlainEnglish.io. Sign up for our free weekly newsletter. Follow us on Twitter and LinkedIn. Check out our Community Discord and join our Talent Collective.
