So Here is a quick overview of my project:
Trying to develop a file uploading site (user uploads a file to a server, and that server gives them a link that they can share with friends)... (concept very similar to https://wormhole.app/)
Any time I try to upload a file to another server, (such as a heroku server), I get a CORS error. The next thing I tried was hosting a web server through vs code with the "live server" extension. I set the target upload server to my own host machine, and I was able to get rid of the cors error, but now I get a 405 error and sometimes this: "Uncaught DOMException: Failed to execute 'open' on 'XMLHttpRequest': Invalid URL at uploadFile"
ALSO: here is a link to the github repo if you wanna see all of the code: https://github.com/TheAniMob/theanimob.github.io
If you would like to se an example of the website, so you can inspect and test for yourself, you can visit: https://theanimob.github.io
FYI the code in the github is a slightly older version which is pointing to the heroku app (there still may be CORS ERRORS)
Any help would be greatly appreciated, as I've been stuck on this one aspect of my project for a while now and I feel like pulling my hair out
At the bottom of this post is my "index.js" code:
const browseBtn = document.querySelector(".browseBtn");
const fileInput = document.querySelector("#fileInput");
const host = "http://127.0.0.1:5500/" // change this to website address
const uploadURL = `${host}api/files`;
// const uploadURL = `${host}api/files`;
dropZone.addEventListener("dragover", (e)=>{
e.preventDefault()
if (!dropZone.classList.contains("dragged")) {
dropZone.classList.add("dragged");
}
});
dropZone.addEventListener("dragleave", ()=>{
dropZone.classList.remove("dragged")
});
dropZone.addEventListener("drop", (e)=>{
e.preventDefault();
dropZone.classList.remove("dragged");
const files = e.dataTransfer.files
console.table(files);
if (files.length) {
fileInput.files = files;
uploadFile()
}
});
browseBtn.addEventListener("click", ()=>{
fileInput.click();
});
const uploadFile = ()=>{
const file = fileInput.files[0]
const formData = new FormData()
formData.append("myfile", file)
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
console.log(xhr.readyState)
};
xhr.open("POST", uploadURL);
xhr.send(formData)
};