![]() The ‘th’ function is adjusted to handle this situation of the sessionID coming in the ‘req.body’ object (which happens when the sessionID is sent as Multer metadata). During this process, I also access the browser’s localStorage, which contains the sessionID (discussed in part 3) to send the ID, so that the route can be authenticated. This way, the image and metadata from the front-end is sent together in the HTML POST executed when the form is submitted. For example, to get the cropping data from ng-cropper, I create a hidden attribute of the form which is an object that contains all of the cropping data. The image is simply one kind of input into this form, and so we can add other attributes to the form as well. Multer itself simply uploads any kind of form that is of the type. This metadata that Multer receives will be crucial during the cropping process. ![]() The route itself can only retrieve a few attributes of the image before the image upload is complete. This function only executes after the image upload is complete (when done is true), and Multer has stored it in the uploads folder specified in the app.js setup. There’s an API endpoint that handles the image cropping and image downsizing (using the setup we did earlier), and most of its work occurs in the ‘Picture.attempt’ function. Once this occurs, we can safely access the file and do the necessary cropping and downsizing of the image. The part we care about most is when the upload of an image is complete, which is indicated by a variable called ‘done’. The setup of the Multer module is done in the app.js file, and it will help indicate how far along an image is in the upload process. To download the module, run the command below. Multer is a node module that we use to store the images that are posted from the front-end, into a folder on our server. Setting up the Multer module is an important part of this process. This blog post covers the process of passing the image from front-end to back-end, including cropping and formatting. There was also the need to choose what format to store these images in (base64), out of many different approaches. This required a cropping module for Angular.js, ng-cropper, as well as a way to resize the image to the new-found dimensions on the back-end provided by graphicsMagick. There was the necessity for cropping, so that users have the most control over their images. This was a struggle because there are many different parts (front-end and back-end) that must come together for this process. One of the most difficult parts of building Touchbase was creating a way to store images. For this, we must be able to upload images, and crop them so they are all of a uniform shape. Now that we can create a user, and allow them to login, it would be ideal to associate a profile picture to this user. We then had part 3 which covered session-based user authentication. So far, Part 0 and Part 1 cover the data model and user document used in the application followed by Part 2 where we verify accounts through email using Nodemailer and Sendgrid.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |