I've been trying to learn JavaScript and I'm completely stuck on an issue. I've been working on a project using Supabase for storage, but I'm getting an HTTP 400 error and can't figure out what I'm doing wrong. I've double-checked the variable names, and the error is driving me insane. Here's the relevant part of my code where I'm trying to upload an image from a virtual wardrobe app:

```javascript
class Wardrobe {
constructor(id) {
this.id = document.getElementById(id);
this.render();
this.supabase = supabase.createClient("project_url","project_key");
this.bindEvents();
}

render() {
this.id.innerHTML = `

Virtual Wardrobe

Add shirt
Add pants
Add shoes
`;
}

bindEvents() {
document.getElementById("add-shirt").onclick = () => this.addItem("shirt");
document.getElementById("add-pants").onclick = () => this.addItem("pants");
document.getElementById("add-shoes").onclick = () => this.addItem("shoes");
}

get_image(data) {
const data_input = document.getElementById(data);
if (!data_input) return null;
return data_input.files[0];
}

async addItem(type) {
const img = this.get_image("image_data");
if (!img) {
alert(`No file selected`);
return;
}

const {data, error} = await this.supabase
.storage
.from("wardrobe")
.upload(`image/testing.jpg`, img);
}
}
new Wardrobe("app");
```

Can anyone help me understand what's wrong?