Study Mash
Study Mash
  • Видео 110
  • Просмотров 1 830 898
Uploading image or file in Angular | Angular and WebAPI .net core Tutorial | Studymash
Uploading image or file on cloud is not that difficult now, with few line of code we can do that using ng2-file-upload. Find below the github link to the source of this project
github.com/webtrainer-in/HSPA/tree/6ba722ae79496fe9a3ee27bf1d0951b295182094
Table of Content
00:00 Introduction
04:07 Features of ng2-file-upload
05:29 Install Component
06:11 Initialize Component
12:15 Create User Interface
14:36 Resolving CORS issue on ng2-file-upload
16:04 Refresh photo after upload
20:13 What is next
Просмотров: 5 565

Видео

Uploading Photo Angular
Просмотров 937Год назад
Let's see how are photo upload feature will work and we are going to implement this feature in our next video. We are going to use 3rd party open source component ng2-file-upload control which provides plenty of inbuild features. Gutbub link to code github.com/webtrainer-in/HSPA/tree/6ba722ae79496fe9a3ee27bf1d0951b295182094
Deleting Photo from Photo Gallery using Angular UI - Free Angular Tutorial
Просмотров 3 тыс.Год назад
We will implement delete photo functionality in our angular application in this video. Next we are going add photo uploader in our photo editor component.
Setting Primary Photo using @output decorator in angular
Просмотров 1,4 тыс.Год назад
Using, @Output() & EventEmitter() # What is the use @Output Decorator in angular.​ # How to transfer data from one component to another component.​ # Parent and Child communication.​ It is used to transfer the data from child component to the parent component. And feel free to ask any doubts related to angular, we will try to answer your queries shortly.
Adding Photo Editor Component
Просмотров 1,7 тыс.Год назад
We will add a photo editor component on frontend to perform upload, edit and setting main photo of property in this video.
Deleting a photo - WebAPI
Просмотров 2,6 тыс.2 года назад
Let's add one more API endpoint to delete an existing photo in this video, next we will update our angular application to add the user interface to perform all these activities i.e. setting primary photo and deleting a photo.
Setting Primary Photo - WebAPI
Просмотров 1,5 тыс.2 года назад
We will update our API to add new method to set or change existing primary photo that is displayed on property list page. We will also learn what is the difference between FirstAsync and FirsrOrDefaultAsync method of Linqu in this video. In our next video we will add a method in our API to Delete a photo.
Display Primary Photo on List Page
Просмотров 1,5 тыс.2 года назад
In this video we will update our list page to display the primary photo from cloud. Next we will update our API to add new method to change the primary photo.
Upload Photos - Part 2 | Angular Tutorial
Просмотров 4,7 тыс.3 года назад
In our previous video we have uploaded photos on cloud, let's see how to display uploaded images on cloud in our angular application next. Table of content 00:00 Introduction 00:35 Add Public ID to Photo Model 02:33 Update controller to save photo details 10:26 Add photo collection to Property Detail DTO 16:09 Update Angular App to display photos from cloud Multiple ways to resolve self referen...
Upload photos - Part 1 | Angular Tutorial
Просмотров 5 тыс.3 года назад
Let's learn how to upload photos in our application in this video 00:00 Different photo storage options 02:48 Setup Cloudinary 10:09 Add photo upload service 16:12 Update controller 18:20 Test API
Add Authorization to Add Property Component
Просмотров 2,9 тыс.3 года назад
Let's allow only allow to a authorized user to add a new property and redirect to login page if user is not logged in. Exercise solution from previous video ruclips.net/video/RNLI96awz4s/видео.html
Save remaining property fields to database
Просмотров 1,7 тыс.3 года назад
This was given as an exercise of pervious video, hope you would have already completed this exercise. Let me show you how I did that and what difficulties I faced during the process in this video.
Hookup Add Property Page to WebAPI - Part 2 | Angular Tutorial
Просмотров 2,3 тыс.3 года назад
Let's save the basics property fields in database in this video. you can jump to specific topics by clicking the time stamps Table of Content 00:00 Introduction 01:26 Update Repository 02:03 Add DTO 04:31 Update Automapper Profile 04:47 Add New Endpoint 07:19 Test Endpoint 08:50 Update Angular Model 10:33 Update Housing Service 11:20 Test Frontend 16:08 Fix Date Issue 21:03 What is Next
Hookup Add Property Page to WebAPI - Part 1 | Angular Tutorial
Просмотров 2,6 тыс.3 года назад
Let's hookup our add property page to the database. Hope you have completed the exercise I have asked to you do in our previous video. If not, providing below the link how I did the same. ruclips.net/video/KKNQ0KnGTe8/видео.html Topics we are covering in this video 00:00 Introduction 02:30 Add API Endpoint 07:54 Update Angular App 12:44 Display name instead of ID 14:26 Dropdown is tricky one 15...
Hookup Property Detail view to WebAPI
Просмотров 2,2 тыс.3 года назад
Let's integrate property detail view to web API in this video Table of Content 00:00 Introduction 00:33 Update Interface 01:01 Update Repository 01:45 Update Controller 02:58 Add DTO 04:18 Create Map 05:09 Test API 05:45 Update Housing Service 07:06 Update Property Model 08:28 Update HTML Template 11:32 Calculate Age of Property 15:50 Fix few other issues 18:33 What is next
Integrate property list page to web API | Angular Tutorial
Просмотров 3 тыс.3 года назад
Integrate property list page to web API | Angular Tutorial
Database seeding in Entity Framework Core | Angular + WebAPI Tutorial
Просмотров 3,2 тыс.3 года назад
Database seeding in Entity Framework Core | Angular WebAPI Tutorial
Add Property Related Entities | Define relationship between entities
Просмотров 3,3 тыс.3 года назад
Add Property Related Entities | Define relationship between entities
Using retry and retryWhen in Angular for failed requests | Angular Tutorial
Просмотров 4,8 тыс.3 года назад
Using retry and retryWhen in Angular for failed requests | Angular Tutorial
Global error handling in angular using interceptor | Free Angular Tutorial
Просмотров 18 тыс.3 года назад
Global error handling in angular using interceptor | Free Angular Tutorial
Hookup login and register component to Web API | Angular Free Tutorial
Просмотров 9 тыс.3 года назад
Hookup login and register component to Web API | Angular Free Tutorial
Migrating from TSLint to ESLint is a pain | Problems and Solutions
Просмотров 5 тыс.3 года назад
Migrating from TSLint to ESLint is a pain | Problems and Solutions
Migrate from Angular 10 to Angular 11
Просмотров 6 тыс.3 года назад
Migrate from Angular 10 to Angular 11
Deploy Angular and Dot Net Core Web API on IIS
Просмотров 37 тыс.3 года назад
Deploy Angular and Dot Net Core Web API on IIS
Deploy Angular App on Azure
Просмотров 22 тыс.3 года назад
Deploy Angular App on Azure
Deploy API on Azure
Просмотров 20 тыс.3 года назад
Deploy API on Azure
Protect passwords with hashing and salting
Просмотров 11 тыс.3 года назад
Protect passwords with hashing and salting
How to manage user secrets in dot net core
Просмотров 12 тыс.3 года назад
How to manage user secrets in dot net core
Create JWT in ASP.NET Core and use it for Authorization
Просмотров 11 тыс.3 года назад
Create JWT in ASP.NET Core and use it for Authorization
Authenticate user with user id and password
Просмотров 9 тыс.3 года назад
Authenticate user with user id and password

Комментарии

  • @manasapurimitla5798
    @manasapurimitla5798 4 дня назад

    Hii sir how to connect you

    • @StudyMash
      @StudyMash 4 дня назад

      You can send me mail on sandeep@studymash.com if you have any questions.

  • @waqaswaris69
    @waqaswaris69 11 дней назад

    Tremendous. covers everything needed

  • @satyamverma6029
    @satyamverma6029 16 дней назад

    Sir actually when i configured my iis server and used DTO the id for bew values are adding from 1014,1015 like this. Kindly help me with this please.

    • @StudyMash
      @StudyMash 16 дней назад

      You must not be typecasting value to int and that is causing your incremental id to concatenate with older one instead of adding.

  • @saeedobaid764
    @saeedobaid764 19 дней назад

    Hallo i want u name in marketplace and i want to contacts with u send anythink to vontacts

  • @satyamverma6029
    @satyamverma6029 24 дня назад

    Sir i found an issue we have to add pipe that should convert lower case letter to upper case in the search option for city name. Kindly get back to me on this

    • @StudyMash
      @StudyMash 18 дней назад

      Let me know how can I help.

    • @satyamverma6029
      @satyamverma6029 18 дней назад

      Sir I changed it in my project

    • @StudyMash
      @StudyMash 17 дней назад

      @@satyamverma6029great

  • @satyamverma6029
    @satyamverma6029 25 дней назад

    In this video everything goes right for me but in the end when images get added I am facing an issue like when I am clicking on an image it is not getting maximized to the whole page but only a small image is getting there.

    • @StudyMash
      @StudyMash 24 дня назад

      It can be issue of css, if you can share the GitHub link of your code I can help.

  • @satyamverma6029
    @satyamverma6029 29 дней назад

    I was constantly following the series but at this point i got stuck you made changes anonymously compare your code of github and what you taught in video

    • @StudyMash
      @StudyMash 27 дней назад

      What issue you are facing, may be I can help to solve the problem.

  • @25-rakshitp86
    @25-rakshitp86 Месяц назад

    For me this works: its creation issue when POST method, as it gives modelstate = false. due to not passing 'MakeFk' @Html.DropDownListFor(model => model.Model.MakeFk, Model.MakesSelectsListItems(Model.Makes), new { @class = "form-control" })

  • @unplug63
    @unplug63 Месяц назад

    ❤❤❤❤❤ awsm sir

  • @user-dz8hg7ud3m
    @user-dz8hg7ud3m Месяц назад

    thank you so much for every thing

  • @akvlogs943
    @akvlogs943 Месяц назад

    is this course is good for learning angular 18?

    • @StudyMash
      @StudyMash Месяц назад

      Yes, basic concepts are same, I am going to upgrade it to angular 18 soon.

  • @sudheerm.s6792
    @sudheerm.s6792 Месяц назад

    I have a doubt Is this video's useful in this Angular 16 time. I mean can we use it.

    • @StudyMash
      @StudyMash Месяц назад

      Yes you can use it, basic concepts are still same. If you face any issue let me know, I am going to upgrade code to angular 17 also soon.

  • @user-dz8hg7ud3m
    @user-dz8hg7ud3m Месяц назад

    thank you so much from egypt

  • @shrinathhirugade9691
    @shrinathhirugade9691 Месяц назад

    will they compulsory pay me when i finish free trial?. like if i want to use only free trial for 12months and do not want to use it later will that be ok?? or they will come to my home??litterally that is my question. please answer to my question

    • @StudyMash
      @StudyMash Месяц назад

      You can use free trial, but the feature they provide after two months are useless, they will not come at your home but they will send you a bill and deduct money for the usage after free trial.

  • @mohammedrammah1819
    @mohammedrammah1819 2 месяца назад

    when i click register or login it redirects me to an empty view, how can i fix it?

    • @StudyMash
      @StudyMash Месяц назад

      Can you share the GitHub link of your code so that I can look into the issue.

  • @mohammedrammah1819
    @mohammedrammah1819 2 месяца назад

    Everything doing well but when i click register or log in i see nothing (Empty page)

  • @OsamaHasan-xk8ty
    @OsamaHasan-xk8ty 2 месяца назад

    Where are the images that you are using in property-deatail component pls

    • @ghumketu
      @ghumketu 2 месяца назад

      It is in assets folder

    • @satyamverma6029
      @satyamverma6029 18 дней назад

      No due to copyright infringement he added those files in gitignore so you can't get those

  • @salmanfayyaz84
    @salmanfayyaz84 2 месяца назад

    Good explanation keeep it up🎉

  • @vikassable3468
    @vikassable3468 2 месяца назад

    At 3:57 when I use form builder I get an following error Error: NG01101: Expected async validator to return Promise or Observable. Are you using a synchronous validator where an async validator is expected? Find more

  • @ConstantinAlexandru-xf5zn
    @ConstantinAlexandru-xf5zn 3 месяца назад

    adding definite assignment assertion "!" to the @Input fixed my error export class PropertyCardComponent { @Input() property!: IProperty; }

  • @s.s.6141
    @s.s.6141 4 месяца назад

    hello, i get 404 error on postman, why it could be reason? also atbackend i get ' System.ArgumentException: 'Cloud name must be specified in Account!' error

    • @StudyMash
      @StudyMash 4 месяца назад

      Can you share the GitHub link to your code

    • @s.s.6141
      @s.s.6141 4 месяца назад

      @@StudyMash i cant share link here unfortunately can you look for semathechick deneme repo

    • @s.s.6141
      @s.s.6141 4 месяца назад

      @@StudyMash i try but youtube delete it. my username is semathechick and repo is latest one,deneme

    • @s.s.6141
      @s.s.6141 4 месяца назад

      @@StudyMash youtube keep deletes eventhough i dont share link

    • @StudyMash
      @StudyMash 4 месяца назад

      You can send me mail on sandeep@studymash.com

  • @ajay.chawla
    @ajay.chawla 4 месяца назад

    I am facing an issue whenever I go to the form and fill in details, suddenly all the inputs go blank and the console says WDS Disconnected. I tried clearing the cache and restarting the app but nothing works

  • @48narvekaryash22
    @48narvekaryash22 4 месяца назад

    Simple and easily understandable thank you so much, was doing this from last 5 hours, with the help of you done in 10min thanks

    • @StudyMash
      @StudyMash 4 месяца назад

      Glad it helped!

  • @sudheervelavoor
    @sudheervelavoor 4 месяца назад

    why not new videos

  • @AnandRaj-hq4zv
    @AnandRaj-hq4zv 4 месяца назад

    Hi sir can you proved us this web api code?

  • @ajay.chawla
    @ajay.chawla 5 месяцев назад

    Routing is working but add-property does not display anything. I mean "add-property works" is not shown in webpage

  • @nhanoan2406
    @nhanoan2406 5 месяцев назад

    very helpful thanks you

  • @sudheerm.s6792
    @sudheerm.s6792 5 месяцев назад

    channel is underrated , keep going .Lot of love

    • @StudyMash
      @StudyMash 4 месяца назад

      Thank you so much 😀

  • @aniketdeshmane6569
    @aniketdeshmane6569 5 месяцев назад

    Best 🔥

  • @nirajbhanushali8884
    @nirajbhanushali8884 5 месяцев назад

    I watched your video, which is very good. I also read microsoft official docs but I found it very dificult to understand it, can you please explain how you manage to understand it and make tutorials like this.

    • @StudyMash
      @StudyMash 5 месяцев назад

      Buddy, I am working on this technology since very long and I just keep documented what ever the problems I faced and the solution I found for those problems. I converted that experience into video tutorials so that other can also benefitted from my experience.

    • @nirajbhanushali8884
      @nirajbhanushali8884 5 месяцев назад

      @@StudyMash Great job 👍

  • @sureshthaduri6275
    @sureshthaduri6275 5 месяцев назад

    here, we have added internal server errror. we have many different type errors so we have to call all of them? then how to do it?

  • @arifmp3284
    @arifmp3284 5 месяцев назад

    dropdown menu is working on chrome but not on edge.using bootstarp 5.3.3

  • @arifmp3284
    @arifmp3284 5 месяцев назад

    <nav class="navbar navbar-expand-md fixed-top bg-dark border-bottom border-body" data-bs-theme="dark"> <div class="container-fluid"> <a class="navbar-brand" href="#">Vroom</a> @*<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>*@ <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> @*<li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>*@ <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Masters </a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Makes</a></li> <li><a class="dropdown-item" href="#">Models</a></li> <li><hr class="dropdown-divider"></li> <li><a class="dropdown-item" href="#">Something else here</a></li> </ul> </li> @*<li class="nav-item"> <a class="nav-link disabled" aria-disabled="true">Disabled</a> </li>*@ </ul> @*<form class="d-flex" role="search"> <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success" type="submit">Search</button> </form>*@ </div> </div> </nav> dropdown is not working

  • @RaoMithul
    @RaoMithul 5 месяцев назад

    Thanks for the tutorial. When I deployed .net core it worked but when I add wwwroot and copy angular build, the base url still shows page not found. Anything else needs to be setup for angular?

  • @kumarramas
    @kumarramas 5 месяцев назад

    Thanks. Very useful and easy to understand.

  • @arifmp3284
    @arifmp3284 5 месяцев назад

    "Default": "data source=(localdb)\\MSSQLLocalDB;initial catalog=vroom;Integrated Security=true" if u r using windows authentication use this in connection string

  • @miantasawarahmed8731
    @miantasawarahmed8731 5 месяцев назад

    Dear sir. Still waiting that you get relaxed from your current assignments and complete the angular series. Your series is really superb. Kindly complete it.

  • @akilansari6065
    @akilansari6065 5 месяцев назад

    Hello Sir I'm stuck with migration to eslint, need support

    • @StudyMash
      @StudyMash 5 месяцев назад

      What issue you are facing

  • @andreypr503
    @andreypr503 6 месяцев назад

    На каком языке он говорит?

  • @mrtrader3661
    @mrtrader3661 6 месяцев назад

    I can only upload one file at a time

    • @StudyMash
      @StudyMash 6 месяцев назад

      Can you provide me the GitHub link of your code so that I can look where the problem is

  • @luiscuyapuertas2606
    @luiscuyapuertas2606 6 месяцев назад

    Hello teacher, I hope you are well, looking forward to the next video, and if you are contemplating a migration to a more recent version of angular

    • @StudyMash
      @StudyMash 6 месяцев назад

      Hi Luis, I am well, thanks, I am planning to release one more video in continuation of this upload image video on existing version and then I will migrate this series to the latest version. I already have done some work on it and hopefully will upload it in next month.

  • @mrtrader3661
    @mrtrader3661 6 месяцев назад

    can you contiue please

    • @StudyMash
      @StudyMash 6 месяцев назад

      Yes, I will start uploading new videos from next month

  • @mrtrader3661
    @mrtrader3661 6 месяцев назад

    in my situation I am saving a photo to specific folder in cloudinary and I am having a propblem, let us say i have folder named MarinaSquarePark and the public id is "MarinaSquarePark/zzjkhzkhzkjh" so in postman i can only get this to work having the foldername only "localhost:5180/api/property/set-primary-photo/10/MarinaSquarePark" and not the whole public id: "MarinaSquarePark/zzjkhzkhzkjh" how to solve this issue?

  • @pakistanmerenazarsay7174
    @pakistanmerenazarsay7174 6 месяцев назад

    errors : null pristine : true status : "INVALID" my console shows status as invalid all the time even though it store the information in local storage