Undefined? JavaSript Is Undefined.

So I've been working on a web app for my mom. Nothing too fancy, but it's a store front for her glass art. It's an easy way for her to keep track of inventory, update photos of her products, and for people to shop and search and sort and browse through it. This backend is an HTTP service written in Rust. The frontend is a Vue.js app. I've used Vue and JavaScript many times before but I recently ran into an incredibly strange bug. One that I would have hoped JavaScript would have some guard against. But JavaScript is an undefined language.

I have a small component that uses a file input to collect an image from the user. Then I append that file to a FormData and set that FormData as a Fetch API request body. So I've got fetch API sending multipart/form-data across the network to my backend. Awesome! The backend is supposed to take each field of the request, turn the chunks into a single stream of binary data, and write them out to an image. Everything on the front seems like it's working great, it fires off the request and throws no errors. But then the backend only sees a few bytes of this multi-megabyte image. Not awesome! short chunks on the back-end. The array of data in the API is less than ten bytes long, when this is a many-kilobyte file I'm trying to upload.

At this point I'm relentlessly debugging, trying to find out what's wrong with the API. Why is it truncating the request down to a few bytes, where's the rest of the data? It took me forever to actually inspect what those few bytes are and, lo and behold they're ASCII for undefined The request happily stringified an undefined object, instead of maybe throwing a null reference or undefined error during request creation because that's just what JavaScript does. The linter didn't even catch it.

You can see what the debugging logs looked like on the backend below. Note that the &data is the field that spells out "undefined".

		
[src/handlers.rs:114] &field =
Field: application/octet-stream
  boundary: ---------------------------175314640631070190963311652907
  headers:
    "content-disposition": "form-data; name=\"clu.jpg\""

[src/handlers.rs:119] &chunk = Ok(
    b"undefined",
)
[src/handlers.rs:123] &data = [
    117,
    110,
    100,
    101,
    102,
    105,
    110,
    101,
    100,
]
ImageWrite("The image format could not be determined")
		
	

The working JS is here (it was late at night and I was so donion rings I just fixed it and pushed it without saving the errors for posterity):

	  
let file = event.target.files[0];
if (!file) {
return;
}

const fd = new FormData();
fd.append(file.name, file);

const response = await fetch("http://localhost:8000/photos", {
method: "POST",
body: fd
});
console.log(response);
	  
	  

I've gotten frustrated by JS before but not like this. I don't know if TypeScript would have solved this issue but writing in a language that gets transpiled back into the language I'm trying to avoid doesn't seem like the way forward. I'm looking forward to Web Assembly as a way of using more type-safe languages in the browser.