{"id":284,"date":"2020-06-08T13:09:54","date_gmt":"2020-06-08T04:09:54","guid":{"rendered":"https:\/\/blog.wsd.sh\/?p=284"},"modified":"2020-06-08T13:13:35","modified_gmt":"2020-06-08T04:13:35","slug":"nodejs-book-chapter-7","status":"publish","type":"post","link":"https:\/\/blog.wsd.sh\/?p=284","title":{"rendered":"Nodejs Book: Chapter 7"},"content":{"rendered":"

In the previous chapter we added onto our basic ajax example and added the option
\nto upload a JSON formatted string and parse it on the server. So how do we handle
\nother functionality, like uploading a file? In this example we will make another
\nsimple example, where we make a form to upload a jpg image and save it on the server.
\nOnce the image is saved on the server we will display it on the client.<\/p>\n

\"\"<\/p>\n

- api.js\n+ public\/\n| - upload.html\n| - + js\/\n| --- upload.js\n| - + img\/\n<\/pre>\n
Our directory layout for this example should look like above. We’ll start with
\nthe client code as it hasn’t changed too much from the last chapter.<\/p>\n
File: upload.html<\/p>\n
<!DOCTYPE HTML>\n<html>\n\n    <head>\n\n        <meta charset=\"utf-8\"\/>\n        <title>Ajax Request<\/title>\n\n    <\/head>\n\n    <body>\n\n        <input type=\"file\" id=\"fileUpload\"\/>\n        <button id=\"clickBtn\">Click Me!<\/button><br>\n        <img id=\"responseImage\"><\/img>\n\n        <script type=\"text\/javascript\" src=\"js\/upload.js\"><\/script>\n\n    <\/body>\n\n<\/html>\n<\/pre>\n
For the html side we have a file select input and an image with no src, which
\nwe will replace once our image has uploaded.<\/p>\n
File: js\/upload.js<\/p>\n
\"use strict\";\n\nvar fileUpload = document.getElementById(\"fileUpload\");\nvar clickBtn = document.getElementById(\"clickBtn\");\nvar responseImage = document.getElementById(\"responseImage\");\n\nclickBtn.addEventListener(\"click\", function (event) {\n\n    if(!fileUpload.files.length){\n        alert(\"Please select a file!\");\n        return;\n    }\n\n    var file = fileUpload.files[0];\n    var reader = new FileReader();\n    reader.readAsArrayBuffer(file);\n\n    reader.addEventListener(\"load\", function(event){\n\n        var xml = new XMLHttpRequest();\n        xml.open(\"POST\", \"\/api\/upload\", true);\n        xml.send(event.target.result);\n\n        xml.onload = function() {\n\n            var image = document.createElement(\"img\");\n            image.setAttribute(\"src\", xml.responseText);\n\n            image.onload = function() {\n\n                responseImage.parentNode.replaceChild(image, responseImage);\n                responseImage = image;\n\n            }\n\n        }\n\n    });\n\n});\n<\/pre>\n
Our client side Javascript file has a few more lines added to it. First we check
\nto see if a file has been selected. If not file has been selected, then we don’t
\nattempt to upload anything.<\/p>\n
If a file is selected, then we read it as an ArrayBuffer, and initiate and Ajax
\nrequest. When we send the request, we send the ArrayBuffer we read from the file
\ninput. The concept of an array buffer is a little hard to grasp at first, but ultimately
\nit’s not very difficult. When information is stored on your computer, it’s stored
\nusing a binary sequence of 1’s and 0’s. In the case of images this generally means
\nstoring the red, green and blue values for each pixel in the image.<\/p>\n
When we read and ArrayBuffer, we are simply reading the raw information from the
\nhard drive and keeping it in memory in our client Javascript. When we run
\n“`xml.send()“` with the ArrayBuffer paramter included, we are sending the exact
\ninformation stored on the harddrive on the client computer to the server.<\/p>\n
File: callback.js<\/p>\n
\"use strict\";\n\nconst fs = require(\"fs\");\nconst http = require(\"http\");\nconst uniqid= require(\"uniqid\");\nconst handleFile = require(\"handle-file\");\n\nconst server = http.createServer();\nserver.on(\"request\", handleRequest);\nserver.listen(8080, handleListen);\n\nfunction handleRequest(req, res) {\n\n        console.log(req.method);\n\n        if(req.method === \"GET\") {\n\n                handleFile(req, res);\n\n        } else if(req.method === \"POST\") {\n\n                switch(req.url) {\n                        case \"\/api\/hello\":\n\n                                api_say_hello(req, res);\n\n                        break;\n                        case \"\/api\/upload\":\n\n                                api_upload_file( req, res );\n\n                        break;\n                        default:\n\n                                res.writeHead( 204, { \"Content-Type\" : \"text\/plain\" });\n                                res.end( \"Empty Response\" );\n\n                        break;\n                }\n\n        } else {\n\n                res.writeHead( 204, { \"Content-Type\" : \"text\/plain\" });\n                res.end( \"Empty Response\" );\n\n        }\n\n}\n\nfunction handleListen( ) {\n\n        console.log(\"Server is listening on port 8080\");\n\n}\n\nfunction api_upload_file( req, res ) {\n\n        let str = \"\/img\/\" + uniqid() + \".jpg\";\n        let writeStream = fs.createWriteStream(\".\/public\" + str);\n        req.pipe(writeStream);\n\n        req.on(\"end\", function() {\n\n                res.writeHead(200, { \"Content-Type\" : \"text\/plain\" });\n                res.end(str);\n\n        });\n\n}\n<\/pre>\n
There’s not too many changes. In this case, when we send an ArrayBuffer from the
\nclient to the server, we skip sending the filename. So in this case we use the
\nuniqid library to create a random name for us. The uniqid library can be
\ninstalled with<\/p>\n
 $ npm install uniqid\n<\/pre>\n
Also since we don’t have the file name, we assume a JPG type file. It’s a little
\nprimitive, but we’re still working on a proof of concept. So this amount of functionality
\nis okay for now. As for the file actually being saved to the server, similar to
\nserving files, writing them is largely the same. We pipe the input from the
\nrequest directly to the hard drive. Once we’re done we tell the client where
\nthe image can be loaded from to display on the client.<\/p>\n","protected":false},"excerpt":{"rendered":"
Now that we’ve started to make calls to the server, in this chapter we go over how to upload an image. This consists of taking a file from the client and uploaded it as an http request, and reading the request body on the server and writing the data to a file. <\/p>\n","protected":false},"author":1,"featured_media":249,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false},"categories":[4],"tags":[],"_links":{"self":[{"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/posts\/284"}],"collection":[{"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=284"}],"version-history":[{"count":3,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/posts\/284\/revisions"}],"predecessor-version":[{"id":289,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/posts\/284\/revisions\/289"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/media\/249"}],"wp:attachment":[{"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=284"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=284"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=284"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}