[removed] Upload file
How can you upload a file in JavaScript using modern web APIs?
What methods allow users to select files from their device and send them to a server using HTML forms, JavaScript events, or AJAX requests?
Uploading a file in JavaScript typically involves using an HTML element and then handling the file through JavaScript. Modern web applications often send selected files to a server using FormData and fetch/AJAX for smooth, page-less uploads.
Basic Setup
First, create a file input field in HTML:
Upload Uploading with JavaScript (Fetch + FormData)
document.getElementById("uploadBtn").addEventListener("click", () => {
const file = document.getElementById("fileInput").files[0];
const formData = new FormData();
formData.append("file", file);
fetch("/upload", {
method: "POST",
body: formData
})
.then(response => console.log("Upload successful!"))
.catch(error => console.error("Upload failed:", error));
}); Key Points
- FormData allows you to bundle files and other data easily
- Works with modern servers that accept multipart form uploads
- No page refresh required — improves UX
Supports multiple files if you add:
Optional Enhancements
- Show file name or preview before upload
- Add progress bars using the XMLHttpRequest.upload event
- Validate size and file type before uploading
In short, file upload in JavaScript revolves around a file input element and sending data using FormData with fetch() or AJAX — making the process simple, fast, and user-friendly for modern web applications.