[removed] Upload file

Question

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

This will create a button that allows the users

Answer 1

Pure JS

You can use fetch optionally with await-try-catch

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

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

async function SavePhoto(inp) 
{
    let user = { name:'john', age:34 };
    let formData = new FormData();
    let photo = inp.files[0];      
         
    formData.append("photo", photo);
    formData.append("user", JSON.stringify(user));  
    
    try {
       let r = await fetch('/upload/image', {method: "POST", body: formData}); 
       console.log('HTTP response code:',r.status); 
    } catch(e) {
       console.log('Huston we have problem...:', e);
    }
    
}

Before selecting the file open chrome console > network tab to see the request details.



Because in this example we send request to https://stacksnippets.net/upload/image the response code will be 404 ofcourse...




(in stack overflow snippets there is problem with error handling, however in jsfiddle version for 404 errors 4xx/5xx are not throwing at all but we can read response status which contains code)

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);

function SavePhoto(e) 
{
    let user = { name:'john', age:34 };
    let xhr = new XMLHttpRequest();
    let formData = new FormData();
    let photo = e.files[0];      
    
    formData.append("user", JSON.stringify(user));   
    formData.append("photo", photo);
    
    xhr.onreadystatechange = state => { console.log(xhr.status); } // err handling
    xhr.open("POST", '/upload/image');    
    xhr.send(formData);
}

Choose file and open chrome console > network tab to see the request details.



Because in this example we send request to https://stacksnippets.net/upload/image the response code will be 404 ofcourse...




(the stack overflow snippets, has some problem with error handling - the xhr.status is zero (instead of 404) which is similar to situation when we run script from file on local disc - so I provide also js fiddle version which shows proper http error code here)

SUMMARY

• In server side you can read original file name (and other info) which is automatically included to request by browser in filename formData parameter.
• You do NOT need to set request header Content-Type to multipart/form-data - this will be set automatically by browser.
• Instead of /upload/image you can use full address like http://.../upload/image.
• If you want to send many files in single request use multiple attribute: , and attach all chosen files to formData in similar way (e.g. photo2=...files[2];... formData.append("photo2", photo2);)
• 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));
• This solutions should work on all major browsers.