MERN STACK UPLOAD ARTICLE WITH IMAGE

foreign [Music] guys and welcome to the next step of this project so I report especially for my supporters for patrons and in this video I want to show you guys how you can upload uh image with your articles so how you can edit your image with the article for example let's edit this one let me delete uh for example blah blah blah blah text right here and let me change the image so I prepare the images so I choose this one and you can see the name so update all right and you can see the image is uploaded all right so guys I want to show you how to implement and you can use in your projects all right so let's start so let's make those this window and let me close this window guys so you need to access to your database and if you watch the whole series I showed how to create database and how to connect database so you need to sign in to the mongodb atlas create the cluster if you don't have uh create a database and create inside the database and then the collection which I call the articles and you need to connect to database where's the connection let me see uh clusters connect and go here you can grab this link then you go to the project uh okay let me see which close this one so this one we're gonna start with this one and you go to the back end EnV file EnV and from here you just paste and you go back to your database and database access and here here's the user who can access so in a file right here here's the user and here's the password and here is the name of database okay in my case it's uh let me show you collections this database okay with the collection all right guys so let's start let me show you good stuff okay so where we're gonna start first uh we're gonna go let's close the client and yeah and one one more mention guys when you download the project so you need to uh open Terminal go to the server folder okay uh yeah npm install you need to do npm install all right all right and you need to let me show clear you need switch to the client to UI okay client good and you need to go to the client folder and not actually in a folder you already in a folder and do npm install uh step two okay so to just install the all the dependencies okay which you need to work your react and work your back end all right so I'm gonna switch back to my server folder the main okay and now to start the server I'm gonna use npm run Dev okay okay why this way because I add the some features here so I'm gonna start let me show you I want to start this server and the client in the same time so I need to install concurrently you guys too and you need to follow all this uh which you got the the packages just install get reinstall it if they not not working okay so all right so server working let me check and of course it's blank as uh we don't have nothing in our database all right so now we're gonna create the feature to how to upload the image with our article so now of course we can now add new article so um new I don't know dudes okay test title and test article and let me post okay for success and go home just reload uh okay and we got our post okay now of course we can go and see the post go back and we can delete the post Mr load all right so now let's do upload uh with the image upload right close up close this up first we need to go to models and right here I'm gonna add right here for the image I'm gonna name it article image all right and type gonna be the string all right and require D I'm gonna say that true all right because we don't wanna uh somebody posts or your administrator or you post without the image all right so we're done with the schema let's go to the Articles it's in routes open articles and now let's import the motor so we're gonna commence motor uh required motor okay okay now let's create the storage where we're gonna store our file and how we're gonna call it okay so let's create a variable const and I'm gonna name it storage and we're going to say malter dot disk storage it's a Motors method okay building method and here we need to add the destination where we want to store so this no okay destination and destination and require comma file and call back CB or callback okay all right it's gonna be the function is six okay and call back and we're gonna store the file in a folder we'll create in a minute guys so the path gonna be in the client client public and up close okay that's how we're gonna name my folder okay let's do it right now guys so in the public let's create a new folder I'm gonna call it uploads okay and here we're going to store all our images all right so we're done with the destination Now Let's do let's work with the file so file name we're gonna specify what file name how we're gonna store so request file and call back okay and it's gonna be the function and now file name uh so we're in the Callback callback oh I'm gonna call back I want to say first to no then we're gonna say file dot or region now name original name it's uh it's it's like a name of the file okay how you're gonna name your image that's gonna be original name all right I hope you guys understand what I'm trying to escape I try to do my best guys sorry if something confusing but you will get it on the process you will get it okay so don't worry okay so let's now uh create another variable const we're gonna put all these functions in here in the app loads or just upload you know you can name it forever you like and I'm gonna say malter and we want to say storage in storage all right so now we created the functionality how to store and the image okay now let's move forward now we need to add functionality right here when we post okay let's do it uh we're gonna use the upload that single because we want to upload single file and we're gonna say the file name um article image I will show you guys on the front end what is it where is it and how we store it so okay now don't forget the comma and now let's add right here there uh article image Chrome image so request Dot file not the body but file and our SQL image okay our schema name okay all right so now let's let's do this for the update because we want to update by ID remember no it's a find one right here update by ID so let's do same thing in here upload and that single and that's gonna be the article name okay come on here and right here we're gonna say as we use the promise so I'm gonna say article that our our image and it's gonna be uh equal request in that file that our original name and let me see huh right here guys it's a file the original name my bad original name all right I think everything good and we're ready move forward to the uh UI to client side okay it was something missing we gonna come back so we have the uploads Let's uh go right here in a source components first let's work on the ad okay and in here right away we you remember if you follow me on this project we use the hooks so let's create the state for our file const this file name and set file name all right and use State okay let's create the function to grab the value for our image Okay so const I'm gonna name it on change let's do file okay and I'm gonna add the parameter and right here we're gonna set file name I'm gonna use e dot Target dot file and in Brackets zero first one okay one file all right so now we're gonna use guys instead of Articles we're grabbing the state we're gonna use form data uh let me show you the JavaScript form data.js you can check on mgn Mozilla documentation we're gonna why we use form data as form data allows to store with the file okay store the data to the database files with the text in our case and we're gonna use this method okay we're gonna append okay you can check the documentation guys and we're gonna grab the name value all right so let's do this and we're gonna delete this I'm gonna create uh the variable accounts form data and it's gonna be the new and form data okay now we can use it and we're gonna say uh form uh that that append and we want to set the title and title okay so let me copy make a faster a little bit and here's gonna be the article and article and copy paste two times and this one gonna be the after [Music] name Arthur name okay and here's gonna be the our image our article image button here it's gonna be our state so it's gonna be the file name all right grab our state in here we're gonna instead of Articles guys now we're gonna use the form data we're gonna store it multi-part okay and I already added here okay so you need add ink type multipart forward slash form data in the form that's important without this line it's not gonna work all right so let's move forward now we need to add the choose file okay let's it's going to be the form group inside the form group I'm going to create the label and it's going to be html4 that's a four file and the text choose our typical image all right and let's create input all right it's going to be the file let's add the file name the file name gonna be article image you remember when we store uh where's our articles and we store with the upload single where is it we use article image okay and we store with the original name all right let's move Let's uh give the class name and it's gonna be the form control file okay I think that's it and one more thing now unchanged um change file I guess right and change file right but not in here right here um change file file right here okay all right so I hope now we're able to store it got I guess let's see let's check guys how work our application so uh Let me refresh let's see if it's empty the database okay no articles no data let's check if we can store some uh let's check the public uploads it's empty and let's try to add article so test a name and test title and test article now let's grab the image let's grab this one open okay we can see the name oops uh we're gonna Arrow cannot read property zero let me check read cannot read property zero so add articles and here's the type of guys files okay files not the file but files you'll see all right so let's try again test name test uh title and test article all right let's see if it's gonna work Now Arrow let's post okay new articles post let's check let's okay we can see because we need to add add the path to the image but let's check in our database if we grab the original name yes okay here's the original name this is a path it's going to be the path to our image the name of the image original name all right so let's move working good I like it let's check if we have the image yes okay we'll pull image to the folder okay so far so good now we need to add the feature to our articles all right in the Articles we need to add the image so with mapping right here all the posts from the database and right here let's add uh here's the title right here let's add the image so mg the path gonna be uh template literals and we're gonna say app uh loads and we're gonna use dollar sign and curly braces article because we mapping okay article and RT egral image the schema name all right an alternative let's add three dots as supposed to work now let's check I'm going here yes okay we can see the image let's give the style so the style right here is going to be the let's do with and now let's do 40 let's check okay that's enough all right so now let's add one more let's just check one more test to name test uh to title and test to our article let's choose image I'm gonna take this one okay let's post good let's see let's reload uh the second post okay and you can see in a database if refreshing all right good and now let's work on an update let's go to edit article and on the top we need to add actually now it's kind of same let me just copy this line to make process faster we're gonna delete this and let's grab the this function so we can grab the the value of the image okay and right here let's just copy our form data okay and put right here okay and down here we need to set the image so set file name okay it's going to be response that uh it's gonna be the data uh and that article image all right so now let's go down here we need to add the form let's go to the add articles and we just copy this form this one let's put right here after text area let's save and let me check one more time as everything I'm supposed to work all right so let's let's check guys if our edit article working articles is not the fine line 28 okay it's a typo I'm pretty sure typo articles I hope of course we need to add this form data right here okay and change file not defined where's the 89 what's happening here nd9 and change okay uh let me add all right so let's see the form okay we don't have first row on the ink type I need to add the multi part form data but I don't think is this is a problem and let's not reading because guys my apologize I need to move up right here let's mistake but anyway uh let's save let's open browser okay we got our and just let's edit okay we got the name let's just add some updates and now we need to add some different image okay date I see it's not working because not success let me check why is that status 500. fails okay form data right here everything good let's check the articles right here so add right here guys here's a mistake image article image yes okay guys my apologize so let's try upload okay I mean update all right so good let's check let's see yes all right so now we get functionality guys but last thing when we click to get individual info this article let's display the image to do that it's easy okay let's go to the article right here so we need to add the image right here first of all we need uh let me graph from here the hook I'm gonna pass the hook right here and we need to grab the data set uh file name and response that file of data and that article image okay and right here let's add the image and the source we're gonna grab from the folder some two big ticks uploads and dollar sign for the braces and file name file name with the capital N our right file name okay let's highlight so not supposed to work the three dots right here uh supposed to work all right I have image let's make a style a little bit style uh let's do margin let's do zero on the top Auto right and left with uh let's do 40 percent okay and the last one I'm gonna move to the center display I'm gonna add the flex let's see if it's Work loading all right these display typo sorry guys all right good uh let's check this one good all right guys so we're done I hope you like it so leave the comments okay guys if you have any questions I will be really really happy to answer you any your question and help you alright guys see you in the next videos bye [Music]

Channel: 80/20 Coding

Views: 37,176

Keywords: react, mern stack tutorial, mern, MERN STACK, node js, MERN, react js, CRUD, react bootstrap, react and node, mongodb, mongodb tutorial, express js, crud application, reactjs, react full stack, react node express mongodb, react.js, react js crud, javascript, coding, programming, software development, top programming languages, node.js, nodejs, node, web, backend, frontend, back end, how to make an app, mern stack project, mern stack tutorial for beginners

Id: dapS3HkX3Wc

Length: 29min 54sec (1794 seconds)

Published: Wed Oct 21 2020