React JS & Asp.Net Core Web API - Image Upload, Retrieve, Update and Delete

quick summary of this tutorial this is the second video in this series of react image upload retrieve and delete with asp.net go web api in previous tutorial we have implemented image upload in this tutorial we will be displaying all of the uploaded images back in react application and will be implementing rest of the operations image update and delete hi all welcome to quarter fiction before starting this video i would like to ask you a favor if you find this video helpful please thumbs up this video if you are new here please consider subscribing to this channel and click on bell icon to get notification immediately when i upload new videos like this most of the video lesson here also has a written blog post you can find the link in video description and you can grab code from there as well without further ado let's get started with this topic i have given the link of first part in video description and inside the first comment of this video last time we have been discussing serving static files from an asp.net cover bpi project so first of all i'm going to update this web api code project for retrieving the image inside this images folder with a get request like this for that first of all inside this startup file here we have to enable serving static files so we can call this function here use static files into this function we have to pass an object of this type static file options well file provider is equal to new physical file provider inside that we have to pass the directory from which we have to serve the static files so we have to pass directory path for this images folder so we could do this path dot combine function can be called as a force parameter we have the base path up to the folder images so environment dot content root path into that we can append this images folder along with file provider we have to set this request path forward slash images so in order to active images inside this images folder we have to make the request to this url here so that's what we have done previously with this request before trying that again first of all we have to build this project after successful build reload this page here boom now we are serving static files from this folder images now with this employee controller web method get employees we can retrieve all of the employees along with the image back to our react project for that first of all inside this employee model we have to add one more property which is image source you could see the same property inside our component here image source through this property will be passing this url for the image that we have just uploaded so back to the model class let's add one more property which is not to be saved inside our table so add this attribute not mapped string image source now back to the web method here actually with this return statement here we are retrieving all of the requests inside this employees table through entity framework we don't have anything to do inside our react with this project image name actually we have to have the image path so that we can show the image in our react project so we have to update this image source property inside this collection here for that we can execute this link queue expression here by calling this function select we have this arrow function inside that will return a new model employee model first of all we have employee id we will be using the same value that we have retrieved from our db employee name occupation image name this should be same as the table color image name and finally here we have the image source inside this property we have to return an url for the static file like this so i'll be doing this first of all we will call this function string format inside that we have this template this would be a similar to the uh http or https and then we have this domain name and after that we can pass this uh images folder and then name of the image now let's set values for these properties request dot schema it will return the value http or https then request dot um host in this case it will be localhost then the port number for the second place we have request dot path base in most of the case this would be empty stream if there is an alias used for your website then that will be served through this property and finally for the third place we have image name since we have some new changes let's build this project again back to the react app here now let's make the get request inside the parent element employee list here for that we just need to call this function fetch or the url will be c for that i will define a new function refresh employee list now let's invoke this function here fetch all if this request is successful we can execute this callback function with response here through this get request we are achieving all of the employer requests with uploaded image url inside this parent component i will be saving that inside a state object here so first of all let's add corresponding react hook function use state so here's the list of records employee list and corresponding set function let's initialize that with an empty array now let's call this same set function here into that we just need to pass this response dot data we have the returned array from our web api project all of the response will be the inside this data property from response if there is an error we will be showing that in console so let me copy this and pasting here now we could call this function after insert operation here we have to call the same function when this a page is completely loaded for that we need a life cycle event like we had in our class based components in react like a component did mount but in case of react hook we can use another method first of all we have to import this function use effect and we just need to call that function here is effect here we have the uh callback function and here is our second parameter array the main use of this function is to define a side effect for a state object for example inside this array if we pass employee list whenever there is a change of value for this state object employee list this callback function will be invoked now to make an alternative for component did mount we just need to clear this array now this callback function will be invoked when this application is completely loaded here now we can call this function refresh employee list since we have defined this function as an arrow function using this constant refresh employee list i think we have to move this function after defining this function here or you could define this function in conventional way this function that's it now let's assume when page is completely loaded this employee list state object will be populated with our inserted records now we have to show them inside this second div here instead of this duo let's add a table and a t body now let's i trade through our array employee list here so this is what we are going to do in a single iteration we'll be displaying a single array with three columns the number of iteration would be one-fourth of number of rows inside the collection so i will make a new array here math dot c employee list dot length divided by three so we have to make these much iteration so this would be a float number in order to round this number to the next integer number we have called this function c and we are going to iterate with that array here so with this separator all of the elements or the index inside the array can become a part of another area here and we are going to i trade through that array by calling this map function here inside that we have this callback function with element and index from this function we just need to return a tr element so each of the employer code will be displayed in a bootstrap card element like we have displayed the form in our employee component here so first of all i'm going to define a new function here image card with a parameter that accept the record inside this we just need to return this div with the class card from bootstrap so that we have this uh card body first of all let's show the corresponding employee name so let's retrieve that from data just below that we can show the occupation now about this body div here let's show corresponding image we can set the src from our image src property so data dot image src i will set these bootstrap classes card image top you want to show this image in a round circle so let's add this class rounded circle now we can use this function to render employee details inside this td cell here before doing so we have to make sure whether that particular element is present inside this list or not suppose there are four elements inside this array so four by three is equal to one point something so when we round them to next integer we will have two so there will be two rows inside the first row we can display first three employees and for the second row we only have one td cell so always check whether corresponding index is already occupied or not so we could do this employee list we could calculate the corresponding index from raw index like this three into i if it is occupied we can call this function image card by passing corresponding image record else will return null so this is how we can show a single employee inside a td cell like this we have to have two more td cell so let me copy and paste that below plus one for the second cell actually you could avoid this ternary operator for the first td cell because there will be always the force td cell let's remove that from here back to the application boom so here we have retrieved all of the uploaded images back to our react project from web api call now you could see this error for unique key props you might be familiar with this error if you have rented elements through iteration we just need to set the key property for outer element which is equal to the index of iteration okay let me save this back to the application now we have cleared the error now for the proper styling of this table here i have prepared some css rows let's paste that inside our global style sheet here hope you like this now we have to implement update operation for already uploaded images and corresponding details now before discussing rest of the operations let me insert few more employees here so here we have inserted five employees now let's implement the update operation for that you so want to select any of these employees from this table and we have to populate corresponding employee details along with the uploaded image here after making required changes inside these form controls we just need to submit the form corresponding changes will be updated so first of all we have to wire up on click even for this card element here that we can do inside this parent component employee list so here we have the card for the employees let's add an on click even here here we have to call a function by passing this data object when there is a parameter to be passed for an event function we have to call that function in an anonymous function like this so here is the function show record details into that we just need to pass this data now let's define that function up here show our code details with a single parameter data actually this data represent an object for selected employee to store that object i will be creating a separate state object here a code for edit and the set function set record for edit let's initialize that as null now inside this click even here we will set the object with the past data object now as per our requirement inside the click event we have to show the corresponding employee details inside this form we have designed this form inside this child component here employee so we have to pass this object a code for edit to the child element so let's do that here a code for edit is equal to record for edit now let's access that through props parameter in child component record for edit now i will define a side effect function for this state object with the help of user effect function so here it is use effect we have this callback function it will be called whenever the value inside this uh record for edit object changes first all inside this function we will check whether this object record for edit is null or not if it is not now we will set the same object into this values object here so set values function into that we can pass this record for edit object so whenever we update this object values corresponding fields inside this form will be populated let's check that here boom when we select any of these employees corresponding employee details is populated inside this form here after making required changes we have to submit this form when we do that we have to update corresponding record in our web api project for that we have to update the function add or edit we have called the function inside this form submit event here now inside this parent function add or edit we have to handle both insert and update operation we already implemented insert operation here in order to identify whether we have an insert or update operation we can check the value of primary key employee id here if employee id is 0 we can say we have an insert operation otherwise we have an update operation i will check the value of employee id here so form data dot get function can be called and we will check the value of employee id since this function returns a string i will be equating this with a 0 as a string if employee id is 0 then insert operation will be conducted otherwise we have to implement update operation for now i will just copy this function called create here instead of create we have update into this function we have to pass the corresponding id and the updated object updated object is already passed here inside this form data now let's pass the id that we can retrieve like this if this operation is successful we will reset the form and we will refresh the employee list i hope we have done everything for update operation inside this react application now let's check what we have to do inside our asp.net core web api so with our update operation we'll be consuming this uh put web method here put employee model like we have done for this post request we have to add this attribute from form before this model clause here inside the function first therefore we will check whether the id passed through this parameter and the employee id inside the model is same or not if they are say the state of the object will be set as modified we have some extra works to do since there is a file uploader inside the form there will be two cases based on whether we have changed previously uploaded image or not we can check that by using this property inside our model image file if this property is not null we can say there is a new image selected for replacing previously uploaded image so we have to handle that situation inside this put web method here so here is the if close employee model dot image file if it is not null first of all we have to delete the previously uploaded image and then we have to save the newly selected image so let's do that here we have already defined a function for that save image into that we have to pass the corresponding image file now before doing this we have to delete the previously selected image so let's define one more function here known action public delete image such that we just need to pass this uh image name only first of all we have to generate the actual physical path for the image from this parameter image name for that we just need to copy this line from here and pasting here now to delete the particular image we can do this file exist function can be called inside that we will check whether this path of image exists or not if it access will call delete function from this file class here delete here we could pass the path now this function delete an image with this name here now let's call the function before update operation delete image let's pass the image name here we have not done anything for this property image name in our react application we are just passing through inside this property will be having previously uploaded image which should be the inside this images folder so before saving and updating newly selected image we will delete the previously uploaded image so that we can optimize our space now let's build this project again now i'm gonna update this employee here daniel hecker before doing so let's check the corresponding image name here here we have the corresponding uniquely generated name which ends with 99 now let's try to update the employee here now this time let me select another image from the folder i will select this image for mason corner in order to indicate this field is already updated i will append this as check marks here submit the form let me check the console window here we have an error failed to load the resource the server responded with status 400 from this url itself forward slash employee undefined so there is a problem with our employee id here inside the web api model class here we have named the property as employee id with capital d as we have mentioned here this conversion will be there so employee id will be converted into employee id but corresponding to this property we have employee id with small d here so these two properties won't be binded together since this id is an abbreviation for identifier in almost all cases i have been using upper case for abbreviations so i will just rename this property to uppercase for renaming this property you could do this press f2 update it properly hit enter let's update that here also we have used the same in our parent component here employee list so let's update that here and here let's save this back to the application now let's try to update this employee again replace the image with a mason corner image just adding this asterisk marks to input field just to identify this is updated currently this employee image is here after this update operation there will be two images starting with uh this image name mason corner and this image will be deleted let's check that after this form submission i think it worked see here we have two images with mason corner and previously daniel hacker image is already deleted and here we have the updated values with new aztec marks now you could check the update operation for this employee this time i'm not changing this image just updating these field values here spectre submit the form we only updated corresponding employee name now finally let's do the delete operation for uploaded image for that first of all we will add a delete button beneath these employee details so back to the uh parent component employee list let's add a delete button in a new line so i will have this break line tag here so here is the button let's apply a few classes from bootstrap btn btn light and we have one more custom class delete button so initially this button will be hidden when we hover on corresponding cards this uh button can be seen inside this button will be showing this uh phone awesome icon so this is how it looks like when we click on this delete button we have to delete corresponding employee so let's buy up a new function for on click event here on click here we will call this function on delete into this function we'll be passing this default event parameter of click event e and then we have to pass the corresponding employee id also so first of all i will call this pass in function into that we can pass this uh data dot employee id now let's define the function up here on delete with two parameters e and the id inside this function we can call this function delete with axios method delete into this function we just need to pass this id before doing the actual delete operation we have to confirm the operation from user so we can call this confirm function from javascript are you sure to delete this record if you so confirm this operation we can call the method here employee api dot delete function into that we can pass this id here we have the response callback inside that we will just call this function refresh employee list to update employee array and here we have the catch function but we have to just log the error object now inside this function we have to do one more thing for this card element we have already wired up a click event here inside that we have this button delete button it also has a function for on click event so when we click on this delete button both of these on click event will be triggered we just need to call this on delete function without calling this function show record for details we can call this function stop propagation from this default parameter e here inside this delete operation we are going to call the delete web method from our api so let's update corresponding web method also so here it is delete employee inside the method first therefore we will retrieve the corresponding employer code with the given id if there is no record with the given id we will return not font for not for error if there is a record we will delete that by calling this function remove before doing so we have to delete corresponding image also like we have done inside the update operation so let's call the function delete image into that we can pass the image name so employee model dot image name let's build this project after successful build back to the application now let me delete this employee here confirm this operation so here we have deleted daniel hacker record so that's all about react image upload update and delete operations with asp.net cover api you could find this project github repository from this video description if you found this video helpful please thumbs up this video and for more awesome videos like this please be subscribed to this channel caught affection please share this video with your friends and colleagues so that they can benefit from this have a nice day bye

Channel: CodAffection

Views: 32,102

Keywords: React & Asp.Net Core Image CRUD, enable serving static files in asp.net core API, retrieve uploaded images from .net core API, display uploaded image back in react app, update uploaded image in .net core API with ReactJS, reander list of images in ReactJS, iterate through table row and cell with map function in ReactJS, Delete uploaded image in asp.net core API with react, Image Gallery in React with asp.net core web api, CodAffection

Id: jSO5KJLd5Qk

Length: 29min 14sec (1754 seconds)

Published: Mon Oct 05 2020