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:

document.getElementById("image-file").value

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 in Java by Rahul
• 8,980 points
15 views

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); 
req.open("POST", '/upload/image'); 
req.send(formData);

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 by Aditya
• 7,280 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,850 points
168 views
+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 58,920 views
0 votes
2 answers

How can I create File and write data in it using Java?

import java.io.BufferedWriter; import java.io.IOException; import java.nio.file.Files; import java.nio.file.Paths; public class WriteFiles{ ...READ MORE

answered Jul 26, 2018 in Java by samarth295
• 2,220 points
1,214 views
0 votes
3 answers

How to read a Text File in Java?

You can use readAllLines and the join method to ...READ MORE

answered Jul 28, 2018 in Java by samarth295
• 2,220 points
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
196 views
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
765 views
+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
230 views
0 votes
1 answer

How do I redirect with JavaScript?

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

answered Feb 16 in Java by Aditya
• 7,280 points
24 views
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 in Java by Aditya
• 7,280 points
1,013 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP