Angular Image Upload Made Easy

Sharing buttons:

welcome to this video great to have you

here in this video we'll have a look at

how we can upload files from our angular

app to a server as a server I will in

this video use a firebase cloud function

which I wrote in an earlier video on

this channel but any back-end that

accepts form data or binary file uploads

will do so let's dive into this and see

how we can actually get a file from an

input through angular to a server

obviously we need an angular app to

upload files and I'm in a brand-new

project created with the CLI nothing has

been added to this project it's

completely empty I just cleaned up the

app component HTML file and only added a

heading same file upload now I get a

couple of goals here one goal is to add

a file input element that allows us to

well attach files of course I then also

want to upload these files that's one of

the primary goals of this video I also

don't want to show how we can add a

button that indirectly triggers the file

input element in case you don't want to

directly have that in your app but one

step after the other let's start simple

by adding an input of type file this is

a default input element shipping with

HTML which allows us to well get file

inputs one important note if you're

using this in angular form this can't be

registered as a form control where the

attached file would automatically sync

to your form object

you always have to fetch this

differently and you do fetch it by

adding a change listener this will

trigger whenever the file selected by

the user will change which is typically

the point where you are interested in

the fall so here I will execute a on

file selected listener and forward my

event object now I need to add that

listener and DTS foul so on file

selected and I know that I get some

event object here again on file selector

that's just a method getting executed

here now in this on file selected method

I want to do something with that

first of all I'll simply lock the event

to the console so that we can see what's

inside of it

let's save everything and go back and

open the developer console here on the

right and now if we choose a file here I

have prepared one here and I click open

we get this event object where we get

all kinds of information a very

interesting piece of information is in

the target there we get this target

element this is this file input and as a

file input it has this special file

key which is an array of all the files

which were selected in case you have a

multi select tool here I have only one

element so the first element actually is

the file I just chose and this is the

file we can now upload now what you can

do is you can add some logic to

immediately upload the file whenever

this event occurs or maybe you want to

wait until the user presses some button

so maybe you have upload button and this

could of course be also a submit button

and some form of type button where you

then have a click listener or in a forum

DNG submit listener on the overall form

where you then trigger on upload now

this would be an alternative setup we

have this extra on upload function and

in order to use the file here we simply

have to store the file you know may be

selected file property which initially

is null and which we then here set to

this selected file is equal to event

target and then remember we had that

files property where we then had a

couple of Falls let's pick the first one

and that is the file object itself

now we're storing this in selected file

and we can upload it here in on upload

that leaves us with one question how do

we upload a file we do it through the

angular HTTP client for that we need to

go to the app module and enable that

client by importing the HTTP client

module from at angular common HTTP

that's the path to that module we simply

added two imports then and with that we

can inject the HTTP service into any

service or component where we want to

use it now you could create a extra

service for that I'll simply inject it

into my component here so I'll add a

constructor and add my HTTP property

which will be of type HTTP client this

client now needs to be imported so let

me add an import here at the top of this

component HTTP client from and then it's

also add angular common HTTP with that


use that client in this component to

upload the file so in on upload I can

then reach out to this injected property

and there I want to send a post request

now the URL I want to send it to

actually is the URL of this firebase

cloud function I created in this this I

guess here this video so this is a video

where I created this function it's a

cloud function which simply accepts

incoming post requests with a foreign

data payload where we can then extract

the file from so I will send a post

request and then I need the URL which I

copy from my firebase console and of

course you can use any other back-end

function that accepts foreign data so

this is the URL I want to send my

request to now I need to configure this

request a little bit I need to add my

body and as I said this body should be

of type foreign data so I will construct

it here I'll name it FD new forum data

which is a default JavaScript object we

can construct and then I will simply

append some fields here for example my

image file which will have a value of

this selected file and where I use this

selected file and now I need to file

name now if you're not sure which

property this is we can get Auto

completion support at least in visuals

to do code by explicitly casting this


we know this will be of type file which

is a default JavaScript object and

therefore here we will also store a file

eventually so let's add this type

annotation here too and now we get auto

completion here and we know there will

be a name property so this is now my

whole form data we could also add

additional fields if we needed that I'm

not going to send this or add this as a

body now you don't need to set the

content type that should be set

automatically and we can now instead

simply subscribe to the response so

there we will get a response which for

now I will simply log to the console so

let's try it out I'd say let's simply

first of all pick a file this one here

maybe now it's stored and now let's hit


and I get back it worked which is

actually the message my firebase cloud

function sends back if it works I can

confirm this by visiting the storage in

my firebase storage and there I got two

files because of that our image

transformation function I also set up in

an earlier video but there I can confirm

this is the current date and time so

this was uploaded right now so this is

already how easy it is to upload a file

this is all it takes in its basic form

but maybe you want to do more than just

upload the file like this and before we

dive into that just a side note of

course you could have also just sent the

binary itself so just selected file if

your API endpoint accepts that binary so

if it doesn't require form data but

directly wants to binary just a side

note but as I said maybe you want to do

more so let's add an object where we

configure this request now let's say you

want to track the progress of your file

upload then you can add report progress

and set it to true as a config and also

that's important you need to set observe

which normally would be the extract a

response to events this means you will

get all the individual events during the

file upload so now will actually not get

the response here but all events and now

if I save does and I go back to our

application and I choose the same file

again and I upload you see we got

different events here these are the

different upload events and eventually

we get also the response there we got

the different event types and you see

the loaded and the total amount so how

much has been uploaded and how much is

the total amount of to be uploaded we

can use that information by first of all

importing HDP event type here to map

these type numbers to actual names we

can easier understand and then here we

can check if event type is equal to http

event type thing we just imported upload

progress if that's the case then I want

to output upload progress

and set this equal to event and now keep

in mind here we got loaded in total so

if we want to express this as a

percentage its event loaded divided by

event total maybe times 100 and round

that so math.round event loaded by event

total times 100 and then here we could

output percent after this just like that

and if we got a different type so else

if event type is equal to http event

type response well in this case well we

got the response right so we want to

output death so here I can then


event and that should be my response

let's save that and let's try it out if

I go back and I choose the same file

again and I hit upload you see we got

the upload progress round wasn't the

best idea had always rounded it up to

100% so let me quickly fix this by first

multiplying with 100 here and then let's

try it again so put the multiplication

inside the parentheses and hit upload

again and now you get different upload

progresses and finally at the end after

the responses back we get our HTTP

response here where we could read the

body for example and that is how easy we

can upload a file now let's say we want

to enhance this a little bit and for

some reason we don't want to have that

file input here but I want to have some

other button in our template so let's

say here we have a button which is also

of type button where we have maybe pick

file as a caption and when we click this

then we actually want to trigger this

input which is hidden well that's simply

hired to hide it by setting the style

display to non it will be part of the

Dom but it's not visible well we can

give this a local reference

let me quickly distribute all the

attributes and properties over multiple

lines to make this easier to read we can

get this a get this a local reference

like file input and then here on the

click event on the button we could

simply trigger file input click like

that and that simply proxies to click to

that hidden input so if dead if I save

this I got two buttons if I click pick

file the file picker opens even though

it's hidden and I can still upload the

file just as before but now with the

hidden file picker and that's actually

all I wanted to show you about file

uploads with angular with the HTTP

client you learned how you can track the

progress of the upload how you can

attach a file and fetch a fault to begin

with and that's really all let's do it I

hope this helps you in your future

projects not be

very happy to also welcome you back in

future of videos