Hi, Alex here from rebeloper.com and welcome back to the series about downloading,
uploading, taking, saving UI images in Swift 5 and of course with a little help
of firebase. Now in today's video we are finally going to upload our UI image
into firebases storage and yeah let's get to work.
Okay, in the previous episode we have been taking care of setting up
everything in the firebase database we have created our app and we have enabled
database and storage. Now it is time to type in some code. So go ahead and open
up our root view controller and again if you already are not familiar with this
go ahead and take a look at the other episodes where I build out this app as I
go with the series, okay. Now upload photo. That is what we are going to start here
and what we want to do first here is basically start the activity indicator.
So activity indicator start animating. That is our first thing, okay. Now what do
we want to do? Well we want to upload our image into firebase storage. Now on
firebase storage you are not going to upload the UI image. You are going to
upload some data. So what we need to do is convert our UI image into data. So for
that first of all we need to grab our image from our image view and that is
again an optional, so we are going to use guard let image equals image view
image. So now let's create our data. Let data equals to and I believe around Swift
4.2 or maybe earlier there was something called image
and there we go a dot and JPEG representation, JPEG data rather yet with
a compression quality. If you want to use PNG data that is okay but JPEG data has
a compression quality and I will use 1.0 here but you could make it like 0.5 or
something like that. Okay, and now that we do have our data we
just need to write our else there and for the else I want to show an alert.
So I will go ahead and present alert with a title error and something went wrong or
something like that because yeah it's not really important most of the time
this will never happen. So I will just write in here something went wrong, okay.
Just so the user knows that we are out and finally let's hit return here.
So what we do have now is our data, okay. Let me hit return here so it will be real
nice. Now next up we want to have our let's so call it our data's place, a name.
So we want to have UUID string, so let image name equals UUID dot UUID
string. So that is a random string that we can use so it will be unique. Next up
we need an image reference. So let's create that or right now. So let image
reference. So make sure before we start typing in here that firebase storage is
imported and of course import firebase store too because just a moment we will
save all of this data into fire store. So image reference equals storage dot
storage and just add a dot there and type in reference and what you want
to do here is add some paths so type in child and the path for the death is my
keys. This will be a string of course but I have created some keys and it will be
an images folder, okay. So that is how we use our images folder and again we want
to add in here child and our image name. Okay! That is where we will add our data.
Let me just add in here some new lines so we can see this structure better.
Now it is time to put our data on to storage. So let's do that right now.
So grab our image reference and a dot and start typing input data and as you can
see there are quite a lot of these but I will use the one that has a completion
handler, so this is that and upload data is data the metadata will be nil and
let's add in here a completion handler let just hit return and the storage
metadata. There we go and an error. So both of these are optional, so
what we want to do is handle the error. So if let error equals error then we
want to bail out and I'm just going to use, well I'm just going to type that
out. So present alert the title error and message is
error dot localized description and after that we want to return, so we don't
want to do anything else, okay. Now that we know that we do not have an error we
want to basically get the URL of that image because we are basically storing
that in storage. Before we do that let's fix this we need to add in self there.
So now we want to grab our image reference and just type in download URL.
There we go with the completion and in the completion we get an optional URL
and an optional error, okay. First off as usual we take care of the error I'm just
going to copy and paste that in there and now we need to take care of our URL.
So what we do here is guard let unwrap it URL equals URL else if we don't
have that then something wrong went and something went wrong is the one that we
want to present in our UI alert controller. There we go.
There should be greater let's add in here a self because we are in a
completion and now we do have our URL. Now we do have our URL. Now we need to
finally fetch it and for that we are going to use Kingfisher and make sure
that you have imported in the pod file and that you do have it imported at the
beginning of this file. So with Kingfisher it is very easy to import it.
All you need to do is type in Kingfisher manager, oh I almost forgot before we
handle Kingfisher yeah and that is downloading I was a little bit confused.
We don't download our URL we want to save this URL into firebases
firestorm. So let's do that now. First of all what we
need is to create data reference to our firestore database. So let data reference
and that is a firestore dot fire store and if type in here you will see that is
something called collection and a collection path will use my keys dot
images collection, again this is a string that we can use. And just type in here
document. Now this will create a document ID for our data reference. So we want to
fetch this document later on in the next episode, so we will fetch it with a query
that basically searches for our UID our document UID.
So we do want to add this document ID into our document that we are going
to save. So let's create our data now. So let data equals and the first of all
let's add in here our UID. So my keys dot and let's select UID and that is the
document ID so let document ID document let's call it UID equals and that is
the data reference dot document ID, okay. And now I can simply just add that in
there, okay. Next up we want to add and let me just add in here a new line, next
up we want to basically save the URL. So my key is dot URL or image URL rather
that is our URL or yeah this is something that I get into very often as
you can see this is basically a URL, but in the databases you cannot add just
a string you cannot add URLs. So what we need to do now is in here that we do
have our URL we need to guard let unwrap our URL
string, so let URL string equals URL dot absolute string, okay. Let's see
and now we can use this URL string here. Okay! Good point and this is a
heterogenous and I believe yeah it must be
conditional so we don't need to put it in the guard let statement. So let's
clear that out and yeah maybe add it right here. Okay, let's wait for
completions and yep, there we go. And now we can finally save all of this
data to the data reference. So data reference. Let me just make this a little
bit up and just type in set data and choose the one with the completion
handler and the document data is basically the data and let's take care
of our completion handler error and I will just copy and paste the error here.
There we go. And if this succeeds I believe we are
all ready. So what do we need to do here. Well we need to create an alert. I will
just copy and paste that in and here that says this was successful, success
and let's just add a message. Oh, one last thing that we will add here that is to
save this UID in the user defaults, so we can use it when we are trying to
download the image. So let's call user defaults dot standard and set value of
any and the value will be our document UID and for the string, for the my key
will be my keys and there we go image or rather at UID.
Let's use this UID. Finally we want to clear out the image views
image because in the next video we are going to download that image. So self dot
image view dot image equals UI image and I believe we are ready to test this out
let's just plug in our iPhone here and let's see if we do get everything right.
Okay, let me just show you the quicktime player. We are connected, there we go, okay.
Let's build and run on our phone and let's see what happens. Let me unlock
this, there we go. We have our lost tutorials custom album.
So let's take our photo and there we go here is my keyboard.
Let's use this photo and now let's step on upload and hopefully everything will
work as expected. So upload, oh sorry about hat I haven't connected the action
there. Oh rother yet it did successfully saved image to database. I didn't notice
the activity indicator but yeah that should be it and we have completed the
action by just simply removing that image from the image view. Maybe the
activity indicator was a greyish and that is why I didn't see that coming.
Okay, let's double-check on the browser if we do have on inside our storage
the new image. So let's see images folder, great and here is our image and I
believe this is a test image. So that is okay and now let's go to our database
and see if we do have our images collection. Yeah, I most probably hit that
twice. Okay and that wasn't testing it is the same image yeah you want to make
sure that this doesn't happen, okay. And there we go. We have our image URL and
our UID. Now that we have uploaded our image in the next video we are going to
download it. So I hope you enjoyed this video and if you did go ahead and give
it a thumbs up subscribe to the channel and hit a notification bell and I will
see you in the next one.