diff options
Diffstat (limited to 'posts/2021-01-28-undefined-javasript-is-undefined.html')
| -rw-r--r-- | posts/2021-01-28-undefined-javasript-is-undefined.html | 163 |
1 files changed, 0 insertions, 163 deletions
diff --git a/posts/2021-01-28-undefined-javasript-is-undefined.html b/posts/2021-01-28-undefined-javasript-is-undefined.html deleted file mode 100644 index 219b379..0000000 --- a/posts/2021-01-28-undefined-javasript-is-undefined.html +++ /dev/null @@ -1,163 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> - <head> - <link rel="stylesheet" href="/includes/stylesheet.css" /> - <meta charset="utf-8" /> - <meta name="viewport" content="width=device-width, initial-scale=1" /> - <meta - property="og:description" - content="The World Wide Web pages of Adam Carpenter" - /> - <meta - property="og:image" - content="https://nextcloud.53hor.net/index.php/s/Nx9e7iHbw4t99wo/preview" - /> - <meta property="og:site_name" content="53hor.net" /> - <meta property="og:title" content="Undefined? JavaSript Is Undefined." /> - <meta property="og:type" content="website" /> - <meta property="og:url" content="https://www.53hor.net" /> - <title>53hornet ➙ Undefined? JavaSript Is Undefined.</title> - </head> - - <body> - <nav> - <ul> - <li> - <a href="/"> - <img alt="home" src="/includes/icons/home-roof.svg" /> - Home - </a> - </li> - <li> - <a href="/info.html"> - <img alt="information" src="/includes/icons/information-variant.svg" /> - Info - </a> - </li> - <li> - <a href="https://git.53hor.net"> - <img alt="git" src="/includes/icons/git.svg" /> - Repos - </a> - </li> - <li> - <a href="/software.html"> - <img alt="software" src="/includes/icons/floppy-variant.svg" /> - Software - </a> - </li> - <li> - <a type="application/rss+xml" href="/rss.xml"> - <img alt="rss" src="/includes/icons/rss.svg" /> - RSS - </a> - </li> - </ul> - </nav> - - <article> - <h1>Undefined? JavaSript Is Undefined.</h1> - - <p class="description"> - 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. - </p> - - <p> - 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. - </p> - - <p> - 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 - <code>undefined</code> The request happily stringified an - <code>undefined</code> object, instead of maybe throwing a null - reference or undefined error during request creation because that's just - what JavaScript does. <em>The linter didn't even catch it.</em> - </p> - - <p> - You can see what the debugging logs looked like on the backend below. - Note that the <code>&data</code> 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. - </p> - - <pre> - <code> -[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") - </code> - </pre> - - <p> - The <em>working</em> 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): - </p> - - <pre> - <code> -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); - </code> - </pre> - <p> - 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. - </p> - </article> - </body> -</html> |