JavaScript Upload file

0 votes

Let's say I have this element on the page:

<input id="image-file" type="file" />

This will create a button that allows the users of the web page to select a file via an OS "File open..." dialog in the browser.

Let's say the user clicks said button, selects a file in the dialog, then clicks the "Ok" button to close the dialog.

The selected file name is now stored in:


Now, let's say that the server handles multi-part POSTs at the URL "/upload/image".

How do I send the file to "/upload/image" and also how do I listen for notification that the file is finished uploading?

Feb 18, 2022 in Java by Rahul
• 9,670 points

1 answer to this question.

0 votes

For a Pure JS, you can use fetch optionally with await-try-catch as mentioned below:-

let photo = document.getElementById("image-file").files[0]; 
let formData = new FormData(); 

formData.append("photo", photo); 
fetch('/upload/image', {method: "POST", body: formData});

Old school approach - xhr

let photo = document.getElementById("image-file").files[0]; // file from input 
let req = new XMLHttpRequest(); 
let formData = new FormData(); 

formData.append("photo", photo);"POST", '/upload/image'); 

Basically, On the server side you can read the original file name (and other info) which is automatically included to request by browser in filename formData parameter.

You do NOT need to set the request header Content-Type to multipart/form-data - this will be set automatically by browser. Instead of /upload/image you can use a full address like http://.../upload/image. If you want to send many files in single request use multiple attribute: <input multiple type=... />, and attach all chosen files to formData in a similar way (e.g. photo2=...files[2];...) You can include additional data (json) to request e.g. let user = {name:'john', age:34} in this way: formData.append("user", JSON.stringify(user)); You can set timeout: for fetch using AbortController, for old approach by xhr.timeout= milisec. This solution should work on all major browsers.

answered Feb 18, 2022 by Aditya
• 7,680 points

Related Questions In Java

0 votes
1 answer

Is it possible to upload a file from desktop to web using Selenide?

Hi, @Nikhil, Yes it's possible to drop a ...READ MORE

answered Dec 16, 2020 in Java by Gitika
• 65,910 points
0 votes
1 answer

How to trigger a file download when clicking an HTML button or JavaScript

You can trigger a download with the ...READ MORE

answered Nov 7, 2022 in Java by Damonlang
• 700 points
0 votes
0 answers

How do I link a JavaScript file to a HTML file?

How should a JavaScript file be linked ...READ MORE

Dec 6, 2022 in Java by Nicholas
• 7,760 points
+5 votes
4 answers

How to execute a python file with few arguments in java?

You can use Java Runtime.exec() to run python script, ...READ MORE

answered Mar 27, 2018 in Java by DragonLord999
• 8,450 points

edited Nov 7, 2018 by Omkar 79,903 views
0 votes
1 answer

Presenting docket dtates inside html page by javascript

Use the Docker Engine Api:Docker Engine API ...READ MORE

answered Jun 20, 2018 in Docker by DareDev
• 6,890 points
0 votes
1 answer

Migrating proxy npm repo in nexus 3

I don't think you can achieve this ...READ MORE

answered Jun 22, 2018 in DevOps Tools by DareDev
• 6,890 points
+1 vote
1 answer

What is the difference between JavaScript and Java

This quote rightly explains that 2 totally ...READ MORE

answered Jun 29, 2018 in Java by Daisy
• 8,120 points
0 votes
1 answer

How do I redirect with JavaScript?

To redirect to another page by Using ...READ MORE

answered Feb 16, 2022 in Java by Aditya
• 7,680 points
0 votes
1 answer

Javascript require() function giving ReferenceError: require is not defined

RequireJS is a JavaScript file and module ...READ MORE

answered Feb 17, 2022 in Java by Aditya
• 7,680 points
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP