Hi, I'm trying to save an image file but struggling to get to the actual saving. I'm using Javascript to control my drag and drop at the moment so we get a progress bar that shows up but I'm struggling to actually save the file anywhere. Ideally I'd want to save the file to a "/uploads" folder.

My drag and drop script is `const dropzone = document.getElementById('dropzone'); const browseButton = document.getElementById('browse-button'); const fileContainer = document.getElementById('file');

// Handle drag and drop events dropzone.addEventListener('dragenter', onDragEnter); dropzone.addEventListener('dragleave', onDragLeave); dropzone.addEventListener('dragover', onDragOver); dropzone.addEventListener('drop', onDrop);

// Handle browse button events browseButton.addEventListener('change', onFileSelected);

function onDragEnter(e) { e.preventDefault(); dropzone.classList.add('dragging'); }

function onDragLeave(e) { e.preventDefault(); dropzone.classList.remove('dragging'); }

function onDragOver(e) { e.preventDefault(); }

function onDrop(e) { e.preventDefault(); dropzone.classList.remove('dragging'); const file = e.dataTransfer.files[0]; handleFile(file); }

function onFileSelected(e) { const file = e.target.files[0]; handleFile(file); }

function handleFile(file) { if (!file) return;

const fileItem = createFileItem(file);
fileContainer.appendChild(fileItem);
uploadFile(file, fileItem);

}

function createFileItem(file) { const fileItem = document.createElement('div'); fileItem.classList.add('file-item');

const image = document.createElement('img');
image.src="/images/image-fill.svg"

const fileName = document.createElement('div');
fileName.classList.add('file-name');
const fileNameContent = document.createElement('span');
fileNameContent.textContent = file.name;
fileItem.appendChild(fileName);
fileName.appendChild(image);
fileName.appendChild(fileNameContent);




const progressBar = document.createElement('div');
progressBar.classList.add('progress-bar');
const progress = document.createElement('div');
progress.classList.add('progress');
progressBar.appendChild(progress);
fileItem.appendChild(progressBar);

const tickCross = document.createElement('img');
tickCross.classList.add('File-Tick-Cross');
fileItem.appendChild(tickCross);
return fileItem;

}

function uploadFile(file, fileItem) { const formData = new FormData(); formData.append('file', file);

const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload');
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
console.log(formData.get("file"));
console.log("https://www.moirae.co.uk/favicon.png");
xhr.upload.onprogress = (e) => {
  if (e.lengthComputable) {
    const percentComplete = (e.loaded / e.total) * 100;
    updateProgress(fileItem, percentComplete);
  }
};
xhr.onload = () => {
    var tickCross = fileItem.getElementsByClassName("File-Tick-Cross");
  if (xhr.status === 200) {
    console.log(`File "${file.name}" uploaded successfully.`);
    tickCross[0].src ="@tick";

  } else {
    console.error(`Failed to upload file "${file.name}".`);
    tickCross[0].src="@cross";
  }
};
xhr.send(formData);

}

function updateProgress(fileItem, percentComplete) { const progress = fileItem.querySelector('.progress'); progress.style.width = ${percentComplete}%; }`