- 00:00:02 welcome to this video great to have you
- 00:00:04 here
- 00:00:05 in this video i want to show you how you
- 00:00:06 can upload files from within your view
- 00:00:09 application so how you can allow the
- 00:00:12 user to select a file and then
- 00:00:13 ship it to some restful api endpoint you
- 00:00:16 got somewhere
- 00:00:17 let's dive right into it
- 00:00:22 of course to demonstrate file upload we
- 00:00:25 need
- 00:00:26 a view application so i created a new
- 00:00:28 one with the view cli
- 00:00:29 i used the webpack template and i didn't
- 00:00:32 change
- 00:00:32 anything now in this application we by
- 00:00:35 default get this app.view file
- 00:00:37 where we simply got router installed
- 00:00:41 load this hello world page and this is
- 00:00:44 the page i'll work in
- 00:00:46 so i'll simply clean everything in there
- 00:00:48 so that i just have this div
- 00:00:50 and you could change the styling and
- 00:00:52 everything but i don't care
- 00:00:53 i want to quickly add my file input
- 00:00:56 field
- 00:00:57 add a button that allows me to upload it
- 00:00:59 and show you how to upload a file
- 00:01:01 let's start simple though let's start by
- 00:01:03 adding an input field
- 00:01:05 of type file which is a default html
- 00:01:07 element
- 00:01:08 nothing viewers about it the view part
- 00:01:11 is
- 00:01:11 that i will now add an event listener
- 00:01:14 add change
- 00:01:15 that will trigger whenever the user
- 00:01:17 selects a new file
- 00:01:19 and then i want to execute let's say on
- 00:01:21 file
- 00:01:22 selected this method now i will have to
- 00:01:25 add this
- 00:01:26 in my view instance in this component
- 00:01:28 here so i'll add the methods
- 00:01:30 object on file selected
- 00:01:34 and there i will actually get my event
- 00:01:38 and let's for now simply log it to the
- 00:01:39 console to see what's inside of it
- 00:01:42 if i now save everything and i go back
- 00:01:45 to my app
- 00:01:46 we can ignore that warning with the
- 00:01:47 extra space that's missing and simply
- 00:01:50 choose a file here if i click this and
- 00:01:52 add a file you see an event as output
- 00:01:55 down there
- 00:01:56 and this file here is actually
- 00:02:00 holding the normal event object with the
- 00:02:02 target which is the file input
- 00:02:04 but we got one useful property the files
- 00:02:07 property which is an array of all the
- 00:02:09 files that the user chose
- 00:02:10 you could add a multi-select tool here
- 00:02:12 too here i only got one file so it's the
- 00:02:15 first element in this array
- 00:02:16 and that is the file we can upload so
- 00:02:19 the goal is to then store that file
- 00:02:21 right
- 00:02:22 so in my data object here i'll replace
- 00:02:24 message with
- 00:02:26 selected file and initially that's null
- 00:02:29 in on file selected though i'll set this
- 00:02:32 selected file equal to event
- 00:02:35 and then it was target files and then
- 00:02:38 there first the first element
- 00:02:39 there this is the file the user selected
- 00:02:42 now we stored it here but we want to
- 00:02:44 upload it right
- 00:02:46 now for that i will add a button where i
- 00:02:50 will say
- 00:02:50 upload and where i will add a click
- 00:02:53 listener
- 00:02:54 to execute on upload or whatever name
- 00:02:57 you want to give to this method
- 00:02:59 so i'll then add my on upload method
- 00:03:01 here which takes no arguments
- 00:03:03 and here i now want to send an http
- 00:03:05 request to some api
- 00:03:06 endpoint that accepts the file we could
- 00:03:09 send the file in both a binary format
- 00:03:12 or as i will do it as part of form data
- 00:03:15 which is a javascript object
- 00:03:17 meant to mix normal fields and files
- 00:03:20 and pack it all into one request body
- 00:03:22 and send it to the backend
- 00:03:24 now you might have your own backend i
- 00:03:26 will use a function of firebase cloud
- 00:03:28 function
- 00:03:29 i built in this video link is also in
- 00:03:31 the video description
- 00:03:33 this firebase cloud function accepts
- 00:03:36 foreign data
- 00:03:36 and stores a file on the firebase cloud
- 00:03:39 storage
- 00:03:40 so that is what i will use and for that
- 00:03:43 i will access my firebase console of
- 00:03:46 that project
- 00:03:47 and first of all remove all files i have
- 00:03:49 in the storage so that we can really see
- 00:03:52 that it worked and then i will go to
- 00:03:54 functions
- 00:03:55 here are all the functions i created and
- 00:03:57 i will use that endpoint of my http
- 00:04:00 function now you won't be able to use
- 00:04:02 that because that project will have been
- 00:04:03 deleted by the time
- 00:04:05 you're viewing this but you can of
- 00:04:07 course build your own
- 00:04:08 function by following that video i
- 00:04:11 mentioned
- 00:04:12 so here i'll copy that endpoint and with
- 00:04:16 that
- 00:04:17 we need to send a request right and how
- 00:04:19 do we do that
- 00:04:20 i will install a special package for
- 00:04:22 this i will use npm for that npm install
- 00:04:26 dash
- 00:04:26 save axios access is a third-party
- 00:04:30 package
- 00:04:30 not related to view which simply makes
- 00:04:33 it easy for us to send ajax requests
- 00:04:35 that's the idea behind access thereafter
- 00:04:38 i'll restart my development server
- 00:04:40 and now i can simply import axias
- 00:04:43 from axios in this view component here
- 00:04:49 now with that imported i want to use it
- 00:04:51 here in the upload
- 00:04:52 on upload function i can use the post
- 00:04:55 method to send a post request
- 00:04:57 and here i first of all need to specify
- 00:04:59 the url which is the url i just copied
- 00:05:02 the second part then is that i will need
- 00:05:04 to
- 00:05:05 set the data i want to send and as i
- 00:05:07 said i want to send forum data because
- 00:05:09 this is the format
- 00:05:11 my backend here expects so i'll create a
- 00:05:13 new constant fd
- 00:05:15 initialize a new form that object a form
- 00:05:18 data is a default javascript object
- 00:05:20 we don't need to import or install that
- 00:05:23 and then i can call append to append a
- 00:05:25 new piece of data to that form data
- 00:05:27 object
- 00:05:28 i'll give it a name of image name is up
- 00:05:30 to you and the value will be this
- 00:05:32 selected file so the file the user
- 00:05:34 picked which we then stored
- 00:05:37 and i'll also keep the file name i'll
- 00:05:40 take it from this selected file
- 00:05:42 there will be a name property which is
- 00:05:44 the original file name
- 00:05:46 with that we get the form data prepared
- 00:05:48 we can now simply add it as a second
- 00:05:50 argument here
- 00:05:52 and then chain up then call because axis
- 00:05:54 will return a promise
- 00:05:56 and there we should eventually get a
- 00:05:57 response which i'll simply log to the
- 00:05:59 console
- 00:06:01 if i save this and we
- 00:06:04 reload our application
- 00:06:08 if i now choose my file here
- 00:06:12 and i clear the console and then hit
- 00:06:14 upload it takes a while
- 00:06:16 but then we should see a response here
- 00:06:19 it is
- 00:06:20 status code 200 looks good data holds it
- 00:06:23 worked that is the response my firebase
- 00:06:25 backend gives me if it worked
- 00:06:27 and if we visit the storage on my
- 00:06:29 firebase backend
- 00:06:30 i indeed see the file and another file
- 00:06:33 because of another
- 00:06:34 cloud function which automatically
- 00:06:35 transformed that file
- 00:06:37 but this is now working this is the file
- 00:06:39 i
- 00:06:40 picked and i uploaded
- 00:06:44 now that's great but let's enhance this
- 00:06:47 let's say we want to see the progress
- 00:06:48 whilst this
- 00:06:49 is uploading especially useful for
- 00:06:51 bigger files of course
- 00:06:53 access makes this easy we can pass a
- 00:06:55 third argument to the post method
- 00:06:57 this is an argument where we can
- 00:06:59 configure this request by passing a
- 00:07:01 javascript object
- 00:07:02 and there we can add the on upload
- 00:07:04 progress event handler so to say
- 00:07:07 here we simply store a function where we
- 00:07:09 get the
- 00:07:11 upload event
- 00:07:14 and now we can simply console.log upload
- 00:07:18 progress and the upload event has two
- 00:07:21 important
- 00:07:23 fields the first one is the loaded field
- 00:07:26 this is holding a number in bytes
- 00:07:30 how much we upload it we can divide this
- 00:07:33 by the second important field
- 00:07:35 upload event total that is the total
- 00:07:37 amount we want to upload
- 00:07:39 so by dividing loaded by total we get
- 00:07:42 the percentage essentially
- 00:07:44 now we can use math
- 00:07:47 round on that but not on that like this
- 00:07:51 but instead let's multiply it by 100 to
- 00:07:53 get a full
- 00:07:54 integer and i will then simply
- 00:07:58 append percent at the end now this
- 00:08:00 should also give me percentages
- 00:08:02 whilst it's uploading the file let's try
- 00:08:04 this out let's clear the console
- 00:08:06 and pick a file and let's press upload
- 00:08:10 and you see we get the upload progress
- 00:08:12 percentages
- 00:08:13 and then after a while also the response
- 00:08:17 so that's pretty cool and this is how
- 00:08:18 easy it is to upload a file
- 00:08:20 now when everything you sometimes want
- 00:08:22 to do is you want to hide that input
- 00:08:25 element
- 00:08:26 and instead have some button where you
- 00:08:29 maybe say
- 00:08:31 pick file and that button should then
- 00:08:34 trigger this input
- 00:08:36 you can do this by first of all setting
- 00:08:38 the style and set
- 00:08:40 display to none here to not show this
- 00:08:42 input
- 00:08:44 and now we want to basically proxy a
- 00:08:46 click on this button
- 00:08:47 to this input here now this is done
- 00:08:50 relatively easy we can use a feature by
- 00:08:52 vue.js called refs
- 00:08:54 we can add the ref key here and assign
- 00:08:57 this
- 00:08:57 a name by which we then can access this
- 00:08:59 element like file
- 00:09:01 input and then on the button we can add
- 00:09:03 a click listener
- 00:09:04 and set this equal to dollar sign refs
- 00:09:07 which is an object in which view manages
- 00:09:09 all the refs you set up with the ref key
- 00:09:12 and then file input and now i can simply
- 00:09:14 execute click here
- 00:09:15 to proxy my click on that button to that
- 00:09:18 input f
- 00:09:19 as if the user had directly clicked on
- 00:09:21 it now if i save this
- 00:09:23 i clear the console and i click on pick
- 00:09:24 file i open that file picker
- 00:09:27 through that button and i can still
- 00:09:29 upload that file
- 00:09:30 just as before and this is actually it
- 00:09:33 this is how easy
- 00:09:34 we can implement all kinds of things
- 00:09:37 related to file upload
- 00:09:38 in a view app so i hope this was helpful
- 00:09:41 it helps you with your next project
- 00:09:43 would be awesome to welcome you to
- 00:09:44 future videos have a great time
- 00:09:48 bye
- 00:09:50 you
