Image Upload in React with Asp.Net Core Web API
HTML-код
- Опубликовано: 22 сен 2024
- 🍒 Related Videos
Part 2 of this Video: • React JS & Asp.Net Cor...
React Quiz App with Web API: • Build a React.js Quiz ...
React CRUD with .Net Core API: • Complete React CRUD wi...
React Master Detail CRUD with .Net Core API: • Asp.Net Core Web API M...
Everyone's favourite way of creating React forms: • React Hook Form - 1. I...
🚀 Udemy Course on React Hook Form (Popular React Form Library)
➤ bit.ly/3ADbnZy (Discount auto-applied)
💖 Channel Support
➤ Paypal: bit.ly/3L36ut4
➤ UPI App: geni.us/ScanQR...
➤ Amazon: geni.us/Amazon...
💌 For Business Inquiries
➤ codaffection@gmail.com
🚶♂️ 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
goo.gl/bPcyXW : Buy me a Coffee
bit.ly/4dWUGYd : Part 2
bit.ly/3MkvBrh : React Quiz App with Web API
bit.ly/3Me2bxo : Everyone's favourite way of creating React forms
bit.ly/2t0op0W : React CRUD with .Net Core API
bit.ly/2N9QjkE : Master Detail CRUD with React & .Net Core API
bit.ly/3Me2bxo : Everyone's favourite way of creating React forms
Hey i've followed your demo but whenever i submit the error "Object Reference not set to an instance of an object" at the code in 54:06 in your video. What should I do with that? Thanks
Real Industry level Project ! Very well explained ,Thank you Sir
This is exactly what i've been searching, thank you for this video. Im building an ecommerce project, and got stuck with my product images. Thanks.
Excellent and useful demonstration I would like to (definitely donate) after my financial situation slightly improves ! Thank you
great tutorial
Thank you Thank you Thank you
This was a great way to present React. Can't wait for you to present Blazor Web Assembly version of this tutorial. I want to hear your thoughts.
So usefully video, thanks
Great video! Thank you!
Thanks a Lot. From Dhaka
Sos grande loco! Gracias! Thanks bro! you rock!
Thank You For This Video
perfect tutorial, thank you very much!
Glad you like it!
Amazing content!
Thank you for this video.
I learned a lot of things.
Awesome tutorial, CodAffection. Keep up the good work.
Thanks, will do!
thanks for the video it helped me so much
59:22 BBBBOOOOOOMMMMM
me salvaste de una muy grande con este video me suscribo!
U r the best!
Hey at 27:37 you make sure that if the user cancels the window then it resets. This isnt working for me. Has something changed in react or something?
Justo lo que buscaba, muchas gracias...!!
i had a problem in craeting instance of complexe type class any solution pls !
for getting the src of file i used src: URL.createObjectURL(e.target.files[0]) and it worked fine 😀 Thanks For The Video
Great 👍
Thanks sir, very helpful video
You are the best 🤗🤗
:)
awesome
glad you found this helpful.
how to prevent to upload pdf file after extension change from pdf to jpg
Can you do one video on react using typescript just for fun 🙂
is this image save on sql data base api's image file?
Thanks you, video very nice. But you can't show me how to upload multiple file. Please help me!
Is it possible create web api without entity framework?
Getting error while adding the controller error : Pakage restore failed ,Rolling back packages changes...could u pls guid me in this?
did you try this solution here.
stackoverflow.com/a/46144314/4133590
My API isnt allowing empty string from the attribute "ImageName" , i always get an error .
I currently put a placeholder name in it but how can i fix it?
Same issue
How to fix the issue...not able to hit the post acction method throwing 400 status.
@@sandeeppondala4863 [Column(TypeName = "nvarchar(100)")]
[Required(AllowEmptyStrings = true),
DisplayFormat(ConvertEmptyStringToNull = false)]
public string? ImageName {get; set; }
You change this in EmployeeModel.cs
Reason: You have to allow emptyString and you have to stop the conversion of empty strings into null.
@@murphy_artz9326 thanks for the help
Cool video! What fonts are you using in visual studio tho? They look so cool
How to resize the uploaded image?
Can you please share the source code for this project?
The continuous of the video hasn't uploaded yet. Please upload that
which font type did you use Sir?
dank mono
Image Upload Zoom
ruclips.net/video/EvuJsC-xaWs/видео.html
it's a real pain to follow along here. I have to pause it every two seconds because you're just cutting away so much. Other than that it's all well explained. thank you
bro pls do same in Django+ react
I'll try. thanks for the suggestion.
who scream on the background
Hi the API is working fine locally but when it is uploaded to server it giving error "Invalid argument", status: 200, statusText: "OK" but file is not getting uploaded
Make sure you have the permits to write into the solution or destinatary folder bro