Image Upload in React with Asp.Net Core Web API

quick demo of this tutorial in this video we will discuss how to upload images in react.js through asp.net core web api we will be demonstrating how to upload images retrieve and delete images like an image gallery in react with web api so i'm sure you will find this tutorial helpful for your upcoming react or dotnet core projects so please watch till the end of this tutorial hi all welcome to code affection 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 first of all i will create an asp.net code web api for image upload and then after that we will build the friend in react.js to create the api here is my visual studio 2019 so let's create a new project now select sp.net core web application to demonstrate this topic we will be dealing with employee details so i will name this project as employee register api select the location where you want to save this project click on create now select this api template here click on create now we have a brand new web api project we will be saving the uploaded images inside this project directory in a new folder called images and the corresponding employee details along with the image name or path will be saved into sql server in order to work with the database we will be using ndd framework core so first of all we have to install corresponding and nuget packages so right click on this project here and click on manage and you get packages then from this browse tab we have to search for corresponding packages microsoft entity framework core now let's install this package here here we have install the package entity framework call along with that we have to install these two packages sql server and tools so let's do that accept the license now let's install the final package entity framework code tools now that's also done so we have done with the installation of nad framework core packages now let's define the db model class for that first of all we'll create a new folder here models let's create a model clause for employee employee model first of all we have the primary key for the table which is employee id so i will mark this property with the key attribute now let's add remaining properties employee name occupation finally we have image name once user upload a new image will be saving that into this project directory as we have mentioned but we'll rename that image with a unique name so that we can avoid duplicate images that image name will be saved inside this property or column image name now let's specify these column types so that we can use this attribute column type name is equal to n work fifty let me copy this and pasting here for rest of the properties here for now that's enough for this model class now let's create a db context class right click on this images folder add new clause employee db context i will inherit this class from db context now let's add the constructor here with this parameter db context options of the type employee db context as options along with this constructor we have to call the parent class constructor also for that we can use this keyword base into that we can pass this save options parameter as you already know the db context class in ndt framework decide what should be the in actual physical db so if we want to create a table for this employee model class we have to have a db set property for the model so let's add that here db set of the type employee model class as employees so there will be a table called employees now everything for database is configured except the connection string which is to be passed into this constructor employee db contacts here through this parameter db context options for that we'll be using dependency injection in asp.net co we have already explained how dependency injection works in asp.net co even though i will explain it here in brief we can do the dependency injection inside this startup clause here we will do that inside this configuration services method here so services dot add db context function can be called which is of the type employee db context so with this statement here we are trying to create an instance of employee db contacts class so we have to pass the value for this constructor here it should contain two informations like there should be adb provider meaning it can be either sql server mysql postgresql etc so we have to specify the db provider along with that we have to provide the connection string also so i will define this arrow function here with this parameter options options dot use sql server function can be called for specifying the db provider as sql server into this function we have to pass the connection string we will be saving that inside this json file app settings here in order to access that we can do this configuration dot get connection string function can be called into that we have to pass the connection string name it will be something like dev connection now let's define this connection string inside this json file here app settings we will be adding a new element connection strings inside that we can add the connection with this key dev connection for now i will paste the connection string of the db that we are going to create through entity framework called db migration we'll be creating a new employee db inside this sql server instance if you are struggling with your db connection string i have already made a video on that you could check that from video description i always recommend you to check the video description for related videos or article okay so that's it we have done with the db connection details i will explain how this dependency injection works once we create a controller inside this project before that let's execute db migration commands so first of all we have to build this project here in order to execute db migration command we have to open package manager console in my case you could already see the package manager console here if you can't see this console window just select this project from solution explorer then go to tools and then you get package manager console then package manager console make sure you have selected the exact project from this drop down here first of all we have to execute this command add migration then name this migration here i will name it as initial create hit enter as a result of this command execution you could see a new folder called migrations with respective c sharp files here now finally we have to execute one more command update database we are done with migration commands let's check whether we have created the database or not so here is my management studio let's expand this databases here you could see the new db here if you can't see that just select this databases folder then hit this uh refresh button here now let's check whether we have created the employees table here so here it is let's check its design as you can see this table is created as per our db model here now back to the web api project here now let's create a controller for this model before that let's build this project after successful build right click on this controllers folder add controller select this template api controller with actions using entity framework model will be employee model employee db context i will name this controller as employee controller click on add as a result of scaffolding mechanism here is our employee controller with all of the required web methods we will be discussing each of these verb methods once we consume them from our react application before that i want to explain how dependency injection works inside this application from our startup class here with this function called adddb context the framework will create instance of employee db context with this db provider and connection string now whenever we make requests into these employee controllers here an instance for this employee controller will be created as you can see this controller has a constructor with this employee db context the value for this constructor parameter of the type db context will be passed from this asp.net core dependency injection here which is automatically managed by the framework itself so the rest of the web message inside this controller will be using this property to interact with the db for now i will conclude this web api part for image upload i will be updating these web methods in various stages of the app development now let's design the client-side app in react with an employee form for uploading employee profile images so let's create the react app inside this folder directory here so first of all we have to open command prompt from this same folder directory for that you can use this shortcut inside this directory here just type cmd then hit enter and thereby we have opened this command prompt from the same folder directory here now to create a react app you can execute this command npx create react app the name of the application it would be employee register client hit enter finally here we have successfully created the react app as a result of that you could see the new folder here now let's navigate inside the project folder which is employee register client in order to develop this application i will be using visual studio code editor for that you can use this command code space period so here we have our brand new react application first of all let me run this application with that let's open one terminal and then let's execute this command npm start so this is how the fresh react app looks like as you know inside a react application will be having a root component which is here app.js this default div here is responsible for the default view of the application here now let's add components for employee i will be creating a new folder here components now let's add the parent component employee list inside that we will create a functional component using this react snippet rfc react functional component like this we need one more component for designing v4 i will name it as employee now let's define the functional component here let's start with this index.html here here we have the html declaration with head and body part all of the components inside this application will be displayed by replacing this root div here in order to design this application i will be using bootstrap so first of all let's grab corresponding star sheet reference so go to the official website getbootstrap.com let's copy the css reference and then i will paste that inside this head tag here we will be using phone over some icons also so let me copy corresponding style sheet also cdn for phone awesome usually i copy the css reference from this website here cdnjs.com i will copy this reference for all.min.css file here let's paste that here i would like to apply the google phone drop auto inside our application so let's grab corresponding style sheet also so here is our phone roboto let's select frequently used phone weights from here then from this embed tab you could copy the link reference i will paste that inside this index.html here then we can apply the phone using this css rule here so let me copy this here is our global style sheet index.css here application already used some default fonts i will replace that with the copied css rule now back to the root component app.js first of all i will get rid of these default divs from here now here we have the uh the container from bootstrap we don't need this default react logo reference inside this container div here we want to show this our pattern component employee list for that you can add this tag employee list if you select this option from auto suggestion corresponding import statement will be added here now rest of the development can be done inside these two components employee list and employee now starting with this parent component employee list first of all we will be using bootstrap grid system so we will be having this radio inside that we will be having two columns so class name is equal to call uh md4 let me copy paste this below now rest of the eight columns can be applied to this second div here inside this first div here we can show this uh component employee but we have to design a form for employee containing image upload inside the second div here we'll be showing a list of um employee records now inside this employee component here we'll be designing a employee form now this is how the application looks like we have two bootstrap columns for employee form and list of employees now about these two divs here i want to show app heading for that we'll be using jumbotron component from bootstrap so i will copy this code block from here let's paste that here inside another div class name is equal to um call md12 we don't need this para here so let me remove that from here now let's name this application to something employee register now this is how the app header looks like here we have some extra padding and we want to center this app header here so i will apply this bootstrap class padding on vertical axis of the range 4. in order to center this element we can use this bootstrap class text sender now let's design this employee form here we will do that inside this component employee here now let's enter into zen mode so that you can see properly what i am typing here for that you can use the shortcut ctrl k is it if you want to see the shortcuts on your ide you can use this shortcut here ctrl k s and then just type zen mode here you can see the key binding control k is it so hold ctrl then press k then is it in zen mode we can hide everything other than the editing file now let me increase this font size here now let's add the form here form now to prevent previously posted form data from input controls like auto suggestion or autocomplete we can add this attribute here autocomplete as off and then to avoid default html5 validation we can set this property no validate now you could see this red squiggly line here inside a react component return statement it only allows one parent outer element here we have two elements this form and div in order to avoid this problem we will enclose them with this element react fragment okay just about this form here i want to show a heading so i will add this class name here container text sender inside that let's have this para with this class lead from bootstrap we will just display this an employee now inside this form here let's start adding our input controls i will be showing input controls inside this uh bootstrap element card so first of all we need this div with this class card inside that we need another div like this so let me copy paste this with this class class body now in order to manage input control values we'll be adding a component state property we will do that with the help of react hook functions so let's import that up here use state and use effect now let's define a component state object values and corresponding set function set values and we can initialize that with this function use state to initialize this object i will be defining another object here initial or field values now let's add properties for each of the controls that we are going to add inside this form here like we have mentioned inside the um web api project here first of all we have employee id initially i will set it as 0 then we have employee name smt string and then we have occupation and then we will have this exact property image name that we used to have inside our web api model here so here it is image name smt string and then we need a property image source inside this property will be saving the image source which is to be shown inside the image preview for now i will leave it as empty string here and here is our final property image file which is the exact file that is selected for upload initially i will set it as null here now let's pass this object initial field values into this state object values here now let's add input controls into this form here first of all i will add this div from bootstrap form group inside that we have this input control here i will apply this bootstrap class here form control this is for employee name so i will set the placeholder as employee name now we have to set this name property here as employee name now inside this control will be showing the value from our values object that we have created up here so value is equal to values dot employee name like this we need one more control for occupation let me update these attributes accordingly occupation values dot occupation now when we set value attribute of an input control dynamically like this we also have to wire up on change even also so let's do that here on change is equal to we'll be defining a new function handle input change let's apply the same function here also now let's define this function here handle input change with a single parameter which is the default event parameter e the main aim of this function is to update this state property when you search change values inside this input control first of all we will retrieve the value from this control so we will extract the name along with the value we can access that from this default parameter here e dot target inside and on change event this e dot target object represents the corresponding input control from that we can retrieve these properties name and value now we just need to set this current value inside the corresponding property inside values state object for that we can call this function set values into that we'll be passing an object we just need to update this property name is equal to value so this will be replaced with the corresponding property from which this uh unchanged event is triggered into that property we have set the current value from the control and rest of the properties inside this values object should be the as it is so we have to apply this uh separator operator with the values object now let me save this and back to the application here so here we have the input controls for employee name and occupation now let's add a file uploader for image for that i will add a new div here with this class form group now let's add the input control which is of the type file here we only need to accept a file of the type image so image forward slash star now let's apply this bootstrap class here form control file so here we have the image upload when user select an image for upload we have to show the corresponding image preview for that i will be adding a new ing control just about this card body here so here it is img src is equal to we can access that from our property up here image source values dot image source i will set this bootstrap class here card image top by default this property img source is an empty string we have to set a predefined image when there is no image selected for upload first of all let me escape from this zen mode so press escape twice now i will be adding a new folder img to store the default image i have already prepared a default image which is here so let me drag the same into this folder here now inside this employee component let me create a new property default image source let's save the relative path of the image here now we can set the same here now back to the application here here we have the default image when there is no selected image for upload now when users select an image for upload we have to show the corresponding image preview inside this img control here for that let's wire up a new function into this file uploader on change event so back to the zen mode hold ctrl then press k release both keys press ez so here we have the event on change is equal to show preview now let's define this function up here here we have the default event parameter e first therefore we will check whether we have an image selected for upload we can check that with this if statement here e dot target as we have mentioned inside this handle input change function here this e dot target will be representing the corresponding input control from which on change event is triggered for an input control there will be an array files inside that will be having the selected image for upload first of all we will check whether we have this array or not and we will check whether the first element inside the array is occupied or not so first of all i will define this property image file inside that let's draw the image selected for upload now to show the selected image preview we have to have the corresponding image virtual path which can be updated into this img source file here for that we have to define a file reader reader is equal to we will create an instance of file data this class is already defined in javascript now we will wire up on load event here on load so here is the function we can complete its definition in a bit in order to trigger this event on load we just need to call this function reader dot read as data url and thereby we will get the virtual url of the selected file now into this function we just need to pass this selected or uploaded image now to retrieve the corresponding url let's complete this function here we will update the url to this values object so we just need to call this function set values and inside that we will have this object we just need to update these two properties here img source which is the url for the file and the exact file selected for upload will be the inside this property image file so image file is equal to image file which is defined here in short we just need to pass image file here now let's set this property image source we can access that from this on load event parameter x x dot target dot result so with this statement we'll update the corresponding properties rest of the properties should be the as it is so let's apply them here values let me save this and back to the application here let's select an image for upload boom here we have shown the image preview selected for upload inside our react app let's try let's try other images also the selected image name will be shown along with this choose file button here there is one more case once users select an image for upload and then he or she click on this choose file button here and then cancel this window along with this button you could see this no file chosen in order to handle this situation i will be adding an else block here and i will just copy this set values function in here we will just reset these properties image file and image source default image source let me save this let's check whether it is working or not let me cancel this that's it i'm sorry for interfering let's get straight to the point as a developer you already know big projects or lengthy tutorials like this requires a lot of work and time in making so here i'm asking for your little financial support it will definitely motivate me to bring more and more helpful and quality free tutorials like this in front of you hope we can learn and grow together like this please check out various payment methods for donation from video description or you could shop with our amazon affiliate links without being any extra penny now let's submit this form here for that we have to add a submit button so i will add that here first of all let's enter into zen mode here is our form group div i want to send that this uh button so i will add this class here here is the button type is equal to submit and we have to apply these bootstrap classes btn and btn light inside the button we have to show this text submit now here is our button submit i think we have sended this app title here let's check that sorry here we have an incomplete clause and instead of clause we have to use class name in react so let me replace that here that's it here we have sended the app title now let's wire up a function for this form submit event so on submit is equal to handle form submit now let's define this function up here here is our default parameter e beside that first of all we have to prevent the default behavior of a form submit event which is reloading of the page after form submit we have to prevent that so we can call this function here prevent default from the parameter now actually when we submit this form here we have to make a post request into our asp.net cover bpi project we can do that in a bit before that we have to implement a simple validation here here we have the if clause and we will be calling this function validate we have not yet defined this function we will do that let's define the function here this is a function without any parameter inside this function first therefore i will create this uh object here inside this form we have two validation which are this employee name should be mandatory and there should be an image selected for upload other than this default image so back to the application let me increase this font size a little bit first of all we have employee name and here we will check the value from this state object if employee name is equal to nmd string then corresponding input field is invalid so i will set this validation as false for the control otherwise we will set as true and here is our second and final validation we said that to this property here image src here will check the value inside the image source if it is equal to a default image then we can say there is no image selected for upload so i will reset the field as false otherwise we can pass true now in order to save these errors i'm going to define one more state object here errors and set errors now let's initialize that with an empty object now inside this validate function after violating each of these fields we have to save the validation errors inside the state object so we can call this a set errors function into that we can pass this temp object and finally from this function we have to return a boolean value indicating whether the form as a whole is valid or not so i will do this return and then we can call this function object dot values so it will retain an iteratable object containing all of the values inside this object through that we have to iterate with this function every inside that we have this condition if all of the values inside the object is true then we can say this form as a whole is valid so we have done the validation now we have to show validation errors to respective controls here for that first of all i want to add a css rule in our style sheet here so which is here index.css so here it is for input controls of the type text we just need to set the border color but for file uploader we have these styles here it will just uh set the text color as red now we just need to now back to the employee component for that you can use this shortcut whole tab then it will show all of the open file in the ide so here is our component employee now in order to apply this or invalid field class into error fields we can have this function here apply error class we have a single parameter for the function now before completing this function definition here let me show you where we call this function we have to append the class into this attribute class name conditionally so first of all i will encroach this attribute value with a pair of curly brace and we can call the function here apply error clause into this field parameter we have to pass the corresponding property that we have used for saving error indication so in case of file upload which is image source so i will be using that here image source inside this function we will be having a return statement only so we have to enclose them with a pair of parentheses and inside this brackets will be defining a function if it is true we'll be returning the class invalid field in order to separate this class from already applied clause here we have to add the space here if there is no error we will return an empty string here so here is our condition first of all we will check whether that property is present inside the errors object and we have one more condition we will check the value of the property if it is false we can say this field is invalid and thereby we will apply this class now we have to do the same for our employee name control also so i will just replace this class name attribute value here from control instead of image source we have to pass employee name now let me save all of these modifications and back to the application here now let me submit this form without feeding any of the value boo so here we have the error validation for both of the controls file uploader and this employee name control let me enter something inside this control here submit this form again now we only have the validation error for this file uploader let me select one image submit the form now we don't have any error this form as a whole is valid now inside this form submit event we have to make a post request into our existing.net cover api project in order to make such a post request first of all we have to create an object of form data so let's do that here form data is equal to new form data now into this object we can append that us that we want to send with the post request so first of all we can call this append for the primary key which is employee id into that we can pass the value from this values object employee id now let me copy paste this line for rest of the properties employee name occupation image name and finally we have image file which is the file selected for the upload we have not yet used this property image name it will be required for update operation now we can make the post request with this form data object we'll be making all of the api requests from our parent component here employee list for that first of all i will create the function here for both insert and update operation through form submit so here is the function add or edit for this function we need two parameters form data and then a callback function on success which is to be called after successful insert or update operation so here is the function add or edit inside this function we will consume the web api methods for image insert or update operation now we have to pass this function into our child component here add or edit is equal to add or edit we can access this function from our child component here through props parameter so here is our component employee and we can add this props parameter here from that we can extract the function add or edit so all of the values that we have passed from parent can be accessed with this parameter props now inside the form submit even here we can call the function add or edit we will pass the form data as a first parameter as a second parameter we will pass this function reset form which can be called after successful operation inside the function here now inside this new function reset form we can clear form controls in order to clear form controls inside the form we just need to clear this object values since we have binded all of the controls values from this object values in order to clear that object we just need to call this set function set values and inside that we can pass this initial field values object where we have the default values for the controls this is not enough for to clear this a file uploader here we have to do that separately there are many ways to do that using a reference or key attribute etc but the best way would be using the plain javascript method so i will set this id attribute for this control here image we can clear this field separately inside this reset function here so document dot get element by id here we have to pass the id so here we have the particular dom element from that we just need to set this property value as null apart from re-initializing form controls we want to clear this errors object also so that we can call this set arrays function with an empty object so here it is now rest of the job for insert operation can be done inside this pattern function add or edit so back to the parent component here employee list now here we have to make the post request to dotnet call web api project for image upload for that we will be using the npm package axios so let's install that let me open the terminal here npm i4 install s for safe x use finally here we have completed with the package installation now let's import the same here from axios we'll import this axios object now whenever i work with a web api i will be defining a function like this for now i will just uh name this function as employee api for this function we have a single parameter url and we have to pass a default value with the corresponding web api url here we can do that in a bit inside this function we have retained four functions fetch all create update and delete in order to make a get request using axios we just need to call this get method by passing this url post or insert operation along with url we have to pass the corresponding form data in case of update operation we have to make the put request and we'll be passing corresponding id which is to be updated and the updater record object and for delete operation we just need to make the request by appending this id into the url we will be calling all of these functions in our application in a bit now we will make this post request for image upload along with inserting corresponding employee details so let's call the function here employee api we don't have to pass value for this url we will be using default value with the corresponding web api url from return functions we'll be calling this create function here into this function we have to pass the form data if this request is successful we can handle the callback functions inside this then function here inside that we have this callback function with a single parameter response inside the function first therefore we can call this on success function from our child component we have passed reset function into this on success function so this then function will be invoked when this request is successful if there is something went wrong we can cache that error with this catch function here here we have the single parameter error we'll console that object into browser console now we have done everything inside this react app to just try our post requests we have to do few more things inside our web app ico project here with our post request we will be consuming this wbpi method here since we are making this post request with a form data we have to use a separate attribute before this model here we have to add this attribute from four now let's check what are the properties that we have inside this employee model here now let's compare that with the form data here there is no property corresponding to this image file inside our web api model here so let's add that here with this property we have to receive image files so this should be of the type i form file i will name it as image file this is not a property corresponding to sql server column so we have to ignore that mapping in future so we have to mark this as not mapped now you may have this doubt these properties are in camel casing and that of this model here is pascal casing as per c-sharp naming convention we have to use pascal casing for properties like this and when it comes to javascript frameworks or libraries we'll be using camel casing so whenever we make a get request into web api project the return result properties will be in camel casing so whenever data sent outside this web api project pascal case properties will be converted into camel casing for example here we have employee name employee is a word name is another word each of the words first letter should be in uppercase rest of the characters should be in small letters for the same property the camel casing representation would be like this employee name each of the words first letter must be in uppercase except the first word so it's like a camel from side view so when data sent out of vpi properties will be converted into camel case representation when data is received through parameters like post put etc the camel cased properties will be converted into pascal case so that's what happens here here we have camel cased properties it will be bind to these properties since all of these properties is the exact pascal casing representation of these properties here hope you understood let me know if there is any difficulty now back to our employee controller here back to the post web method here with these two functions add and save changes entity framework will insert a new record into our employees table and as a response to the request here we have called this created at action it will return newly inserted object details we don't need that we just need to return this status code uh 201 representing the insert operation is successful this will be enough if there is no image or file to be uploaded but we have an image to be uploaded so first of all we have to save that image into our web api directory here so first of all i will make a new folder here called images images now to save the selected image i will be defining a separate method here which is not a web method so i will mark that with this attribute non action so here is the method public string from this function will be returning a name for the uploaded image save image for this method we have two parameters i form file as image file and then http context as http context i will explain why we need this parameter of the type http context first of all we will generate a unique name for the selected image which is required when there is a chance of duplicate files so image name is equal to first of all we have to retrieve the uh name of the file without extension so we can use this clause path get file name without extension into this function we can pass the file name so file name from that file name we just need to return the first 10 characters so we can call this take function and this function returns i enumerable so let's call this function with uh 10 characters and we have to convert that innumerable collection to an array so let's call this function to array so all of the characters inside the file name will be the in each of the array index to convert this array into a string we'll call the string constructor here in image names there are chances for white space so better replace them with a hyphen we will replace space with an iphone like this so inside this property we have the force 10 characters from the file name now to make this image name unique we will append the current uh time from server so we could do this date time dot now and we will convert the current time with this format y y m s s f f f year month second and micro seconds and finally we have to append the file extension so we'll be calling get extension function here so inside this variable will be having a unique file name now i will create another variable image path inside that we have to pass the exact local file directory path for the image for that we need the local file directory path up to this images folder actually i was planning to access that from this parameter http context there is a better way for that let me remove this from here and back to this constructor we can use dependency injection we will be adding one more property for dependency injection iweb host environment as host environment for this property also we have to create a private property like we have done for db context you could see this a hint here expand that then click on this option here create and initialize field host environment click on that so here we have the corresponding property private property and which is initialized here i just want to prefix private properties with underscore so i will just do this so value for this host environment parameter will be passed from asp.net core framework itself through dependency injection we don't have to do anything else back to the function here to retrieve the base path for this images folder here we just need to do this host environment dot content root path into that we can combine this image name so we can call this function path dot combine so first parameter we have the base path into that we have to combine this uh folder name images inside that we have to create this image with this name image name now to save this image file with this path here we'll have this using statement here inside that we can have this file stream is equal to new file stream as a first parameter we can pass this image path and the mode which is create we have to create this image so file mode dot create inside this using block we could do this image file dot copy to async and we just need to pass the file stream here here we have an async function so we have to add the avoid keyword here so this whole function becomes async function so let's add the async keyword here also since this function is an async function we have to wrap this return statement with task i would say this is one of the mid uh concept of this tutorial for uploading images into dotnet cover bpi project now let's call this function inside this post method here before inserting the record into sql server we have to update corresponding image name here so we just need to call this function save image into that just pass this uh image file which can be accessed from this property image file here since this is an async function let's add the avoid keyword here so it will just wait for this function to complete its processing now let's run this application without debug mode so here we have started our web api project in order to make a post request to this web method here we have to append api forward slash employee let me copy this base path from here and let's update that inside our parent component axios request method here and we have to append this api forward slash employee now let's submit this form here select an image employee name occupation now before submitting this form let's open dev console now submit the form i was expecting this error as blocked by course policy this is a feature in a web api project by which it will block requests from another application which is hosted in a different domain or port number in this case these two applications are running in different port number and that's where this uh violation happens course policy to avoid this problem we have to enable course inside this web api project for this url 3000 so back to web api project we have to install one more in new get package for this so right click on project manage and you get packages let's install corresponding package microsoft sp.net core course let's install this after successful installation back to our startup class here inside this configuration services function we have to enable this feature so call this function at course now inside this configure function we have to enable course for this port number 3000 so we could do this app dot use course function can be called inside the function we could pass these options options dot with origin we have to enable course for this url so let me copy this and paste in here and make sure to avoid the uh last forward slash we have to allow all of the methods like put post delete etc so call this function allo any method so we have to enclose this in double quotes allow any method and allow any header configuration so we have done with course configuration build this project again to reflect new updates after successful build back to the react app now let's clear previous error messages now let's submit this form again that's it since form is reset to its initial state hope everything went successful let's check that inside our web api project here let's expand this images folder so here we have the image for eva now let's check whether we have a corresponding employer code in our sql server table boom we have inserted a corresponding record for the employee with the saved image name which is the same file name that we have created within this function save image so we have successfully uploaded an image with our react application through asp.net cover bpi project now let's retrieve uploaded image along with corresponding record back to react from our web api project we have the corresponding image inside this folder images now you may expect to see this image with this url something like forward slash images forward slash the name of the image so let me copy this but here we are getting 4.4 error in order to display uploaded images back to react application we have to do additional configuration in our web api project we will be discussing that in next video along with retrieving all of the images and displaying them like an image gallery in our react project like this and we have to implement update and delete operation i will post this project github repository in next video description as always if you found this video helpful please thumbs up this video and for more awesome videos like this please please subscribe to this channel coda fiction please share this video with your friends and colleagues so that they can benefit from this see you in next part of this tutorial

Channel: CodAffection

Views: 47,198

Keywords: react image upload, react image upload with preview, upload file from react to asp.net core API, upload image in asp.net core, asp.net core web API for image upload, Web API for image upload, react form with image upload, file upload in react, save image in asp.net core API and react, image gallery in react with .net core web API, React Form Submit with Image or File, CodAffection

Id: ORVShW0Yjaw

Length: 60min 54sec (3654 seconds)

Published: Mon Sep 28 2020