How to Upload File in JavaScript With Example
This article explains how we can select a file from the file picker dialog and upload the selected file to our server using the fetch method. We need to append our selected file data into a form data object to upload any file on our back-end server storage.
let formData = new FormData();
formData.append('file', fileupload.files[0]);
Upload File Example Using JavaScript in HTML
We will make an input form of “file” type to select a file of any extension from our pc/system storage. There will be a Button to call a function uploadFile() that function will append file data into form data object and simply upload that form data onto our server using fetch method. The fetch method is used in JavaScript for network requesting as API calls for getting OR uploading any data from the front end to the back end.
<!DOCTYPE html>
<html>
<head>
<title>
HTML | File upload example
</title>
<script type="text/javascript">
</script>
</head>
<body>
<h2>Hi Users Choose your file and Click upload.</h2>
<!-- Input Form Elements HTML 5 -->
<input id="fileupload" type="file" name="fileupload" />
<button id="upload-button" onclick="uploadFile()"> Upload file </button>
<!-- File Upload Logic JavaScript -->
<script>
async function uploadFile() {
//creating form data object and append file into that form data
let formData = new FormData();
formData.append("file", fileupload.files[0]);
//network request using POST method of fetch
await fetch('PASTE_YOUR_URL_HERE', {
method: "POST",
body: formData
});
alert('You have successfully upload the file!');
}
</script>
</body>
<html>
In the above HTML page source, you can see simple input form type of file to get the file data from user’s local system storage by clicking on choose file, and there is a Upload file button to call our declared function and proceed with the functionality.
On this front end web page, you can see the name with the extension of your selected file as well.
Here, you can see<script> Tags, which is necessary to use javaScript statements in doctype html. In those tags, We have declared uploadFile().
The function contains a form data object, and the file will be appended into that form data object and call network request with the fetch POST method; the file data will be sent in the form body of network request.
In the next step, function() displays an alert box to the user You have successfully upload the file! if the file uploads successfully.
Alternative Way to Upload/Select File Using JavaScript
You can also achieve the same result as shown below. You can create an <input> element with type="file" by using the document.createElement() method.
We can simply access an <input> element with type="file" by using getElementById() method.
var data = document.getElementById('my_file');
<button onclick="myFunction()">Choose file</button>
<script>
function myTestFunction() {
var data = document.createElement("INPUT");
data.setAttribute("type", "file");
document.body.appendChild(data);
}
</script>
In above examples, var data assigned with a document.createElement("INPUT"); function, where we need to set attribute of data with file type.
In the next step, we need to appendChild with data on document.body.