jQuery AJAX file upload PHP

Question

I want to implement a simple file upload in my intranet-page, with the smallest setup possible.

This is my HTML part:

Answer 1

Use pure js

async function saveFile() 
{
    let formData = new FormData();           
    formData.append("file", sortpicture.files[0]);
    await fetch('/uploads', {method: "POST", body: formData});    
    alert('works');
}

Upload

Before click upload look on chrome>console>network (in this snipped we will see 404)

The filename is automatically included to request and server can read it, the 'content-type' is automatically set to 'multipart/form-data'. Here is more developed example with error handling and additional json sending

async function saveFile(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); 
       alert('success');
    } 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...