JS - uploading file with web worker 405 error

I am trying to upload multiple files using a web worker in javascript but am getting a 405 error.

This is my index.html file:

<input type="file" id="files" name="files[]" multiple />
<br /><br />
<output id="file_list"></output>
<br /><br />
<output id="messages"></output>

<script>
    var worker = new Worker('file_upload.js');
    worker.onmessage = function(e) {
        document.getElementById('messages').innerHTML += e.data+'<br />';
    }
    worker.onerror = werror;
    function werror(e) {
        console.log('ERROR: Line ', e.lineno, ' in ', e.filename, ': ', e.message);
    }
    function handleFileSelect(evt) {
        evt.stopPropagation();
        evt.preventDefault();
        
        var files = evt.target.files;
        for (var i = 0; i < files.length; i++) {
            file = files[i];
            document.getElementById('file_list').innerHTML += file.name+'<br />'+file.type+' - '+file.size+' bytes<br />';
            worker.postMessage(file);
        }
    }
    document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>

this is the file_upload.js file

function upload(file){
    self.postMessage('uploading');
    
    fetch('/uploads', {
        method: 'PUT',
        body: file,
        headers: {
            "Content-Type": "text/plain"
        }
    })
    .then(response => {
        if(response.ok){
            return response;
        }else{
            throw Error('Server returned '+response.status+' - '+response.statusText);
        }
    })
    .then(response => {
        var response_text = response.text();
        self.postMessage('response '+response_text);
    })
    .catch(error => {
        self.postMessage(error);
    });
}

self.onmessage = function(e){
    self.postMessage('received');
    var file = e.data;
    upload(file);
}

The uploads folder has full permissions for read,write,execute (777)

Any ideas what I am doing wrong here?

from JS - uploading file with web worker 405 error