title
Node.js Image Uploading With Multer

description
In this project we will look at file/image uploading in Node.js with the Multer module. We will also be using the EJS template engine and MaterializeCSS for the form UI. SPONSOR: Check out Coding Dojo - http://www.codingdojo.com/l/yt/trs CODE: Github Repo https://github.com/bradtraversy/nodeuploads BECOME A PATRON: Show support & get perks! http://www.patreon.com/traversymedia ONE TIME DONATIONS: http://www.paypal.me/traversymedia VISIT MY WEBISTE: http://www.traversymedia.com $15 COUPON LINKS FOR ALL MY UDEMY COURSES: https://www.udemy.com/nodejs-express-mongodb-dev-to-deployment/?couponCode=TMWEBSITENODE https://www.udemy.com/bootstrap-4-from-scratch-with-5-projects/?couponCode=TMWEBSITEBOOTSTRAP https://www.udemy.com/angular-4-front-to-back/?couponCode=TMWEBSITEANGULAR FOLLOW TRAVERSY MEDIA: http://www.facebook.com/traversymedia http://www.twitter.com/traversymedia http://www.instagram.com/traversymedia https://discord.gg/traversymedia

detail
{'title': 'Node.js Image Uploading With Multer', 'heatmap': [{'end': 1084.504, 'start': 1025.099, 'weight': 0.924}, {'end': 1186.657, 'start': 1093.874, 'weight': 0.845}, {'end': 1275.133, 'start': 1248.935, 'weight': 0.806}], 'summary': 'Explores node.js image uploading using the popular multer module, covering challenges with json files, setting up node.js file uploads, incorporating materialize css for file upload, implementing disk storage engine, handling file uploads in node.js, and demonstrating image upload and validation with a one megabyte size limit and file type restriction.', 'chapters': [{'end': 91.453, 'segs': [{'end': 47.657, 'src': 'embed', 'start': 7.782, 'weight': 0, 'content': [{'end': 8.543, 'text': "Hey, what's up, guys?", 'start': 7.782, 'duration': 0.761}, {'end': 19.372, 'text': "so uploading files and images is an important part of app development and I realize that I don't really have any tutorials showing you guys how to properly upload images in Node.js.", 'start': 8.543, 'duration': 10.829}, {'end': 24.296, 'text': "so in this guide we're going to explore the Malter module, which is pretty powerful and,", 'start': 19.372, 'duration': 4.924}, {'end': 28.44, 'text': "I'd say probably the most popular way to upload files locally.", 'start': 24.296, 'duration': 4.144}, {'end': 36.907, 'text': 'And I wanted to create this tutorial because the documentation for Malta, although it has a lot of information as far as the API goes,', 'start': 29.28, 'duration': 7.627}, {'end': 38.849, 'text': "it doesn't really give you any full examples.", 'start': 36.907, 'duration': 1.942}, {'end': 40.65, 'text': "So that's what we're going to do.", 'start': 39.449, 'duration': 1.201}, {'end': 45.014, 'text': "We're going to just create this little application here where we can upload a file.", 'start': 40.67, 'duration': 4.344}, {'end': 47.657, 'text': "We're using a materialized CSS UI.", 'start': 45.094, 'duration': 2.563}], 'summary': 'Guide on uploading images in node.js using the powerful multer module.', 'duration': 39.875, 'max_score': 7.782, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9Qzmri1WaaE/pics/9Qzmri1WaaE7782.jpg'}, {'end': 95.854, 'src': 'embed', 'start': 68.533, 'weight': 2, 'content': [{'end': 71.616, 'text': "Now if you upload the same file, it'll just get renamed.", 'start': 68.533, 'duration': 3.083}, {'end': 74.98, 'text': 'You can see it has just a timestamp on the end of it.', 'start': 71.656, 'duration': 3.324}, {'end': 81.286, 'text': 'Not the most elegant solution to rename, but if we have enough time, I will show you a better way to do it.', 'start': 75.44, 'duration': 5.846}, {'end': 85.331, 'text': 'And of course, we did implement some safeguards, like if we..', 'start': 82.267, 'duration': 3.064}, {'end': 87.192, 'text': 'Let me just refresh this.', 'start': 86.171, 'duration': 1.021}, {'end': 91.453, 'text': "If we try to submit without choosing a file, it'll tell us to choose a file.", 'start': 87.432, 'duration': 4.021}, {'end': 95.854, 'text': "If we choose a JSON file, something that's not an image, it's not going to let us.", 'start': 91.853, 'duration': 4.001}], 'summary': 'File uploads renamed with timestamp, safeguards implemented for file selection and type validation.', 'duration': 27.321, 'max_score': 68.533, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9Qzmri1WaaE/pics/9Qzmri1WaaE68533.jpg'}], 'start': 7.782, 'title': 'Node.js image upload with multer', 'summary': 'Explores the popular multer module for uploading files in node.js, creating a tutorial with materialized css ui and ejs template engine to upload and display images, showcasing the file renaming mechanism and implemented safeguards.', 'chapters': [{'end': 91.453, 'start': 7.782, 'title': 'Node.js image upload with multer', 'summary': 'Explores the popular multer module for uploading files in node.js, creating a tutorial with materialized css ui and ejs template engine to upload and display images, showcasing the file renaming mechanism and implemented safeguards.', 'duration': 83.671, 'highlights': ['The chapter explores the popular Multer module for uploading files in Node.js Multer module is highlighted as the most popular way to upload files in Node.js.', 'Creating a tutorial with materialized CSS UI and ejs template engine to upload and display images The tutorial showcases the use of materialized CSS UI and ejs template engine for uploading and displaying images.', 'Showcasing the file renaming mechanism and implemented safeguards Demonstrates the file renaming mechanism and implemented safeguards, such as prompting to choose a file and handling file name collisions.']}], 'duration': 83.671, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9Qzmri1WaaE/pics/9Qzmri1WaaE7782.jpg', 'highlights': ['Multer module is highlighted as the most popular way to upload files in Node.js.', 'The tutorial showcases the use of materialized CSS UI and ejs template engine for uploading and displaying images.', 'Demonstrates the file renaming mechanism and implemented safeguards, such as prompting to choose a file and handling file name collisions.']}, {'end': 508.642, 'segs': [{'end': 133.241, 'src': 'embed', 'start': 91.853, 'weight': 0, 'content': [{'end': 95.854, 'text': "If we choose a JSON file, something that's not an image, it's not going to let us.", 'start': 91.853, 'duration': 4.001}, {'end': 96.875, 'text': "It'll give us an error.", 'start': 95.934, 'duration': 0.941}, {'end': 103.437, 'text': "We have size limits, so I'm going to show you quite a few things with Malter.", 'start': 97.335, 'duration': 6.102}, {'end': 104.957, 'text': "All right, so that's it.", 'start': 103.837, 'duration': 1.12}, {'end': 106.178, 'text': "Let's go ahead and get started.", 'start': 104.977, 'duration': 1.201}, {'end': 111.9, 'text': 'coding dojo is a programming school that turns beginners into developers in only 14 weeks,', 'start': 106.798, 'duration': 5.102}, {'end': 118.082, 'text': 'over 90 of their grads land jobs within three months of graduating, often making over 70k per year.', 'start': 111.9, 'duration': 6.182}, {'end': 121.843, 'text': 'to learn more, visit codingdojo.com or click the link in the description below.', 'start': 118.082, 'duration': 3.761}, {'end': 126.037, 'text': "All right guys, so don't let the fact that I'm on Linux throw you off.", 'start': 123.376, 'duration': 2.661}, {'end': 127.918, 'text': 'I actually created this on Windows.', 'start': 126.097, 'duration': 1.821}, {'end': 129.279, 'text': 'I just felt like using Linux.', 'start': 127.978, 'duration': 1.301}, {'end': 131.14, 'text': 'So this is completely cross-platform.', 'start': 129.318, 'duration': 1.822}, {'end': 133.241, 'text': 'I just have VS Code open.', 'start': 131.78, 'duration': 1.461}], 'summary': 'Coding dojo transforms beginners into developers in 14 weeks, with over 90% of grads landing jobs, often making over 70k per year.', 'duration': 41.388, 'max_score': 91.853, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9Qzmri1WaaE/pics/9Qzmri1WaaE91853.jpg'}, {'end': 214.675, 'src': 'embed', 'start': 164.973, 'weight': 2, 'content': [{'end': 168.114, 'text': "So we're going to need a couple dependencies here.", 'start': 164.973, 'duration': 3.141}, {'end': 171.755, 'text': "So let's do npm install dash dash save.", 'start': 168.314, 'duration': 3.441}, {'end': 173.116, 'text': 'We want express.', 'start': 171.995, 'duration': 1.121}, {'end': 177.317, 'text': "We want ejs, which is the template engine we're using.", 'start': 174.176, 'duration': 3.141}, {'end': 178.438, 'text': 'Really easy to set up.', 'start': 177.377, 'duration': 1.061}, {'end': 181.339, 'text': 'And then we want multr for file uploads.', 'start': 178.958, 'duration': 2.381}, {'end': 184.8, 'text': 'Those are the three dependencies that we want.', 'start': 182.279, 'duration': 2.521}, {'end': 188.357, 'text': "All right, I'm also going to create a start script.", 'start': 186.516, 'duration': 1.841}, {'end': 194.842, 'text': "I'm just going to replace test with start, and we'll set that to node app.js.", 'start': 188.557, 'duration': 6.285}, {'end': 197.704, 'text': 'That way you can run your application with npm start.', 'start': 194.882, 'duration': 2.822}, {'end': 203.167, 'text': "Now, I like to use nodemon, so I don't have to keep refreshing my server every time I make a change.", 'start': 198.444, 'duration': 4.723}, {'end': 205.048, 'text': "So let's clear that out.", 'start': 203.788, 'duration': 1.26}, {'end': 208.11, 'text': "Let's install nodemon globally.", 'start': 205.509, 'duration': 2.601}, {'end': 214.675, 'text': "I'm on Linux, so I have to say sudo npm install dash g nodemon.", 'start': 208.251, 'duration': 6.424}], 'summary': 'Setting up npm dependencies: express, ejs, multr and nodemon for server with start script.', 'duration': 49.702, 'max_score': 164.973, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9Qzmri1WaaE/pics/9Qzmri1WaaE164973.jpg'}, {'end': 285.758, 'src': 'embed', 'start': 242.731, 'weight': 4, 'content': [{'end': 248.635, 'text': "You guys should probably learn that first before you start dealing with file uploads, if you don't know that already.", 'start': 242.731, 'duration': 5.904}, {'end': 250.716, 'text': "So we're going to bring in Express.", 'start': 249.235, 'duration': 1.481}, {'end': 258.101, 'text': 'Require Express.', 'start': 254.158, 'duration': 3.943}, {'end': 261.623, 'text': "We're also going to bring in Malta.", 'start': 258.281, 'duration': 3.342}, {'end': 276.093, 'text': "All right, let's bring in EJS, which is embedded JavaScript, that's our template engine.", 'start': 269.11, 'duration': 6.983}, {'end': 285.758, 'text': "And we're also going to bring in the path module, which is a core node js module.", 'start': 276.113, 'duration': 9.645}], 'summary': 'Introducing express, malta, ejs, and path module for file uploads.', 'duration': 43.027, 'max_score': 242.731, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9Qzmri1WaaE/pics/9Qzmri1WaaE242731.jpg'}, {'end': 455.426, 'src': 'embed', 'start': 403.307, 'weight': 5, 'content': [{'end': 405.929, 'text': 'I also want to set a static folder.', 'start': 403.307, 'duration': 2.622}, {'end': 412.871, 'text': "Okay, we're going to set it to public, to a folder called public.", 'start': 408.965, 'duration': 3.906}, {'end': 422.387, 'text': 'So we can do that with app.use express.static, and we want that to be .slash public.', 'start': 413.492, 'duration': 8.895}, {'end': 423.841, 'text': 'All right.', 'start': 423.581, 'duration': 0.26}, {'end': 428.004, 'text': "So it's just going to look at, we're going to create a folder called public and that's going to be static.", 'start': 423.921, 'duration': 4.083}, {'end': 432.907, 'text': 'So we can, for instance, we can go to, you know, our application, local host 3000 slash.', 'start': 428.064, 'duration': 4.843}, {'end': 440.371, 'text': "And then if we had like a CSS folder in there, we could go to slash CSS styles, whatever, uh, where that's where we're going to put our images.", 'start': 433.347, 'duration': 7.024}, {'end': 445.054, 'text': "Okay We're going to create a file, a folder called uploads inside of the public folder.", 'start': 440.391, 'duration': 4.663}, {'end': 446.775, 'text': "So let's go ahead and save this.", 'start': 445.635, 'duration': 1.14}, {'end': 449.557, 'text': "And we're going to create a couple folders over here.", 'start': 447.576, 'duration': 1.981}, {'end': 450.558, 'text': "Let's create public.", 'start': 449.577, 'duration': 0.981}, {'end': 455.426, 'text': "And inside public, we'll create uploads.", 'start': 453.081, 'duration': 2.345}], 'summary': "Setting public folder to 'public' for static content, including 'uploads'.", 'duration': 52.119, 'max_score': 403.307, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9Qzmri1WaaE/pics/9Qzmri1WaaE403307.jpg'}], 'start': 91.853, 'title': 'Challenges with json files and setting up node.js file uploads', 'summary': 'Discusses challenges of working with json files, such as size limits and platform flexibility, and promotes coding dojo, a programming school with over 90% of graduates securing jobs within three months. it also details setting up a node.js application for file uploads, including creating package.json file, installing dependencies, and configuring necessary folders for uploads.', 'chapters': [{'end': 133.241, 'start': 91.853, 'title': 'Working with json files in coding dojo', 'summary': 'Discusses the challenges of working with json files, emphasizing the size limits and platform flexibility, while promoting coding dojo, a programming school, boasting a high job placement rate, with over 90% of graduates securing jobs within three months, often making over 70k per year.', 'duration': 41.388, 'highlights': ['Coding Dojo graduates have a high job placement rate, with over 90% securing jobs within three months of graduating, often making over 70k per year. Coding Dojo is a programming school that turns beginners into developers in only 14 weeks, with over 90% of their grads landing jobs within three months of graduating, often making over 70k per year.', "Emphasizing the challenges of working with JSON files, particularly regarding size limits and platform flexibility. The speaker discusses the challenges of working with JSON files, highlighting the size limits and platform flexibility, noting that it's completely cross-platform."]}, {'end': 508.642, 'start': 133.261, 'title': 'Node file uploads', 'summary': 'Details the process of setting up a node.js application for file uploads, including creating a package.json file, installing dependencies like express, ejs, and multr, setting up start script with nodemon, creating the main app.js file, configuring the view engine and static folder, and creating necessary folders for uploads.', 'duration': 375.381, 'highlights': ['Creating a package.json file with npm init and installing necessary dependencies like express, ejs, and multr. The chapter begins by creating a package.json file with npm init and installing dependencies such as express, ejs, and multr.', 'Setting up a start script with nodemon for automatic server refreshing. The process includes setting up a start script with nodemon to enable automatic server refreshing.', 'Creating the main app.js file and specifying the required modules like Express, Multr, EJS, and path. The main app.js file is created and includes the specification of required modules such as Express, Multr, EJS, and path.', 'Configuring the view engine and setting a static folder for the application. The chapter explains configuring the view engine and setting a static folder for the application.', "Creating necessary folders for uploads, including a 'public' folder and an 'uploads' folder inside it. It also involves creating necessary folders for uploads, such as a 'public' folder and an 'uploads' folder inside it."]}], 'duration': 416.789, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9Qzmri1WaaE/pics/9Qzmri1WaaE91853.jpg', 'highlights': ['Coding Dojo graduates have a high job placement rate, with over 90% securing jobs within three months of graduating, often making over 70k per year.', 'Emphasizing the challenges of working with JSON files, particularly regarding size limits and platform flexibility.', 'Creating a package.json file with npm init and installing necessary dependencies like express, ejs, and multr.', 'Setting up a start script with nodemon for automatic server refreshing.', 'Creating the main app.js file and specifying the required modules like Express, Multr, EJS, and path.', 'Configuring the view engine and setting a static folder for the application.', "Creating necessary folders for uploads, including a 'public' folder and an 'uploads' folder inside it."]}, {'end': 762.067, 'segs': [{'end': 597.593, 'src': 'embed', 'start': 538.277, 'weight': 0, 'content': [{'end': 541.159, 'text': "And then the JavaScript, which is right here, we're going to copy.", 'start': 538.277, 'duration': 2.882}, {'end': 543.781, 'text': "And we're going to put that right above the ending body tag.", 'start': 541.179, 'duration': 2.602}, {'end': 545.902, 'text': 'now materialize.', 'start': 544.361, 'duration': 1.541}, {'end': 549.843, 'text': 'the javascript for materialize needs jquery.', 'start': 545.902, 'duration': 3.941}, {'end': 552.304, 'text': "so let's go ahead and search for jquery.", 'start': 549.843, 'duration': 2.461}, {'end': 559.547, 'text': "cdn this first link here and we're going to get the minified version of jquery3.", 'start': 552.304, 'duration': 7.243}, {'end': 567.121, 'text': "so we'll just need to copy this script tag here And then we can close that up.", 'start': 559.547, 'duration': 7.574}, {'end': 570.303, 'text': "Let's paste that right above the materialized script.", 'start': 567.221, 'duration': 3.082}, {'end': 571.903, 'text': "Make sure it's above it.", 'start': 570.983, 'duration': 0.92}, {'end': 576.506, 'text': 'And then that should be good as far as, you know, including scripts.', 'start': 573.164, 'duration': 3.342}, {'end': 586.872, 'text': "So inside the body, let's put a class of container, which will move everything into the middle.", 'start': 577.587, 'duration': 9.285}, {'end': 588.593, 'text': "Then we're going to put an H1.", 'start': 587.312, 'duration': 1.281}, {'end': 591.094, 'text': "We'll say file upload.", 'start': 589.493, 'duration': 1.601}, {'end': 596.653, 'text': 'I cannot spell file upload.', 'start': 594.352, 'duration': 2.301}, {'end': 597.593, 'text': 'All right.', 'start': 596.673, 'duration': 0.92}], 'summary': 'Adding javascript and jquery for materialize framework and setting up container class and h1 for file upload.', 'duration': 59.316, 'max_score': 538.277, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9Qzmri1WaaE/pics/9Qzmri1WaaE538277.jpg'}, {'end': 733.683, 'src': 'embed', 'start': 625.78, 'weight': 3, 'content': [{'end': 629.922, 'text': 'so we basically want to just grab this all right.', 'start': 625.78, 'duration': 4.142}, {'end': 637.005, 'text': "so we'll copy that, we'll put that right in here and then we want to just add a couple things for the action.", 'start': 629.922, 'duration': 7.083}, {'end': 642.467, 'text': "it's going to go to slash upload, okay, and it's going to be a.", 'start': 637.005, 'duration': 5.462}, {'end': 647.769, 'text': "it's going to have a method of post.", 'start': 642.467, 'duration': 5.302}, {'end': 654.255, 'text': "Okay, so in our app js file, we're going to have to handle a post request to slash upload.", 'start': 648.049, 'duration': 6.206}, {'end': 657.978, 'text': 'Alright, now in this input right here, we need to add a name.', 'start': 654.875, 'duration': 3.103}, {'end': 660.741, 'text': 'You can call this whatever you want.', 'start': 659.119, 'duration': 1.622}, {'end': 664.364, 'text': "I'm going to call it my image like that.", 'start': 661.101, 'duration': 3.263}, {'end': 668.928, 'text': "And then let's see, I'm also going to make the upload button gray.", 'start': 665.265, 'duration': 3.663}, {'end': 672.41, 'text': "So I'm just going to add the class gray to this BTN.", 'start': 669.028, 'duration': 3.382}, {'end': 674.791, 'text': 'And then we just need to submit button.', 'start': 673.13, 'duration': 1.661}, {'end': 678.412, 'text': "So let's go down right above the ending form.", 'start': 674.871, 'duration': 3.541}, {'end': 694.877, 'text': "And we're going to put in a button, the type of submit, give it a class of BTN, save, and let's reload our app.", 'start': 679.552, 'duration': 15.325}, {'end': 696.017, 'text': 'And it should look like this.', 'start': 695.077, 'duration': 0.94}, {'end': 697.322, 'text': 'All right.', 'start': 697.042, 'duration': 0.28}, {'end': 699.985, 'text': "Now we're going to need an output for our messages.", 'start': 697.843, 'duration': 2.142}, {'end': 705.131, 'text': "OK, we want like file uploaded or if it's an error, we want it to output there.", 'start': 700.005, 'duration': 5.126}, {'end': 711.017, 'text': 'So right below the H1 EJS works with a syntax like this.', 'start': 705.631, 'duration': 5.386}, {'end': 716.743, 'text': 'So an angle bracket and then percentage equals and then we can put basically JavaScript.', 'start': 711.077, 'duration': 5.666}, {'end': 725.694, 'text': "So we're going to use a shorthand if statement, we're gonna use a ternary operator here to see if there's a message variable.", 'start': 717.424, 'duration': 8.27}, {'end': 727.956, 'text': "All right, we're going to see if it's undefined.", 'start': 725.714, 'duration': 2.242}, {'end': 733.683, 'text': "So we're going to say type of MSG, which will be the name of the variable.", 'start': 727.996, 'duration': 5.687}], 'summary': 'Adding file upload functionality to the app with post request and message output.', 'duration': 107.903, 'max_score': 625.78, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9Qzmri1WaaE/pics/9Qzmri1WaaE625780.jpg'}], 'start': 510.824, 'title': 'Materialize css file upload and message output', 'summary': 'Covers incorporating materialize css for file upload, including adding materialize cdn links, utilizing jquery, and creating a file upload component. it also discusses creating a file upload feature and message output, including specifying the action, adding input and buttons, and implementing conditional message display using a ternary operator.', 'chapters': [{'end': 625.78, 'start': 510.824, 'title': 'Materialize css file upload', 'summary': 'Covers the process of incorporating materialize css into a web page to enable file upload functionality, including adding materialize cdn links for css and javascript, as well as utilizing jquery for materialize javascript and creating a file upload component.', 'duration': 114.956, 'highlights': ['Incorporating Materialize CSS into a web page The chapter discusses the process of using Materialize CSS for web development to enable various components, including a file upload feature.', 'Adding Materialize CDN links for CSS and JavaScript The chapter emphasizes the importance of including Materialize CSS and JavaScript by utilizing the Materialize CDN links to enhance the visual and interactive aspects of the web page.', 'Utilizing jQuery for Materialize JavaScript The chapter stresses the requirement of using jQuery for Materialize JavaScript functionality and demonstrates the process of integrating jQuery by adding the minified version script tag.', 'Creating a file upload component The chapter illustrates the creation of a file upload component using Materialize CSS, providing instructions on how to incorporate the file input feature into a web page.']}, {'end': 762.067, 'start': 625.78, 'title': 'Creating file upload and message output', 'summary': 'Discusses the process of creating a file upload feature and message output in an app, including specifying the action, adding input and buttons, and implementing conditional message display using a ternary operator.', 'duration': 136.287, 'highlights': ['The process of creating a file upload feature and message output in an app is discussed. This includes specifying the action, adding input and buttons, and implementing conditional message display using a ternary operator.', "Specifying the action for file upload with a method of post to slash upload. The specified action for file upload is 'slash upload' with a method of post.", "Adding input with a name for the file and styling the upload button. The input for the file is added with a specified name, and the upload button is styled by adding the class 'gray' to it.", 'Implementing conditional message display using a ternary operator. Conditional message display is implemented using a ternary operator to check if the message variable is undefined and display the message accordingly.']}], 'duration': 251.243, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9Qzmri1WaaE/pics/9Qzmri1WaaE510824.jpg', 'highlights': ['Creating a file upload component using Materialize CSS', 'Adding Materialize CDN links for CSS and JavaScript', 'Utilizing jQuery for Materialize JavaScript', 'Specifying the action for file upload with a method of post to slash upload', 'Implementing conditional message display using a ternary operator', 'Adding input with a name for the file and styling the upload button', 'The process of creating a file upload feature and message output in an app is discussed']}, {'end': 988.703, 'segs': [{'end': 794.808, 'src': 'embed', 'start': 762.147, 'weight': 0, 'content': [{'end': 765.29, 'text': "Good So now we'll go back to our app.js.", 'start': 762.147, 'duration': 3.143}, {'end': 769.474, 'text': 'Now with Malter, we need to create a storage engine.', 'start': 765.991, 'duration': 3.483}, {'end': 774.179, 'text': "And we're going to use something called disk storage, which is part of Malter.", 'start': 770.715, 'duration': 3.464}, {'end': 779.083, 'text': "So right under where we brought in everything, let's say set disk.", 'start': 774.779, 'duration': 4.304}, {'end': 781.763, 'text': 'storage engine.', 'start': 780.763, 'duration': 1}, {'end': 784.324, 'text': "Now there's different ways to do different things with Malta.", 'start': 781.803, 'duration': 2.521}, {'end': 786.465, 'text': "I'm going to show you what I think is the best way.", 'start': 784.344, 'duration': 2.121}, {'end': 794.808, 'text': "There are, I guess you could say easier ways, but they're, they're not as, um, uh, I don't know, flexible, I guess could, could be the word.", 'start': 787.005, 'duration': 7.803}], 'summary': 'In app.js, a disk storage engine is created using malter for flexibility.', 'duration': 32.661, 'max_score': 762.147, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9Qzmri1WaaE/pics/9Qzmri1WaaE762147.jpg'}, {'end': 836.137, 'src': 'embed', 'start': 809.373, 'weight': 1, 'content': [{'end': 813.934, 'text': "And we're going to set this to Malta dot disk storage.", 'start': 809.373, 'duration': 4.561}, {'end': 817.375, 'text': "And in here, we're going to pass in an object.", 'start': 815.534, 'duration': 1.841}, {'end': 820.495, 'text': 'And then this is going to take in two things, a destination.', 'start': 817.835, 'duration': 2.66}, {'end': 823.276, 'text': 'So where we want our files uploaded.', 'start': 821.295, 'duration': 1.981}, {'end': 829.877, 'text': "In this case, it's going to be dot slash public slash uploads.", 'start': 824.316, 'duration': 5.561}, {'end': 832.838, 'text': 'And then we want to put an ending slash.', 'start': 831.238, 'duration': 1.6}, {'end': 836.137, 'text': 'Okay, next thing we need is file name.', 'start': 834.056, 'duration': 2.081}], 'summary': 'Configuring malta disk storage for uploading files.', 'duration': 26.764, 'max_score': 809.373, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9Qzmri1WaaE/pics/9Qzmri1WaaE809373.jpg'}, {'end': 896.982, 'src': 'embed', 'start': 865.821, 'weight': 4, 'content': [{'end': 866.841, 'text': 'what do we want to name it?', 'start': 865.821, 'duration': 1.02}, {'end': 873.625, 'text': "Now, you don't want to take its original name, because if someone else uploads a file with that name, you're going to have issues.", 'start': 867.442, 'duration': 6.183}, {'end': 876.667, 'text': "So there's a lot of different ways you could do this.", 'start': 874.266, 'duration': 2.401}, {'end': 884.372, 'text': "First, I'm going to show you the easy way, which is basically just to add a timestamp onto the file name.", 'start': 878.788, 'duration': 5.584}, {'end': 891.538, 'text': "That way, if someone else uploads the same file, it'll get renamed to whatever the timestamp is at that time.", 'start': 885.312, 'duration': 6.226}, {'end': 896.982, 'text': "And then we're going to add an extension onto it like JPEG or PNG, whatever it's supposed to be.", 'start': 892.078, 'duration': 4.904}], 'summary': 'To avoid file naming conflicts, add timestamp and file extension.', 'duration': 31.161, 'max_score': 865.821, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9Qzmri1WaaE/pics/9Qzmri1WaaE865821.jpg'}, {'end': 988.703, 'src': 'embed', 'start': 963.607, 'weight': 6, 'content': [{'end': 970.271, 'text': 'This is where we use the path module and the path module has a method called ext name or extension name.', 'start': 963.607, 'duration': 6.664}, {'end': 978.197, 'text': "What this does is it takes in a file and it'll extract whatever the extension is, whether it's, you know, JPEG or PNG or whatever.", 'start': 970.812, 'duration': 7.385}, {'end': 985.041, 'text': 'So what we want to do is put the original file name in here, which we can get from file dot original name.', 'start': 978.717, 'duration': 6.324}, {'end': 988.703, 'text': "So if it's a JPEG, this will give us JPEG.", 'start': 985.821, 'duration': 2.882}], 'summary': 'Using path module to extract file extensions from original file names.', 'duration': 25.096, 'max_score': 963.607, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9Qzmri1WaaE/pics/9Qzmri1WaaE963607.jpg'}], 'start': 762.147, 'title': 'Implementing disk storage engine and file upload process in node.js', 'summary': 'Introduces implementing a disk storage engine with multer in app.js for flexibility and error handling, and covers setting up file upload to disk storage in node.js, including defining destination, file naming function, timestamping, and extension extraction.', 'chapters': [{'end': 808.433, 'start': 762.147, 'title': 'Implementing disk storage engine with multer', 'summary': 'Introduces the process of implementing a disk storage engine with multer in app.js to optimize flexibility and error handling.', 'duration': 46.286, 'highlights': ['The chapter introduces the process of implementing a disk storage engine with Multer in app.js.', 'The best way to implement the storage engine with Multer is explained, focusing on flexibility and error handling.', 'Different ways of implementing the storage engine with Multer are discussed, emphasizing the importance of flexibility and correct error display.']}, {'end': 988.703, 'start': 809.373, 'title': 'File upload process in node.js', 'summary': 'Covers the process of setting up file upload to malta dot disk storage in node.js, including defining destination, file naming function, timestamping, and extension extraction.', 'duration': 179.33, 'highlights': ['The file upload process involves setting the destination to Malta dot disk storage and specifying the file name function, which takes in three parameters: request, file, and callback.', 'The file naming function includes adding a timestamp to the file name to avoid conflicts with files of the same name, achieved using the date dot now method to obtain the current timestamp.', "The path module's ext name method is utilized to extract the original file's extension, ensuring the correct extension is added to the uploaded file name."]}], 'duration': 226.556, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9Qzmri1WaaE/pics/9Qzmri1WaaE762147.jpg', 'highlights': ['Introduces implementing a disk storage engine with Multer in app.js.', 'Covers setting up file upload to disk storage in node.js, including defining destination, file naming function, timestamping, and extension extraction.', 'Different ways of implementing the storage engine with Multer are discussed, emphasizing the importance of flexibility and correct error display.', 'The best way to implement the storage engine with Multer is explained, focusing on flexibility and error handling.', 'The file naming function includes adding a timestamp to the file name to avoid conflicts with files of the same name, achieved using the date dot now method to obtain the current timestamp.', 'The file upload process involves setting the destination to Malta dot disk storage and specifying the file name function, which takes in three parameters: request, file, and callback.', "The path module's ext name method is utilized to extract the original file's extension, ensuring the correct extension is added to the uploaded file name."]}, {'end': 1343.553, 'segs': [{'end': 1018.234, 'src': 'embed', 'start': 988.743, 'weight': 0, 'content': [{'end': 991.085, 'text': "If it's a GIF, it'll give us GIF or whatever.", 'start': 988.743, 'duration': 2.342}, {'end': 993.546, 'text': "and it's gonna add that onto the file name.", 'start': 991.505, 'duration': 2.041}, {'end': 998.108, 'text': 'All right, so that should be all we need to do right now for this part.', 'start': 994.567, 'duration': 3.541}, {'end': 1004.672, 'text': 'All right, so now that we have our storage engine set, we need to initialize the upload variable.', 'start': 999.549, 'duration': 5.123}, {'end': 1014.677, 'text': "So we're gonna say const upload, and we're gonna set this to Malta.", 'start': 1006.893, 'duration': 7.784}, {'end': 1018.234, 'text': 'and inside.', 'start': 1017.333, 'duration': 0.901}], 'summary': 'Setting storage engine and initializing upload variable.', 'duration': 29.491, 'max_score': 988.743, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9Qzmri1WaaE/pics/9Qzmri1WaaE988743.jpg'}, {'end': 1084.504, 'src': 'heatmap', 'start': 1025.099, 'weight': 0.924, 'content': [{'end': 1029.144, 'text': 'okay, which is this right here, this variable all right.', 'start': 1025.099, 'duration': 4.045}, {'end': 1037.644, 'text': "and then down here we want to specify dot single, because it's a single file.", 'start': 1029.144, 'duration': 8.5}, {'end': 1042.488, 'text': 'you could also do array if you wanted to upload multiple images or files as arrays.', 'start': 1037.644, 'duration': 4.844}, {'end': 1048.032, 'text': 'And then here, it takes the name, which in our case is going to be this my image.', 'start': 1043.088, 'duration': 4.944}, {'end': 1050.195, 'text': 'Okay, so whatever you use there.', 'start': 1048.053, 'duration': 2.142}, {'end': 1053.655, 'text': 'just like that.', 'start': 1053.035, 'duration': 0.62}, {'end': 1055.136, 'text': 'All right.', 'start': 1054.876, 'duration': 0.26}, {'end': 1058.939, 'text': 'Oh, one thing I forgot, guys in the in the form here.', 'start': 1055.777, 'duration': 3.162}, {'end': 1067.965, 'text': "if you're, if you're using a file or a file upload, you need to add an additional attribute to the form tag.", 'start': 1058.939, 'duration': 9.026}, {'end': 1069.025, 'text': 'I forgot all about that.', 'start': 1068.005, 'duration': 1.02}, {'end': 1084.504, 'text': 'So we need to add ink type and that needs to be set to a multi-part What is it? Multi part dash form.', 'start': 1069.145, 'duration': 15.359}], 'summary': 'Explanation of file upload process and form attribute addition', 'duration': 59.405, 'max_score': 1025.099, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9Qzmri1WaaE/pics/9Qzmri1WaaE1025098.jpg'}, {'end': 1186.657, 'src': 'heatmap', 'start': 1093.874, 'weight': 0.845, 'content': [{'end': 1096.596, 'text': 'Yeah Multipart slash form dash data.', 'start': 1093.874, 'duration': 2.722}, {'end': 1097.917, 'text': 'All right.', 'start': 1097.637, 'duration': 0.28}, {'end': 1099.879, 'text': "If we don't have that, it's not going to work.", 'start': 1098.077, 'duration': 1.802}, {'end': 1101.08, 'text': 'So make sure you put that in.', 'start': 1099.919, 'duration': 1.161}, {'end': 1102.18, 'text': 'All right.', 'start': 1101.1, 'duration': 1.08}, {'end': 1106.143, 'text': 'So now that we have dot single, we passed in the field name.', 'start': 1102.22, 'duration': 3.923}, {'end': 1111.287, 'text': "Now we're going to go down to our route, which is which we haven't created yet.", 'start': 1106.904, 'duration': 4.383}, {'end': 1114.41, 'text': "It's going to be app dot post.", 'start': 1111.828, 'duration': 2.582}, {'end': 1119.527, 'text': 'slash upload.', 'start': 1117.705, 'duration': 1.822}, {'end': 1128.246, 'text': "Alright, then we're going to put an arrow function and make sure we put our request and response Now.", 'start': 1119.547, 'duration': 8.699}, {'end': 1136.388, 'text': "the reason we're using app.post is because when we submit the form, we're making a post request to slash upload.", 'start': 1128.246, 'duration': 8.142}, {'end': 1137.928, 'text': "So that's what we're catching right here.", 'start': 1136.428, 'duration': 1.5}, {'end': 1144.749, 'text': "So just to make sure it actually submits, let's do a res.send, which just sends text to the browser.", 'start': 1138.428, 'duration': 6.321}, {'end': 1146.65, 'text': "And we'll just say test.", 'start': 1145.329, 'duration': 1.321}, {'end': 1152.791, 'text': 'All right, so if we go over here, reload, and submit, we get test, which is good.', 'start': 1147.89, 'duration': 4.901}, {'end': 1154.243, 'text': 'all right.', 'start': 1153.823, 'duration': 0.42}, {'end': 1160.306, 'text': 'so now what we want to do is we want to call the upload method okay, remember how we set upload up here.', 'start': 1154.243, 'duration': 6.063}, {'end': 1162.667, 'text': 'we can actually call that inside of our route.', 'start': 1160.306, 'duration': 2.361}, {'end': 1173.232, 'text': "now, like this all right, and then in here it's going to take in request response and then error, and we're going to set that to an arrow function.", 'start': 1162.667, 'duration': 10.565}, {'end': 1181.533, 'text': "like that, all right, i'm sorry, error should actually be, should be like that.", 'start': 1173.232, 'duration': 8.301}, {'end': 1183.455, 'text': 'So we have request response.', 'start': 1182.094, 'duration': 1.361}, {'end': 1186.657, 'text': "And then we have our callback, which I'm using an arrow function.", 'start': 1183.575, 'duration': 3.082}], 'summary': 'Setting up a route to handle post requests and call the upload method.', 'duration': 92.783, 'max_score': 1093.874, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9Qzmri1WaaE/pics/9Qzmri1WaaE1093874.jpg'}, {'end': 1154.243, 'src': 'embed', 'start': 1128.246, 'weight': 1, 'content': [{'end': 1136.388, 'text': "the reason we're using app.post is because when we submit the form, we're making a post request to slash upload.", 'start': 1128.246, 'duration': 8.142}, {'end': 1137.928, 'text': "So that's what we're catching right here.", 'start': 1136.428, 'duration': 1.5}, {'end': 1144.749, 'text': "So just to make sure it actually submits, let's do a res.send, which just sends text to the browser.", 'start': 1138.428, 'duration': 6.321}, {'end': 1146.65, 'text': "And we'll just say test.", 'start': 1145.329, 'duration': 1.321}, {'end': 1152.791, 'text': 'All right, so if we go over here, reload, and submit, we get test, which is good.', 'start': 1147.89, 'duration': 4.901}, {'end': 1154.243, 'text': 'all right.', 'start': 1153.823, 'duration': 0.42}], 'summary': 'Using app.post to handle form submission by making a post request to slash upload and confirming submission with res.send test.', 'duration': 25.997, 'max_score': 1128.246, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9Qzmri1WaaE/pics/9Qzmri1WaaE1128246.jpg'}, {'end': 1291.244, 'src': 'heatmap', 'start': 1248.935, 'weight': 2, 'content': [{'end': 1251.878, 'text': "And we'll just say test.", 'start': 1248.935, 'duration': 2.943}, {'end': 1256.342, 'text': "So if we upload a file, it's just going to say test in the browser.", 'start': 1253.26, 'duration': 3.082}, {'end': 1261.725, 'text': 'But what we want to do is look down here because we should be logging request file.', 'start': 1256.382, 'duration': 5.343}, {'end': 1263.406, 'text': 'And I want to show you what that gives us.', 'start': 1261.765, 'duration': 1.641}, {'end': 1265.407, 'text': "So let's go ahead and try it.", 'start': 1264.107, 'duration': 1.3}, {'end': 1269.85, 'text': "We'll grab this image here and submit and you can see what it gives us.", 'start': 1265.427, 'duration': 4.423}, {'end': 1275.133, 'text': 'He gives us the field name, which is my image, gives us the original name, which is this.', 'start': 1269.89, 'duration': 5.243}, {'end': 1280.537, 'text': 'Gives us the encoding, the MIME type, which is image slash JPEG.', 'start': 1276.334, 'duration': 4.203}, {'end': 1283.539, 'text': 'Destination is public uploads.', 'start': 1280.637, 'duration': 2.902}, {'end': 1284.499, 'text': 'We defined that.', 'start': 1283.579, 'duration': 0.92}, {'end': 1288.522, 'text': 'The file name, the path, and the size.', 'start': 1285, 'duration': 3.522}, {'end': 1291.244, 'text': 'So it gives us all the stuff that we can use.', 'start': 1289.263, 'duration': 1.981}], 'summary': 'Upon file upload, the system logs request details including field name, original name, mime type, destination, file name, path, and size.', 'duration': 27.137, 'max_score': 1248.935, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9Qzmri1WaaE/pics/9Qzmri1WaaE1248935.jpg'}], 'start': 988.743, 'title': 'File upload in javascript and node.js', 'summary': 'Covers setting up a storage engine and initializing the upload variable for file upload in javascript, as well as handling file uploads in node.js using the app.post method, including capturing and utilizing file information such as field name, original name, encoding, mime type, destination, file name, path, and size.', 'chapters': [{'end': 1102.18, 'start': 988.743, 'title': 'Initializing file upload in javascript', 'summary': 'Covers setting up a storage engine and initializing the upload variable for file upload in javascript, specifying single file upload and the necessary form attribute.', 'duration': 113.437, 'highlights': ['Setting up a storage engine and initializing the upload variable is essential for file upload in JavaScript.', "Specifying 'single' for file upload and using the 'name' attribute are key steps in the process.", "Adding the 'enctype' attribute with the value 'multipart/form-data' is necessary for a successful file upload."]}, {'end': 1343.553, 'start': 1102.22, 'title': 'Handling file uploads in node.js', 'summary': 'Explains how to handle file uploads in node.js using the app.post method, and how to capture and utilize file information, including field name, original name, encoding, mime type, destination, file name, path, and size, for potential storage in a database or display in a photo gallery.', 'duration': 241.333, 'highlights': ["The app.post method is used to handle the form submission and capture the post request to '/upload', ensuring that it submits correctly and returns 'test' to the browser upon submission. The app.post method is used to handle the form submission and capture the post request to '/upload', ensuring that it submits correctly and returns 'test' to the browser upon submission.", 'The upload method captures and retrieves file information from the request object, including the field name, original name, encoding, MIME type, destination, file name, path, and size, providing the necessary data for potential storage in a database or display in a photo gallery. The upload method captures and retrieves file information from the request object, including the field name, original name, encoding, MIME type, destination, file name, path, and size, providing the necessary data for potential storage in a database or display in a photo gallery.', 'The file information obtained from the request object can be used to submit data to a database, enabling the display of images in a photo gallery or other potential applications. The file information obtained from the request object can be used to submit data to a database, enabling the display of images in a photo gallery or other potential applications.']}], 'duration': 354.81, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9Qzmri1WaaE/pics/9Qzmri1WaaE988743.jpg', 'highlights': ['Setting up a storage engine and initializing the upload variable is essential for file upload in JavaScript.', "The app.post method is used to handle the form submission and capture the post request to '/upload', ensuring that it submits correctly and returns 'test' to the browser upon submission.", 'The upload method captures and retrieves file information from the request object, including the field name, original name, encoding, MIME type, destination, file name, path, and size, providing the necessary data for potential storage in a database or display in a photo gallery.']}, {'end': 2229.122, 'segs': [{'end': 1393.044, 'src': 'embed', 'start': 1345.014, 'weight': 0, 'content': [{'end': 1349.516, 'text': 'So you can generate your image names however you want this way.', 'start': 1345.014, 'duration': 4.502}, {'end': 1353.691, 'text': "Now, let's say we wanted to implement a size limit.", 'start': 1350.788, 'duration': 2.903}, {'end': 1356.974, 'text': 'OK, so size size limit is really easy to implement.', 'start': 1354.191, 'duration': 2.783}, {'end': 1359.937, 'text': 'All we have to do is go down to where we have our upload right here.', 'start': 1357.034, 'duration': 2.903}, {'end': 1366.384, 'text': "And in addition to storage, let's put a comma here and we can say limits.", 'start': 1360.718, 'duration': 5.666}, {'end': 1375.93, 'text': "set that to an object and we'll say file size and then set that to a number of bytes.", 'start': 1368.504, 'duration': 7.426}, {'end': 1376.33, 'text': 'all right.', 'start': 1375.93, 'duration': 0.4}, {'end': 1381.635, 'text': 'so what i want to set it to is one megabyte, which is going to be a million bytes.', 'start': 1376.33, 'duration': 5.305}, {'end': 1384.697, 'text': 'so one, two, three, four, five, six.', 'start': 1381.635, 'duration': 3.062}, {'end': 1388.48, 'text': "now, just to test it out, i'm going to put 10 bytes.", 'start': 1384.697, 'duration': 3.783}, {'end': 1393.044, 'text': "so let's leave it like that and save.", 'start': 1388.48, 'duration': 4.564}], 'summary': 'Implement file size limit of 1mb for image upload.', 'duration': 48.03, 'max_score': 1345.014, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9Qzmri1WaaE/pics/9Qzmri1WaaE1345014.jpg'}, {'end': 1493.22, 'src': 'embed', 'start': 1463.554, 'weight': 3, 'content': [{'end': 1466.635, 'text': 'So error file too large and you can see that it did not get uploaded.', 'start': 1463.554, 'duration': 3.081}, {'end': 1476.395, 'text': "All right, now, if we want to make it so that we can only upload images, there's a little bit more work than just doing what we did here.", 'start': 1468.732, 'duration': 7.663}, {'end': 1477.755, 'text': 'And let me just reset.', 'start': 1476.675, 'duration': 1.08}, {'end': 1480.796, 'text': 'Let me put this to a million bytes.', 'start': 1477.775, 'duration': 3.021}, {'end': 1482.617, 'text': 'All right.', 'start': 1482.377, 'duration': 0.24}, {'end': 1486.096, 'text': "so right now let's save that.", 'start': 1483.994, 'duration': 2.102}, {'end': 1489.198, 'text': "let's try to upload a json file.", 'start': 1486.096, 'duration': 3.102}, {'end': 1493.22, 'text': "so we'll submit and you can see that it actually got uploaded over here.", 'start': 1489.198, 'duration': 4.022}], 'summary': 'Error: file too large, unable to upload. limit file size to images only.', 'duration': 29.666, 'max_score': 1463.554, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9Qzmri1WaaE/pics/9Qzmri1WaaE1463554.jpg'}, {'end': 1606.773, 'src': 'embed', 'start': 1573.199, 'weight': 1, 'content': [{'end': 1585.224, 'text': "So we'll say function check file type takes in the file and the callback.", 'start': 1573.199, 'duration': 12.025}, {'end': 1587.658, 'text': 'All right.', 'start': 1587.378, 'duration': 0.28}, {'end': 1590.12, 'text': "So there's a.", 'start': 1587.778, 'duration': 2.342}, {'end': 1590.661, 'text': "there's a couple.", 'start': 1590.12, 'duration': 0.541}, {'end': 1601.068, 'text': "I mean there's a lot of ways to do this, but what I want to do is I want to check not only the extension to make sure it's a dot JPEG or a dot PNG,", 'start': 1590.661, 'duration': 10.407}, {'end': 1605.432, 'text': 'but also check the MIME type, because you can easily rename the extension.', 'start': 1601.068, 'duration': 4.364}, {'end': 1606.773, 'text': 'So I want to check both of those.', 'start': 1605.472, 'duration': 1.301}], 'summary': "The function 'checkfiletype' will validate file type by examining both file extension and mime type.", 'duration': 33.574, 'max_score': 1573.199, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9Qzmri1WaaE/pics/9Qzmri1WaaE1573199.jpg'}, {'end': 2051.516, 'src': 'embed', 'start': 2022.578, 'weight': 2, 'content': [{'end': 2027.1, 'text': "we're going to pass the image in, but we need to put in an image tag for it to display in.", 'start': 2022.578, 'duration': 4.522}, {'end': 2032.883, 'text': "So we'll go under the form, put a line break, and then we're going to put in our image tag.", 'start': 2027.2, 'duration': 5.683}, {'end': 2037.161, 'text': 'with a source.', 'start': 2035.859, 'duration': 1.302}, {'end': 2043.613, 'text': "All right, and this is also going to have a class, we want it to be responsive, we don't want it to go out of its container.", 'start': 2038.323, 'duration': 5.29}, {'end': 2046.257, 'text': "So we're going to say, class img.", 'start': 2043.673, 'duration': 2.584}, {'end': 2051.516, 'text': 'dash responsive, which is a materialized class.', 'start': 2048.174, 'duration': 3.342}], 'summary': 'Adding image tag with source and responsive class for display.', 'duration': 28.938, 'max_score': 2022.578, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9Qzmri1WaaE/pics/9Qzmri1WaaE2022578.jpg'}], 'start': 1345.014, 'title': 'Image upload and validation', 'summary': 'Demonstrates implementing a one megabyte size limit for image uploads and covers file upload and validation using javascript, including limiting file size, restricting file types, and displaying uploaded images, along with a recommendation for further development into a photo gallery.', 'chapters': [{'end': 1393.044, 'start': 1345.014, 'title': 'Implementing size limit for image upload', 'summary': 'Demonstrates how to implement a size limit of one megabyte for image uploads, using a simple method to set the file size in bytes, with a demonstration of setting the file size to 10 bytes for testing purposes.', 'duration': 48.03, 'highlights': ['Demonstrates setting a size limit of one megabyte for image uploads The chapter provides a demonstration of setting the file size limit to one megabyte, which is equivalent to one million bytes.', 'Shows the method to set the file size in bytes The chapter explains the simple method of setting the file size in bytes, using the example of setting it to 10 bytes for testing purposes.']}, {'end': 2229.122, 'start': 1394.591, 'title': 'File upload and validation', 'summary': 'Covers file upload and validation using javascript, including limiting file size, restricting file types, and displaying uploaded images, with a recommendation for further development into a photo gallery.', 'duration': 834.531, 'highlights': ['File size limit error handling The system should invoke an error when attempting to upload a file larger than 10 bytes, preventing the file from being uploaded.', 'File type validation Implemented file type validation to allow only images (JPEG, PNG, GIF) while preventing the upload of other file types (e.g., JSON).', "Display uploaded images After successful file upload, the system displays the uploaded image and provides responsive image display using the 'img-responsive' class.", 'Recommendation for further development Suggests expanding the functionality to create a photo gallery by storing file information in a database and displaying images through a separate route or fetch request.']}], 'duration': 884.108, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9Qzmri1WaaE/pics/9Qzmri1WaaE1345014.jpg', 'highlights': ['Demonstrates setting a size limit of one megabyte for image uploads', 'File type validation Implemented to allow only images (JPEG, PNG, GIF)', "Display uploaded images with responsive image display using 'img-responsive' class", 'File size limit error handling to prevent upload of files larger than 10 bytes', 'Shows the method to set the file size in bytes']}], 'highlights': ['Multer module is highlighted as the most popular way to upload files in Node.js.', 'The tutorial showcases the use of materialized CSS UI and ejs template engine for uploading and displaying images.', 'Introduces implementing a disk storage engine with Multer in app.js.', 'Setting up a storage engine and initializing the upload variable is essential for file upload in JavaScript.', 'Demonstrates setting a size limit of one megabyte for image uploads', 'File type validation Implemented to allow only images (JPEG, PNG, GIF)']}