In this section, we're going to take the next step to develop our application.
We will enable users to upload videos to share with others on the application.
Uploading files is a shared responsibility between the client and the server.
We must take the time to understand what each side is responsible for.
Our job as front end developers is to send the file to the server.
The server performs the majority of the work.
File validation is an example of an action performed by the server.
It is possible to spoof file extensions.
Servers should be able to validate the file type before storing the file.
In addition, servers are responsible for managing the uploads in the file system.
A specific location should be allocated for user uploads.
File permissions are another job for servers.
It's an optional step, but recommended some files should be limited to a few select authorized users.
Lastly, the server is responsible for exposing an API that the client can use to upload files.
The client is responsible for presenting the file to the user.
This presentation can be in the form of an image, direct link or, in our case, a video player.
We are using Firebase as our backend solution.
Fortunately, it comes with everything we'll need to handle file uploads.
This service will save us a lot of time.
Uploading files in JavaScript is completely optional for this course.
We will be handling the forms submission with JavaScript.
There are many benefits to doing so.
We will have complete control over the user experience.
Most importantly, the page will not refresh during the upload process.
Let's check out the upload page in our app.
The UI for uploading is very different from the pure HTML solution.
Uploading the file will be a two step process from the beginning.
We will ask the user to upload a file.
If files are dropped on the Dropbox, it'll initiate the upload process inside the Dropbox.
We will render an icon to indicate the progress of the upload after they've uploaded a file.
We will present them with two options.
We will ask them to select a screenshot generated by us and to add a title to the clip.
Implementing the solution will be a behemoth of a task, but nothing we can't handle.
I'll walk you through every step of setting this up.
Alternatively, we may need to provide a more fundamental solution because not every user can drag and
drop backward.
Compatibility is something we should consider.
I'll show you how to deal with that in this section.
Firebase is our solution for a back end.
We've used it for storing the user's data so far.
It comes with a feature called Cloud Storage.
This service provides hosting for user generated content.
We're going to use it to store the user's file uploads.
We'll revisit it later in this section before moving on.
I highly recommend opening two files for the remainder of this section.
We will be spending a lot of time on the upload templates and class files.
You should always keep these two files open in your editor.
When you're ready, I'll see you in the following lecture.