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". Also note that the file picker/FormData was constructed + alright because the key for the image name is correct. +

+ +

+		
+[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. +