part 19

So now its on to the image uploading part of the project. As it stands right now, we have a button that when we click on it to choose a file, it opens up model that will have the image in to choose from. For now, I want to figure out how to access that image and then what to do with it once I have it.

To do that, we need to access the image property with our form, and since we already have a post request, if we are to console.log(req.body) we see that object has an image property, but the value will only be the name of that file at this point, unfortunately that wont work.

To get started, in the products view directory we want to look at the form element…

At this point, we only get the property value as the name of the file, so we need to add another property to the form element, the ‘enctype=”” ’ enctype stands for encoding type, it describes how to encode the information, before we transmit it. The default enctype is urlencoded, It basically boils down to making everything safe to transmit through the url, and if you were to use the dev tools, and the network and change the method to GET, you would see that the url now has the form output. Its hard to turn a file, into a string, so we need to use the enctype=”multipart/form-data” and thats it!

…NOT!, As it stands, we set up our bodyparser middleware to handle everything that is urlencoded…

and since we need to send this post not urlencoded, and we want to see some representation that our logic works, lets console.log the image… replace the console log(errors) with req.on(…)… But Before you test this out, if you do… make sure to upload a VERY SMALL file, or it can lock up your terminal!!!

If you do test it out, you should see something like…

Here we can see that the content type of the image, is now listed as image/png instead of the application/json. So now, we need to be able to access the uploaded file. To do that, we are going to add some middleware that handles multipart form-data and extracts the encoded data. First lets install it…

For this we are going to use multer, if you want to know more about it, look at the body-parser at nmpjs.com… Its a good idea at this point.

First, run npm install multer in your terminal, then on the products page require in multer…

then…

Im not explaining that… that docs will!

Then inside the route handler, replace the req.on if you did that, with…

And go through the steps of creating a new product, upload an image file that you have on your computer and…

In the console, there is your image! or the object that represents it. And the last part is saving it to storage. In the route handler now lets set that console log to a variable, and set the buffer toString(base64) this well safely allow us to save the string in our products.json and we will also need access to the title and price through the req.body…

And now, if you are to test it by creating a new product in the browser…

in the products.json file you should see something like..

This is almost done, but now there is a small bug in the middleware that we will pick up on in the next part of the series!