Image Upload in React with Asp.Net Core Web API

Опубликовано: 14 Октябрь 2024
на канале: CodAffection
54,571
1k

🍒 Related Videos
Part 2 of this Video:    • React JS & Asp.Net Core Web API - Ima...  
React Quiz App with Web API:    • Build a React.js Quiz App with Asp.Ne...  
React CRUD with .Net Core API:    • Complete React CRUD with Asp.Net Core...  
React Master Detail CRUD with .Net Core API:    • Asp.Net Core Web API Master Detail CRUD  
Everyone's favourite way of creating React forms:    • React Hook Form - 1. Introduction  

🚀 Udemy Course on React Hook Form (Popular React Form Library)
➤ https://bit.ly/3ADbnZy (Discount auto-applied)

💖 Channel Support
➤ Paypal: https://bit.ly/3L36ut4
➤ UPI App: https://geni.us/ScanQRCode
➤ Amazon: https://geni.us/AmazonAffiliated

💌 For Business Inquiries
[email protected]

🚶‍♂️ Follow us
Facebook :   / codaffection  
Discord :   / discord  
Twitter :   / codaffection  

---
Upload an image in React with Asp.Net Core Web API

In this tutorial, we discuss how to upload images in Reactjs with Asp.Net Core WebAPI.
First of all, we build an Asp.Net Core web API and created an SQL server DB with an entity framework core. and then created an asp.net core API controller for image upload.

We have created the client-side app in Reactjs. Inside that, a form with an image uploader is designed. The selected image preview is shown separately. Inside the form submit event, we've uploaded the selected image to Asp.Net Web API.

Tools Used: VS Code, Visual Studio, SSMS, Postman

Discussion @ Time
___________________
0:02:40 - Define .Net Core DBModel
0:10:50 - Create React js App
0:17:24 - React form with image uploader
0:26:17 - Show selected image preview
0:33:06 - Form Validation with File Uploader
0:38:56 - Submit React Form with Image
0:49:41 - Save Image in Asp.Net Core WebAPI

#Reactjs #AspNetCore #CodAffection