title
React File Uploader With Express (Using React Hooks)

description
In this project we will build a full stack file upload with React and Express. We will construct the UI with a Bootstrap elements and make them function Sponsor: DevMountain Bootcamp https://goo.gl/6q0dEa Code: https://github.com/bradtraversy/react_file_uploader 💖 Become a Patron: Show support & get perks! http://www.patreon.com/traversymedia Website & Udemy Courses http://www.traversymedia.com Follow Traversy Media: https://www.facebook.com/traversymedia https://www.twitter.com/traversymedia https://www.instagram.com/traversymedia

detail
{'title': 'React File Uploader With Express (Using React Hooks)', 'heatmap': [{'end': 552.988, 'start': 511.976, 'weight': 0.806}, {'end': 705.684, 'start': 646.368, 'weight': 0.72}, {'end': 1271.519, 'start': 1236.427, 'weight': 0.895}, {'end': 1379.528, 'start': 1317.847, 'weight': 1}, {'end': 1516.794, 'start': 1479.378, 'weight': 0.881}, {'end': 1574.596, 'start': 1528.003, 'weight': 0.726}, {'end': 1675.84, 'start': 1647.772, 'weight': 0.748}], 'summary': 'Tutorial covers implementing file upload feature using react and express, setting up react app, integrating dependencies, building file upload component and form, handling file upload functionality, using axios for file upload with error handling, and creating message component and file upload progress bar for an enhanced user experience.', 'chapters': [{'end': 526.83, 'segs': [{'end': 51.123, 'src': 'embed', 'start': 24.544, 'weight': 0, 'content': [{'end': 30.666, 'text': "so I've had a lot of requests to do a tutorial on file uploads with react,", 'start': 24.544, 'duration': 6.122}, {'end': 41.048, 'text': "and the reason I haven't touched on that yet is because there's just so many options for a back end as far as where these images going and how are they going to get stored,", 'start': 30.666, 'duration': 10.382}, {'end': 41.588, 'text': 'and so on.', 'start': 41.048, 'duration': 0.54}, {'end': 51.123, 'text': "So what we're going to do is something very simple we're going to use express along with a package called Express File Upload, which I just found.", 'start': 42.488, 'duration': 8.635}], 'summary': 'Tutorial on file uploads with react using express and express file upload.', 'duration': 26.579, 'max_score': 24.544, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/b6Oe2puTdMQ/pics/b6Oe2puTdMQ24544.jpg'}, {'end': 195.135, 'src': 'embed', 'start': 166.369, 'weight': 1, 'content': [{'end': 168.71, 'text': "All right, so let's go ahead and get started.", 'start': 166.369, 'duration': 2.341}, {'end': 172.11, 'text': "We'll jump into VS Code and we're going to start with the back end.", 'start': 168.73, 'duration': 3.38}, {'end': 178.712, 'text': "So down here, I'm going to just run npm init-y, which will create our package.json.", 'start': 172.25, 'duration': 6.462}, {'end': 183.132, 'text': "And we're going to install our dependencies for the back end.", 'start': 179.852, 'duration': 3.28}, {'end': 190.274, 'text': "So I'm going to clear this up and do npm install express and express-fileupload.", 'start': 183.172, 'duration': 7.102}, {'end': 192.534, 'text': 'So those are our regular dependencies.', 'start': 190.774, 'duration': 1.76}, {'end': 195.135, 'text': "And then we're going to have a couple dev dependencies.", 'start': 193.274, 'duration': 1.861}], 'summary': 'Setting up back-end dependencies in vs code using npm and express-fileupload.', 'duration': 28.766, 'max_score': 166.369, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/b6Oe2puTdMQ/pics/b6Oe2puTdMQ166369.jpg'}], 'start': 7.059, 'title': 'React file upload', 'summary': 'Discusses implementing a file upload feature using react and express, focusing on frontend ui and utilizing express file upload package. it covers setting up the file upload endpoint, and installing/configuring backend and frontend dependencies.', 'chapters': [{'end': 526.83, 'start': 7.059, 'title': 'React file upload tutorial', 'summary': 'Discusses creating a file upload feature using react and express, focusing on the frontend ui and utilizing express file upload package. the endpoint for the file upload is set up, and the backend and frontend dependencies are installed and configured.', 'duration': 519.771, 'highlights': ['The chapter discusses creating a file upload feature using React and Express, focusing on the frontend UI and utilizing Express File Upload package. The tutorial introduces the process of creating a file upload feature using React and Express, emphasizing the utilization of the Express File Upload package and focusing on the frontend UI.', 'The endpoint for the file upload is set up, and the backend and frontend dependencies are installed and configured. The chapter demonstrates setting up the endpoint for file upload, installing backend dependencies such as Express and Express File Upload, and configuring frontend dependencies for the React application.']}], 'duration': 519.771, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/b6Oe2puTdMQ/pics/b6Oe2puTdMQ7059.jpg', 'highlights': ['The chapter discusses creating a file upload feature using React and Express, focusing on the frontend UI and utilizing Express File Upload package.', 'The endpoint for the file upload is set up, and the backend and frontend dependencies are installed and configured.']}, {'end': 812.181, 'segs': [{'end': 555.556, 'src': 'embed', 'start': 526.87, 'weight': 0, 'content': [{'end': 530.973, 'text': "Now, just to make sure this runs, let's do NPM run server.", 'start': 526.87, 'duration': 4.103}, {'end': 532.914, 'text': 'And there it is.', 'start': 532.354, 'duration': 0.56}, {'end': 534.075, 'text': 'All right.', 'start': 532.934, 'duration': 1.141}, {'end': 538.718, 'text': "So I'm going to stop that and now we're going to move on to react so that that was the easy part.", 'start': 534.095, 'duration': 4.623}, {'end': 549.906, 'text': "So we're going to go ahead and generate going to use NPX create dash react dash app and we want to put it in a folder called Client.", 'start': 539.879, 'duration': 10.027}, {'end': 552.988, 'text': "So that'll generate our react application.", 'start': 550.586, 'duration': 2.402}, {'end': 555.556, 'text': 'inside a folder called client.', 'start': 554.053, 'duration': 1.503}], 'summary': 'Ran npm run server, then generated a react app using npx create-react-app in a folder called client.', 'duration': 28.686, 'max_score': 526.87, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/b6Oe2puTdMQ/pics/b6Oe2puTdMQ526870.jpg'}, {'end': 812.181, 'src': 'heatmap', 'start': 646.368, 'weight': 1, 'content': [{'end': 652.333, 'text': "So right here, make sure it's the react package dot JSON, not the express or not the node one.", 'start': 646.368, 'duration': 5.965}, {'end': 664.842, 'text': 'And we want to add proxy for our back end, which is HTTP local host port 5000.', 'start': 653.113, 'duration': 11.729}, {'end': 665.863, 'text': 'All right.', 'start': 664.842, 'duration': 1.021}, {'end': 666.984, 'text': "So we'll go ahead and save that.", 'start': 665.883, 'duration': 1.101}, {'end': 673.193, 'text': 'And then the very last thing I want to do before we run our server is install Axios in our client,', 'start': 668.068, 'duration': 5.125}, {'end': 675.334, 'text': "because that's what we're going to be using to make requests.", 'start': 673.193, 'duration': 2.141}, {'end': 680.499, 'text': "So I'm going to CD into client and then NPM install Axios.", 'start': 675.354, 'duration': 5.145}, {'end': 682.861, 'text': 'Make sure you CD into client.', 'start': 681.299, 'duration': 1.562}, {'end': 684.402, 'text': "Don't install it on the back end.", 'start': 682.901, 'duration': 1.501}, {'end': 688.329, 'text': 'All right, so Axios is installed.', 'start': 686.527, 'duration': 1.802}, {'end': 691.932, 'text': 'Now make sure you CD dot dot back into the root here.', 'start': 688.429, 'duration': 3.503}, {'end': 699.359, 'text': 'And then we can run npm run dev, which should run concurrently and run both the front end and the back end.', 'start': 692.512, 'duration': 6.847}, {'end': 705.684, 'text': "All right, so you saw the back end said server started, and now it's loading the React app.", 'start': 699.379, 'duration': 6.305}, {'end': 708.567, 'text': "All right, let's remove the initial CSS.", 'start': 706.285, 'duration': 2.282}, {'end': 711.91, 'text': "So this app.css file, I'm just going to clear that out.", 'start': 709.027, 'duration': 2.883}, {'end': 715.157, 'text': 'All right, so we have React up and running.', 'start': 712.895, 'duration': 2.262}, {'end': 717.759, 'text': "Now let's bring in Bootstrap.", 'start': 715.297, 'duration': 2.462}, {'end': 722.823, 'text': "So I'm gonna go to Get Bootstrap, get started, and grab the CSS.", 'start': 717.939, 'duration': 4.884}, {'end': 731.91, 'text': "And we're gonna go to our React public folder, index.html, and we can clear that up and just paste that in right there.", 'start': 724.024, 'duration': 7.886}, {'end': 734.913, 'text': 'We might as well clear this crap up as well.', 'start': 731.93, 'duration': 2.983}, {'end': 739.537, 'text': "And I'm just gonna change the title to React File Upload.", 'start': 736.234, 'duration': 3.303}, {'end': 743.879, 'text': "And let's grab the bootstrap JavaScript stuff.", 'start': 740.558, 'duration': 3.321}, {'end': 749.682, 'text': "Which I don't I don't think we need, but we might as well just put it in.", 'start': 746.661, 'duration': 3.021}, {'end': 754.744, 'text': "And then finally, we want font awesome for that react logo that I'm using.", 'start': 750.482, 'duration': 4.262}, {'end': 759.846, 'text': 'So grab that.', 'start': 758.906, 'duration': 0.94}, {'end': 763.408, 'text': 'Put that right above bootstrap.', 'start': 761.787, 'duration': 1.621}, {'end': 764.723, 'text': 'All right.', 'start': 764.403, 'duration': 0.32}, {'end': 765.943, 'text': 'So close that up.', 'start': 764.863, 'duration': 1.08}, {'end': 771.865, 'text': 'And if we look at our application, you can see the fonts change because Bootstrap is now included.', 'start': 766.464, 'duration': 5.401}, {'end': 773.226, 'text': 'All right.', 'start': 771.885, 'duration': 1.341}, {'end': 778.587, 'text': "Now there's only a couple of things we're doing in this main app file.", 'start': 773.326, 'duration': 5.261}, {'end': 781.028, 'text': "Most of it's going to be in the file upload component.", 'start': 778.627, 'duration': 2.401}, {'end': 788.97, 'text': "But within here, first of all, let's change this class name to container so that it pushes everything to the middle.", 'start': 781.928, 'duration': 7.042}, {'end': 792.091, 'text': "And then I'm going to do empty for to move everything down.", 'start': 789.43, 'duration': 2.661}, {'end': 797.289, 'text': 'Now I have prettier installed and I have auto auto format.', 'start': 793.106, 'duration': 4.183}, {'end': 803.714, 'text': 'So when I save, you might see some things change, including if I have double quotes, they change the single quotes.', 'start': 797.329, 'duration': 6.385}, {'end': 806.677, 'text': 'It will format some stuff like semicolons.', 'start': 804.455, 'duration': 2.222}, {'end': 807.537, 'text': "So that's why.", 'start': 806.737, 'duration': 0.8}, {'end': 808.518, 'text': 'All right.', 'start': 807.557, 'duration': 0.961}, {'end': 809.959, 'text': "So in here we're going to do an H4.", 'start': 808.558, 'duration': 1.401}, {'end': 812.181, 'text': "Actually, let's put some classes on this.", 'start': 810.46, 'duration': 1.721}], 'summary': 'Configuring react app with proxy, axios, bootstrap, and font awesome.', 'duration': 159.068, 'max_score': 646.368, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/b6Oe2puTdMQ/pics/b6Oe2puTdMQ646368.jpg'}], 'start': 526.87, 'title': 'Setting up react and integrating dependencies', 'summary': 'Covers setting up a react app, cleaning unnecessary files, adding a proxy in package.json, using axios for requests, and running the server concurrently with npm run dev. it also details integrating react with bootstrap and font awesome, including adding their css and javascript, and making adjustments to the main app file.', 'chapters': [{'end': 708.567, 'start': 526.87, 'title': 'Setting up react app and installing dependencies', 'summary': 'Covers setting up a react app, cleaning unnecessary files and adding a proxy in package.json for the backend, with the use of axios for making requests and running the server concurrently with npm run dev.', 'duration': 181.697, 'highlights': ['Setting up the React app using NPX create-react-app and cleaning unnecessary files. N/A', 'Adding a proxy in package.json for the backend, specifying the backend URL as HTTP localhost port 5000. N/A', 'Installing Axios in the client directory to make requests. N/A', 'Running the server concurrently with npm run dev to handle both the front end and the back end. N/A']}, {'end': 812.181, 'start': 709.027, 'title': 'Setting up react with bootstrap and font awesome', 'summary': 'Details the process of setting up react with bootstrap and font awesome, including clearing unnecessary files, adding bootstrap and font awesome css and javascript, and making adjustments to the main app file to include bootstrap styles and formatting changes.', 'duration': 103.154, 'highlights': ['The chapter details the process of setting up React with Bootstrap and Font Awesome, including clearing unnecessary files, adding Bootstrap and Font Awesome CSS and JavaScript, and making adjustments to the main app file to include Bootstrap styles and formatting changes.', 'Bootstrap and Font Awesome CSS and JavaScript are added to the React project to incorporate their styling and font icons for the application.', "Adjustments are made to the main app file, including changing the class name to 'container' and adding formatting changes for better visual presentation.", 'Installation of Prettier is mentioned, which automatically formats certain code elements such as quotes and semicolons upon saving the file.']}], 'duration': 285.311, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/b6Oe2puTdMQ/pics/b6Oe2puTdMQ526870.jpg', 'highlights': ['Setting up the React app using NPX create-react-app and cleaning unnecessary files.', 'Adding a proxy in package.json for the backend, specifying the backend URL as HTTP localhost port 5000.', 'Running the server concurrently with npm run dev to handle both the front end and the back end.', 'Installing Axios in the client directory to make requests.', 'The chapter details the process of setting up React with Bootstrap and Font Awesome, including clearing unnecessary files, adding Bootstrap and Font Awesome CSS and JavaScript, and making adjustments to the main app file to include Bootstrap styles and formatting changes.', 'Bootstrap and Font Awesome CSS and JavaScript are added to the React project to incorporate their styling and font icons for the application.', "Adjustments are made to the main app file, including changing the class name to 'container' and adding formatting changes for better visual presentation.", 'Installation of Prettier is mentioned, which automatically formats certain code elements such as quotes and semicolons upon saving the file.']}, {'end': 995.203, 'segs': [{'end': 871.111, 'src': 'embed', 'start': 812.781, 'weight': 0, 'content': [{'end': 818.506, 'text': 'So display dash for text center and MB four.', 'start': 812.781, 'duration': 5.725}, {'end': 822.304, 'text': 'And then in this heading, we want that react icon.', 'start': 819.803, 'duration': 2.501}, {'end': 828.745, 'text': "So we're going to do I with the class of FAB and a class of F a dash react.", 'start': 822.324, 'duration': 6.421}, {'end': 833.506, 'text': "And then next to that icon, we're just going to say react file upload.", 'start': 829.545, 'duration': 3.961}, {'end': 839.927, 'text': "Okay And then underneath that each four, we're going to have our file upload component, which we need to create.", 'start': 833.526, 'duration': 6.401}, {'end': 842.748, 'text': "So let's save this and take a look.", 'start': 839.967, 'duration': 2.781}, {'end': 848.437, 'text': 'one thing i forgot is on the container class.', 'start': 846.255, 'duration': 2.182}, {'end': 852.279, 'text': 'i also want mt4 just to push everything down.', 'start': 848.437, 'duration': 3.842}, {'end': 862.486, 'text': "so inside source let's create a folder called components and we're going to have a file called file upload dot js.", 'start': 852.279, 'duration': 10.207}, {'end': 871.111, 'text': "Now I'm using hooks, so we're going to be using functional components.", 'start': 866.129, 'duration': 4.982}], 'summary': 'Creating a file upload component using react with functional components and hooks.', 'duration': 58.33, 'max_score': 812.781, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/b6Oe2puTdMQ/pics/b6Oe2puTdMQ812781.jpg'}, {'end': 930.116, 'src': 'embed', 'start': 900.766, 'weight': 2, 'content': [{'end': 903.588, 'text': 'Those will be separate components that will take in props.', 'start': 900.766, 'duration': 2.822}, {'end': 906.85, 'text': 'But all the state and everything is going to go in this.', 'start': 904.428, 'duration': 2.422}, {'end': 909.853, 'text': "So let's start to build out the UI a little bit.", 'start': 907.871, 'duration': 1.982}, {'end': 911.594, 'text': "We're going to use a React fragment.", 'start': 909.873, 'duration': 1.721}, {'end': 917.379, 'text': "So let's bring in fragment and replace this div.", 'start': 912.615, 'duration': 4.764}, {'end': 925.755, 'text': "OK, and then we're going to have a form.", 'start': 923.514, 'duration': 2.241}, {'end': 927.315, 'text': "We don't need an action.", 'start': 926.335, 'duration': 0.98}, {'end': 930.116, 'text': "We'll add the on submit in a little bit.", 'start': 928.415, 'duration': 1.701}], 'summary': 'Building ui components using react fragment and form.', 'duration': 29.35, 'max_score': 900.766, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/b6Oe2puTdMQ/pics/b6Oe2puTdMQ900766.jpg'}], 'start': 812.781, 'title': 'React file upload component and redux form building', 'summary': 'Covers creating a react file upload component with classes and hooks, using fab and f a dash react classes, and building a form in react with bootstrap using es7 react redux snippets extension, react fragment, and specific class names.', 'chapters': [{'end': 871.111, 'start': 812.781, 'title': 'React file upload component', 'summary': 'Describes the process of creating a react file upload component using classes and hooks, including the use of fab and f a dash react classes, displaying text centered and pushing contents down using mt4.', 'duration': 58.33, 'highlights': ['Creating a React file upload component using functional components and hooks.', 'Using FAB and F a dash react classes for displaying the react icon.', 'Displaying text centered and pushing contents down using MT4.']}, {'end': 995.203, 'start': 871.311, 'title': 'React redux snippets and form building', 'summary': 'Explains using es7 react redux snippets extension for generating functional components and building a form in react with bootstrap, while also highlighting the usage of react fragment and specific class names.', 'duration': 123.892, 'highlights': ['Using ES7 React Redux Snippets extension for generating functional components The speaker mentions using the RACF shortcut to generate a functional component, indicating the utilization of the ES7 React Redux Snippets extension.', 'Building a form in React with Bootstrap and replacing a div with React fragment The chapter explains the process of building a form in React using Bootstrap documentation and replacing a div with a React fragment for UI building.', 'Modifying class names and attributes in the form The speaker demonstrates modifying class names by using shortcut keys and ensures the proper attribute syntax for the input field, indicating attention to detail in form building.']}], 'duration': 182.422, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/b6Oe2puTdMQ/pics/b6Oe2puTdMQ812781.jpg', 'highlights': ['Creating a React file upload component using functional components and hooks.', 'Using FAB and F a dash react classes for displaying the react icon.', 'Building a form in React with Bootstrap and replacing a div with React fragment.']}, {'end': 1367.236, 'segs': [{'end': 1115.911, 'src': 'embed', 'start': 1079.792, 'weight': 1, 'content': [{'end': 1080.952, 'text': 'That should go into state.', 'start': 1079.792, 'duration': 1.16}, {'end': 1086.194, 'text': 'Also, the file name, because I want this right here to be replaced with the file name.', 'start': 1081.073, 'duration': 5.121}, {'end': 1090.574, 'text': "So the way that we're going to do that is with hooks, with the useState hook.", 'start': 1087.171, 'duration': 3.403}, {'end': 1091.754, 'text': 'So we need to bring that in.', 'start': 1090.594, 'duration': 1.16}, {'end': 1098.759, 'text': "And then above the return, we're going to go ahead and set some brackets here.", 'start': 1093.095, 'duration': 5.664}, {'end': 1102.702, 'text': 'And we want file and then set file.', 'start': 1099.26, 'duration': 3.442}, {'end': 1105.844, 'text': 'And we want to take that from useState.', 'start': 1103.323, 'duration': 2.521}, {'end': 1108.386, 'text': "And what this is is it's the state.", 'start': 1106.605, 'duration': 1.781}, {'end': 1115.911, 'text': "So you can kind of think of this, as if you're not familiar with hooks, when you have your state object in a class,", 'start': 1108.626, 'duration': 7.285}], 'summary': 'Using the usestate hook to manage file state in react component.', 'duration': 36.119, 'max_score': 1079.792, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/b6Oe2puTdMQ/pics/b6Oe2puTdMQ1079792.jpg'}, {'end': 1227.26, 'src': 'embed', 'start': 1195.189, 'weight': 2, 'content': [{'end': 1202.132, 'text': "But I'm just going to create a new method called on change and we'll go ahead and nest that in here.", 'start': 1195.189, 'duration': 6.943}, {'end': 1209.005, 'text': 'And we want to call set file.', 'start': 1207.424, 'duration': 1.581}, {'end': 1218.153, 'text': 'All right, now set file is going to take in from this event parameter, we can do E dot target.', 'start': 1209.025, 'duration': 9.128}, {'end': 1219.894, 'text': 'And then we have files.', 'start': 1218.513, 'duration': 1.381}, {'end': 1224.898, 'text': 'Now with HTML file inputs, you can do multiple files.', 'start': 1220.515, 'duration': 4.383}, {'end': 1227.26, 'text': 'So this is actually like an array.', 'start': 1225.238, 'duration': 2.022}], 'summary': "Creating a new 'on change' method to handle file input, allowing for multiple files as an array.", 'duration': 32.071, 'max_score': 1195.189, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/b6Oe2puTdMQ/pics/b6Oe2puTdMQ1195189.jpg'}, {'end': 1277.525, 'src': 'heatmap', 'start': 1236.427, 'weight': 0, 'content': [{'end': 1248.156, 'text': "I'll just copy this down and we'll do set file name and we want the same thing, the same value here, this object, which has a property of name.", 'start': 1236.427, 'duration': 11.729}, {'end': 1254.2, 'text': "And we're going to put that into this set file name so that will change this once we select it.", 'start': 1248.176, 'duration': 6.024}, {'end': 1261.406, 'text': "OK, so I'm going to save this and let's go back to our form and I'm going to open up my react dev tools.", 'start': 1254.22, 'duration': 7.186}, {'end': 1271.519, 'text': "And if I go to my file upload component, you'll see down here under hooks, we have our two pieces of state, the file and the file name.", 'start': 1264.031, 'duration': 7.488}, {'end': 1275.643, 'text': "And once I choose a file, that's going to fire off the on change.", 'start': 1272.039, 'duration': 3.604}, {'end': 1277.525, 'text': 'And now check that out.', 'start': 1276.464, 'duration': 1.061}], 'summary': 'Configuring file upload component with react dev tools and setting file name based on selected file.', 'duration': 23.305, 'max_score': 1236.427, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/b6Oe2puTdMQ/pics/b6Oe2puTdMQ1236427.jpg'}], 'start': 995.203, 'title': 'File upload in react', 'summary': 'Covers implementing file upload functionality in a react application, handling file input events in javascript, and explaining the process of uploading a file in a form using react.', 'chapters': [{'end': 1162.303, 'start': 995.203, 'title': 'File upload and state management', 'summary': 'Covers implementing file upload functionality in a react application using usestate hook to manage the file and file name state.', 'duration': 167.1, 'highlights': ['Implementing file upload functionality in a React application The chapter demonstrates implementing file upload functionality in a React application.', 'Using useState hook to manage the file and file name state The chapter explains the usage of useState hook to manage the file and file name state.', 'Explanation of how hooks simplify state management The chapter provides an explanation on how hooks simplify state management in React.']}, {'end': 1254.2, 'start': 1163.864, 'title': 'File input event handling', 'summary': 'Discusses handling file input events in javascript, including setting the file and file name based on user selection, with a focus on single file uploads.', 'duration': 90.336, 'highlights': ["Creating an 'on change' event for file input and calling methods to set file and file name.", 'Accessing the selected file using E dot target and files, focusing on single file upload by retrieving the first file from the array.', "Setting the file name based on the selected file's name property to dynamically update the file input."]}, {'end': 1367.236, 'start': 1254.22, 'title': 'File upload and form submission process', 'summary': 'Explains the process of uploading a file in a form using react, including using react dev tools to inspect file state, preventing default form submission, creating form data, and making a request to the server.', 'duration': 113.016, 'highlights': ['The chapter explains the process of uploading a file in a form using React, including using React dev tools to inspect file state, preventing default form submission, creating form data, and making a request to the server.']}], 'duration': 372.033, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/b6Oe2puTdMQ/pics/b6Oe2puTdMQ995203.jpg', 'highlights': ['The chapter explains the process of uploading a file in a form using React, including using React dev tools to inspect file state, preventing default form submission, creating form data, and making a request to the server.', 'Using useState hook to manage the file and file name state The chapter explains the usage of useState hook to manage the file and file name state.', 'Accessing the selected file using E dot target and files, focusing on single file upload by retrieving the first file from the array.']}, {'end': 1954.636, 'segs': [{'end': 1436.389, 'src': 'embed', 'start': 1367.236, 'weight': 0, 'content': [{'end': 1377.364, 'text': "so we need to bring in Axios and And we're going to use a sync await.", 'start': 1367.236, 'duration': 10.128}, {'end': 1379.528, 'text': "So we're going to label this sync.", 'start': 1377.464, 'duration': 2.064}, {'end': 1385.037, 'text': 'Since this is an arrow function, you want to put it on the right before the parameter here.', 'start': 1380.73, 'duration': 4.307}, {'end': 1388.363, 'text': "And then we're going to wrap this in a try catch.", 'start': 1385.918, 'duration': 2.445}, {'end': 1397.627, 'text': 'All right.', 'start': 1397.307, 'duration': 0.32}, {'end': 1406.132, 'text': "So here we're going to create a variable called Rez for response, set it to a weight and then make our request.", 'start': 1397.907, 'duration': 8.225}, {'end': 1412.755, 'text': 'So Axios dot post and we want to pass in slash upload.', 'start': 1406.912, 'duration': 5.843}, {'end': 1415.857, 'text': "Since we added the proxy, we don't have to specify local host 5000.", 'start': 1412.815, 'duration': 3.042}, {'end': 1417.478, 'text': 'Want to add our form data.', 'start': 1415.857, 'duration': 1.621}, {'end': 1424.321, 'text': "And then we're going to add another an options object here.", 'start': 1420.618, 'duration': 3.703}, {'end': 1425.401, 'text': 'All right.', 'start': 1425.121, 'duration': 0.28}, {'end': 1427.863, 'text': 'Now I want to add a content type to the headers.', 'start': 1425.501, 'duration': 2.362}, {'end': 1436.389, 'text': "So this takes in headers object and that's going to be content dash type.", 'start': 1428.263, 'duration': 8.126}], 'summary': 'Using axios to make a post request to /upload and adding content-type header.', 'duration': 69.153, 'max_score': 1367.236, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/b6Oe2puTdMQ/pics/b6Oe2puTdMQ1367236.jpg'}, {'end': 1516.794, 'src': 'heatmap', 'start': 1470.491, 'weight': 2, 'content': [{'end': 1474.814, 'text': "Let's let's add another piece of state here for the uploaded file.", 'start': 1470.491, 'duration': 4.323}, {'end': 1488.861, 'text': "so we'll say set uploaded file, set that to use state and that's going to be an object.", 'start': 1479.378, 'duration': 9.483}, {'end': 1496.763, 'text': "because remember what we're sending back from our server is this right here an object with the file name and the file path.", 'start': 1488.861, 'duration': 7.902}, {'end': 1501.664, 'text': "so that's what we should get back in return and we want to put that into this piece of state.", 'start': 1496.763, 'duration': 4.901}, {'end': 1511.77, 'text': "so let's go right under the the um, the request here, and Let's do, We'll get risk.", 'start': 1501.664, 'duration': 10.106}, {'end': 1516.794, 'text': "we'll get rez dot data and that's going to include the object we send back from the server.", 'start': 1511.77, 'duration': 5.024}], 'summary': 'Setting uploaded file state as object with file name and file path.', 'duration': 31.173, 'max_score': 1470.491, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/b6Oe2puTdMQ/pics/b6Oe2puTdMQ1470491.jpg'}, {'end': 1614.173, 'src': 'heatmap', 'start': 1528.003, 'weight': 3, 'content': [{'end': 1543.133, 'text': "and then we'll simply set the uploaded file with set uploaded file and will pass in an object with the file name and file path.", 'start': 1528.003, 'duration': 15.13}, {'end': 1545.034, 'text': 'All right.', 'start': 1544.674, 'duration': 0.36}, {'end': 1549.538, 'text': "Now, if something goes wrong here, if we get an error, it's possible.", 'start': 1545.114, 'duration': 4.424}, {'end': 1551.82, 'text': 'we could get a 500 error.', 'start': 1549.538, 'duration': 2.282}, {'end': 1557.645, 'text': "if, for instance, this doesn't exist, this path, or if they don't include the image, we'll get a 400 error.", 'start': 1551.82, 'duration': 5.825}, {'end': 1559.027, 'text': "So let's test for that.", 'start': 1557.785, 'duration': 1.242}, {'end': 1560.808, 'text': "Let's see.", 'start': 1560.168, 'duration': 0.64}, {'end': 1561.569, 'text': "Let's say if.", 'start': 1560.828, 'duration': 0.741}, {'end': 1570.312, 'text': 'And then this error object is going to have a response dot status.', 'start': 1563.526, 'duration': 6.786}, {'end': 1574.596, 'text': "And we'll check for 500.", 'start': 1571.654, 'duration': 2.942}, {'end': 1579.661, 'text': "If it's 500, then for now, let's just console log and say.", 'start': 1574.596, 'duration': 5.065}, {'end': 1587.674, 'text': 'there was a problem with the server.', 'start': 1582.13, 'duration': 5.544}, {'end': 1597.38, 'text': "Else, then let's console log error dot response dot data.", 'start': 1589.235, 'duration': 8.145}, {'end': 1601.924, 'text': "And remember, we sent that MSG value if it's 400.", 'start': 1597.541, 'duration': 4.383}, {'end': 1604.505, 'text': "So right here, MSG, that's what I'm grabbing.", 'start': 1601.924, 'duration': 2.581}, {'end': 1606.066, 'text': 'All right.', 'start': 1605.766, 'duration': 0.3}, {'end': 1611.331, 'text': 'And later on, this is going to be outputted in an alert.', 'start': 1607.408, 'duration': 3.923}, {'end': 1614.173, 'text': "But for now, we're just going to console log.", 'start': 1612.392, 'duration': 1.781}], 'summary': 'Handling potential errors with status codes 500 and 400, logging error messages and server issues.', 'duration': 69.059, 'max_score': 1528.003, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/b6Oe2puTdMQ/pics/b6Oe2puTdMQ1528003.jpg'}, {'end': 1681.204, 'src': 'heatmap', 'start': 1647.772, 'weight': 0.748, 'content': [{'end': 1649.033, 'text': "Okay, so let's try this.", 'start': 1647.772, 'duration': 1.261}, {'end': 1651.075, 'text': "We'll browse and grab test1.", 'start': 1649.073, 'duration': 2.002}, {'end': 1652.496, 'text': "Let's upload.", 'start': 1651.635, 'duration': 0.861}, {'end': 1655.498, 'text': 'Okay, so we got there is a problem with the server.', 'start': 1653.176, 'duration': 2.322}, {'end': 1663.212, 'text': "Now if we look in our console down here, You can see that it's telling us that this path doesn't exist.", 'start': 1655.578, 'duration': 7.634}, {'end': 1666.474, 'text': "So in client public, there's no uploads folder.", 'start': 1663.552, 'duration': 2.922}, {'end': 1667.515, 'text': "So let's create that.", 'start': 1666.514, 'duration': 1.001}, {'end': 1671.618, 'text': 'All right.', 'start': 1667.535, 'duration': 4.083}, {'end': 1675.84, 'text': "So now it's reload and try this again.", 'start': 1673.099, 'duration': 2.741}, {'end': 1681.204, 'text': "Let's go ahead and upload.", 'start': 1675.86, 'duration': 5.344}], 'summary': 'Encountered server problem due to missing uploads folder, resolved by creating the folder and successfully reattempted upload.', 'duration': 33.432, 'max_score': 1647.772, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/b6Oe2puTdMQ/pics/b6Oe2puTdMQ1647772.jpg'}, {'end': 1748.505, 'src': 'embed', 'start': 1719.282, 'weight': 5, 'content': [{'end': 1723.627, 'text': 'So it should be inside of this state right here, uploaded file.', 'start': 1719.282, 'duration': 4.345}, {'end': 1729.491, 'text': 'So all we have to do is go down to our render down here or our return.', 'start': 1724.187, 'duration': 5.304}, {'end': 1736.396, 'text': "I should say and let's go under the form, and we need to do a conditional, so we're going to use a ternary.", 'start': 1729.491, 'duration': 6.905}, {'end': 1748.505, 'text': "We're going to say if uploaded file, then let's put in, let's do a div, actually I Let's do div.", 'start': 1736.456, 'duration': 12.049}], 'summary': 'Code needs to handle uploaded file with a conditional ternary statement.', 'duration': 29.223, 'max_score': 1719.282, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/b6Oe2puTdMQ/pics/b6Oe2puTdMQ1719282.jpg'}, {'end': 1923.913, 'src': 'embed', 'start': 1871.579, 'weight': 6, 'content': [{'end': 1878.546, 'text': "I might add that to the GitHub later, but I don't want to make this tutorial too long, so I'm not going to deal with that.", 'start': 1871.579, 'duration': 6.967}, {'end': 1881.528, 'text': "We're mostly focusing on the front end here.", 'start': 1879.586, 'duration': 1.942}, {'end': 1888.915, 'text': "All right, so now that that's done, let's do our alert, our message.", 'start': 1882.669, 'duration': 6.246}, {'end': 1892.158, 'text': "We want to have a message if there's an error.", 'start': 1889.335, 'duration': 2.823}, {'end': 1895.601, 'text': "Also, after it's uploaded, it should say that it's been uploaded.", 'start': 1892.338, 'duration': 3.263}, {'end': 1902.707, 'text': "So I'm going to go back to File, Upload, and add another piece of state here.", 'start': 1896.662, 'duration': 6.045}, {'end': 1904.569, 'text': "We'll just copy this down.", 'start': 1902.727, 'duration': 1.842}, {'end': 1909.493, 'text': 'And this is going to be a message, which by default will just be nothing.', 'start': 1905.83, 'duration': 3.663}, {'end': 1923.913, 'text': "so we'll call this message and say set message, and hopefully you can see how how elegant hooks are if you haven't used them yet.", 'start': 1911.545, 'duration': 12.368}], 'summary': 'Front-end tutorial covers error message and upload status with state management using hooks.', 'duration': 52.334, 'max_score': 1871.579, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/b6Oe2puTdMQ/pics/b6Oe2puTdMQ1871579.jpg'}], 'start': 1367.236, 'title': 'Using axios for file upload and error handling', 'summary': 'Covers using axios to upload files, setting up sync await function, making a post request with form data, adding content type to headers, handling 500 and 400 errors during image upload, and using conditional rendering for front-end file upload with bootstrap grid.', 'chapters': [{'end': 1545.034, 'start': 1367.236, 'title': 'Using axios to upload files', 'summary': 'Demonstrates using axios to upload files, including setting up a sync await function, making a post request with form data, adding a content type to the headers, and updating state with the uploaded file from the server response.', 'duration': 177.798, 'highlights': ['Setting up a sync await function and using Axios to make a post request with form data The chapter demonstrates setting up a sync await function and using Axios to make a post request with form data to upload files.', 'Adding a content type to the headers for the request The tutorial covers adding a content type to the headers for the request, specifically setting it to multi-parts-form-data.', 'Updating state with the uploaded file from the server response The chapter explains updating state with the uploaded file from the server response, including extracting the file name and file path from the server response and setting the uploaded file state accordingly.']}, {'end': 1719.142, 'start': 1545.114, 'title': 'Handling error responses in image upload', 'summary': 'Demonstrates handling 500 and 400 errors during image upload, logging error messages, and creating alerts for server and path issues, ensuring the successful handling of error responses and successful image upload.', 'duration': 174.028, 'highlights': ['The chapter demonstrates handling 500 and 400 errors during image upload, logging error messages, and creating alerts for server and path issues, ensuring the successful handling of error responses and successful image upload.', "The code checks for 500 and 400 errors in the response and logs appropriate error messages, such as 'There was a problem with the server' for 500 errors and the 'MSG' value for 400 errors.", "The issue of a missing path is identified, leading to the creation of the missing 'uploads' folder and successful re-attempt of the image upload process."]}, {'end': 1954.636, 'start': 1719.282, 'title': 'Front-end file upload with conditional rendering', 'summary': 'Demonstrates using conditional rendering and bootstrap grid to display an uploaded file, along with setting a message indicating file upload success or failure, emphasizing front-end development.', 'duration': 235.354, 'highlights': ['Using conditional rendering and Bootstrap grid to display an uploaded file The author demonstrates using a conditional rendering and Bootstrap grid to display an uploaded file, emphasizing front-end development.', 'Setting a message to indicate file upload success or failure The chapter highlights the process of setting a message to indicate file upload success or failure, emphasizing front-end development.', 'Demonstrating the use of hooks to elegantly manage state The author showcases the use of hooks to elegantly manage state, particularly setting and updating messages and uploaded files.']}], 'duration': 587.4, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/b6Oe2puTdMQ/pics/b6Oe2puTdMQ1367236.jpg', 'highlights': ['Setting up a sync await function and using Axios to make a post request with form data to upload files.', 'Adding a content type to the headers for the request, specifically setting it to multi-parts-form-data.', 'Updating state with the uploaded file from the server response, including extracting the file name and file path from the server response and setting the uploaded file state accordingly.', 'The chapter demonstrates handling 500 and 400 errors during image upload, logging error messages, and creating alerts for server and path issues, ensuring the successful handling of error responses and successful image upload.', "The code checks for 500 and 400 errors in the response and logs appropriate error messages, such as 'There was a problem with the server' for 500 errors and the 'MSG' value for 400 errors.", 'Using conditional rendering and Bootstrap grid to display an uploaded file, emphasizing front-end development.', 'Setting a message to indicate file upload success or failure, emphasizing front-end development.', 'Demonstrating the use of hooks to elegantly manage state, particularly setting and updating messages and uploaded files.']}, {'end': 2699.243, 'segs': [{'end': 1987.448, 'src': 'embed', 'start': 1954.737, 'weight': 0, 'content': [{'end': 1956.017, 'text': "It's not actually going to show.", 'start': 1954.737, 'duration': 1.28}, {'end': 1963.399, 'text': "So I'm going to just save this and create a new component called message dot J.S.", 'start': 1956.157, 'duration': 7.242}, {'end': 1972.5, 'text': "And let's do RACFP, which will also give it prop types because we're going to pass in the message.", 'start': 1965.416, 'duration': 7.084}, {'end': 1975.242, 'text': "So let's do MSG as a prop type.", 'start': 1973.081, 'duration': 2.161}, {'end': 1980.825, 'text': "We'll say PT, and it's going to be a string, so PTS, and it's required.", 'start': 1975.442, 'duration': 5.383}, {'end': 1987.448, 'text': 'this extension is really cool, this es7 react snippets.', 'start': 1982.066, 'duration': 5.382}], 'summary': "Creating a new component 'message.js' with racfp, including prop type 'msg' as a required string.", 'duration': 32.711, 'max_score': 1954.737, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/b6Oe2puTdMQ/pics/b6Oe2puTdMQ1954737.jpg'}, {'end': 2222.504, 'src': 'embed', 'start': 2186.844, 'weight': 1, 'content': [{'end': 2192.448, 'text': "This will be our final state and it's going to be upload percentage.", 'start': 2186.844, 'duration': 5.604}, {'end': 2203.603, 'text': "So we'll say set upload percentage and set that to use state.", 'start': 2196.693, 'duration': 6.91}, {'end': 2205.446, 'text': 'And the default for that is going to be zero.', 'start': 2203.663, 'duration': 1.783}, {'end': 2216.321, 'text': 'So this will actually give us this this progress event will give us loaded so dot loaded and dot total.', 'start': 2207.356, 'duration': 8.965}, {'end': 2218.162, 'text': "So what's been loaded and what's total.", 'start': 2216.401, 'duration': 1.761}, {'end': 2222.504, 'text': 'So we need to do a little bit of math to get the actual number percentage.', 'start': 2218.542, 'duration': 3.962}], 'summary': 'Final state: set upload percentage with default at 0, calculate actual percentage from loaded and total.', 'duration': 35.66, 'max_score': 2186.844, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/b6Oe2puTdMQ/pics/b6Oe2puTdMQ2186844.jpg'}, {'end': 2273.699, 'src': 'embed', 'start': 2249.052, 'weight': 2, 'content': [{'end': 2257.975, 'text': 'OK Then we want to go outside that parentheses and divide by progress event dot total.', 'start': 2249.052, 'duration': 8.923}, {'end': 2261.215, 'text': 'And that will give us the actual number percentage.', 'start': 2258.695, 'duration': 2.52}, {'end': 2268.538, 'text': "OK We're going to we're going to have that progress bar that fills up.", 'start': 2262.276, 'duration': 6.262}, {'end': 2272.759, 'text': 'And what I want to happen is after 10 seconds, I want it to clear.', 'start': 2269.498, 'duration': 3.261}, {'end': 2273.699, 'text': "You don't have to do this.", 'start': 2272.779, 'duration': 0.92}], 'summary': 'Divide by progress event dot total to get the actual number percentage and clear the progress bar after 10 seconds.', 'duration': 24.647, 'max_score': 2249.052, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/b6Oe2puTdMQ/pics/b6Oe2puTdMQ2249052.jpg'}, {'end': 2419.136, 'src': 'embed', 'start': 2385.369, 'weight': 3, 'content': [{'end': 2389.231, 'text': 'And once I hit upload, you can see that it went to 100.', 'start': 2385.369, 'duration': 3.862}, {'end': 2392.553, 'text': 'It goes very fast, but it goes from 0 to 100.', 'start': 2389.231, 'duration': 3.322}, {'end': 2401.377, 'text': 'So now we can use that piece of state to pass it into a progress bar component and make that reflect whatever that percentage is.', 'start': 2392.553, 'duration': 8.824}, {'end': 2403.539, 'text': "So let's do that.", 'start': 2402.078, 'duration': 1.461}, {'end': 2408.881, 'text': "Let's create a new component called progress.js.", 'start': 2403.579, 'duration': 5.302}, {'end': 2416.354, 'text': "And let's do RACFP.", 'start': 2412.212, 'duration': 4.142}, {'end': 2419.136, 'text': "And if you don't have that extension, just type this stuff out.", 'start': 2416.555, 'duration': 2.581}], 'summary': 'Uploaded file reached 100% to be reflected in progress bar component.', 'duration': 33.767, 'max_score': 2385.369, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/b6Oe2puTdMQ/pics/b6Oe2puTdMQ2385369.jpg'}], 'start': 1954.737, 'title': 'React component message creation and file upload progress bar', 'summary': 'Discusses creating a new react component for displaying dynamic messages with prop types, destructuring, and jsx, as well as adding a progress bar to file uploads using axios and a state for upload percentage, resulting in improved error handling and a visually enhanced file upload experience.', 'chapters': [{'end': 2125.688, 'start': 1954.737, 'title': 'React component message creation', 'summary': 'Discusses creating a new react component called message dot j.s, incorporating prop types, destructuring, and jsx to display bootstrap alerts with dynamic messages, improving file upload error handling.', 'duration': 170.951, 'highlights': ['The chapter emphasizes creating a new React component called message dot J.S, incorporating prop types and JSX to display dynamic messages, ensuring error handling and user feedback.', 'The speaker mentions utilizing the es7 react snippets extension, highlighting its usefulness for efficient React development.', 'The transcript also addresses improving file upload error handling, demonstrating scenarios such as no file uploaded and server errors, providing insight into potential issues and their resolution.']}, {'end': 2699.243, 'start': 2125.688, 'title': 'Adding progress bar to file upload', 'summary': 'Demonstrates adding a progress bar to a file upload feature using axios, setting up a state for upload percentage, and utilizing a set timeout function to clear the progress bar after 10 seconds, resulting in a visually enhanced file upload experience.', 'duration': 573.555, 'highlights': ['Setting up a state for upload percentage and utilizing the progress event to calculate the actual number percentage The chapter explains setting up a state for upload percentage, utilizing the progress event to calculate the loaded and total values, performing a mathematical calculation to derive the actual percentage, and updating the state accordingly.', 'Utilizing set timeout function to clear the progress bar after 10 seconds The chapter demonstrates the use of set timeout function to clear the progress bar after 10 seconds, enhancing the user interface by ensuring the progress bar does not remain at 100 percent indefinitely.', 'Demonstrating the creation of a progress bar component and integrating it with the file upload feature The chapter illustrates the creation of a progress bar component, incorporating dynamic styling based on the upload percentage, and integrating it with the file upload feature to visually reflect the progress of file uploads.']}], 'duration': 744.506, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/b6Oe2puTdMQ/pics/b6Oe2puTdMQ1954737.jpg', 'highlights': ['Creating a new React component called message dot J.S, incorporating prop types and JSX to display dynamic messages, ensuring error handling and user feedback.', 'Setting up a state for upload percentage and utilizing the progress event to calculate the actual number percentage.', 'Utilizing set timeout function to clear the progress bar after 10 seconds.', 'Demonstrating the creation of a progress bar component and integrating it with the file upload feature.']}], 'highlights': ['The chapter demonstrates handling 500 and 400 errors during image upload, logging error messages, and creating alerts for server and path issues, ensuring the successful handling of error responses and successful image upload.', 'Setting up a sync await function and using Axios to make a post request with form data to upload files.', 'Creating a new React component called message dot J.S, incorporating prop types and JSX to display dynamic messages, ensuring error handling and user feedback.', 'The chapter explains the process of uploading a file in a form using React, including using React dev tools to inspect file state, preventing default form submission, creating form data, and making a request to the server.', 'Setting up a state for upload percentage and utilizing the progress event to calculate the actual number percentage.', 'Using conditional rendering and Bootstrap grid to display an uploaded file, emphasizing front-end development.', 'The chapter discusses creating a file upload feature using React and Express, focusing on the frontend UI and utilizing Express File Upload package.', 'Creating a React file upload component using functional components and hooks.', 'Using FAB and F a dash react classes for displaying the react icon.', 'Adding a content type to the headers for the request, specifically setting it to multi-parts-form-data.']}