In this lecture, the objective is to grab the file from the drop event, will prepare the file before
initiating the upload.
Let's jump right into it.
We'll continue working in the upload component class.
The first step is to grab the file dropped onto the element.
The drop event we're listening to will pass along the files the user has dropped.
Our files are accessible through the event object.
The event object is the same object you would come across in any other JavaScript event inside the store
file function.
We're going to log the event object.
We want to check out what's inside before we move on.
Next, we'll switch to the browser with the console opened.
Drag and drop a file onto the uploader.
Inside the console, the event object is locked opening its contents will reveal a long list of properties.
The one property will want to focus on is the data transfer object.
This object will contain the contents of the files transfer, there's a property called files.
It's an object of files that were dropped on the element.
However, if we look at the files property, it'll be empty.
This output is very mysterious because we did everything right.
You may assume there's an error in our code, but it's actually not our fault for one reason or another.
Chrome will not log the files unless you access the files directly.
Let me show you what I mean.
Let's go back to the editor in our class.
We will define a property called file.
We will store the file locally in the component as a property.
The type for this property will be a union type.
The property's value can either be file or null.
Lastly, we will initialize the property with a no value.
Moving onward, the next step is to update this property when the upload is initialized inside these
store file method.
We will update this property to the event that data transfer files property.
TypeScript will throw an error at us it indicates the data transfer property does not exist on the event
object.
This is somewhat true.
Not every event object will define the data transfer property.
We need to be more specific with our types.
Let's wrap the event properly with a pair of parentheses.
We will assert the tie with the as key.
The new type is called drag event.
By using the as key word, we can assert the type as opposed to letting the TypeScript compiler infer
the type, another error will appear this time.
TypeScript can't guarantee the data transfer will be an object.
This property may be set.
You know, we will add optional chaining to remove this error.
Moving forward, we're interested in uploading the first file.
At the moment, we are grabbing all files dropped onto the drop box.
We are going to call the item function on the files property.
We are working with an object, not an array.
Luckily, the files object has a function to grab files like an array, we can pass in an index to retrieve
a specific value.
File lists are zero indexed.
The first file will be stored under the zero index.
After adding this function, TypeScript will complain about the return value, according to TypeScript.
It's possible we may be returned an unidentified value.
Our final property is constrained to files or null values.
There are two ways we can fix this error.
We can update the file property to allow undefined values.
Alternatively, we can use the nolice coalescing operator.
I think this would be a great opportunity to practice with the Knowledge Coalescing Operator.
The Knowledge Coalescing operator can intercept undefined values after the item function.
We will add this operator.
If we're returned an undefined value, we will return null.
The error has gone away.
Fantastic.
Next, let's update the log with the variable.
Going back to the browser will drop a file onto the uploader again.
Just like magic, the files property is filled with information related to the file drops.
This error is a gotcha with Chrome.
If you're trying to debug drag and drop operations, you need to access the properties directly to see
their values.
Simply logging the object in general will result in an empty array.
It's a weird bug in Chrome, but I thought I'd let you know just in case.
Back in the editor, validation should be performed on the files type.
If the user attempts to upload a file other than a video file will reject the file.
Validation can be performed in Firebase, but will perform it on the client side as an extra precaution.
Inside the function create a conditional block.
The condition will be the following.
Not this file.
This file Typekit type does not equal.
VIDEO Slash MP for.
The first condition is checking if the final property is not empty.
There isn't a point in checking the file type if a file doesn't exist.
As for the second condition, I want to quickly go over my types.
A mime type is a label to identify the type of data in a file.
They're similar to extensions, except they can't be changed easily.
It's more practical to check for a file's mime type, then check for the extension mime types or formatted
by their type and subtype.
A slash separates them.
The type is the general category a file belongs to.
This is why you may see some mime types with similar values.
For example, video files are assigned under the video category.
The subtype is the specific type of file.
This part of the mime type is where most mime types differ from one another.
I provided some examples of mime types for this course.
We're going to be checking if the file is an MP for file.
Other video types can be used in the resource section of this lecture, I provide a link to a Wikipedia
page with information about what video types are supported, in which browsers and before files are
generally supported in most browsers.
Some browsers will not support certain file types due to patents or licensing issues.
We'll keep it simple by limiting support to MP for files back in the editor.
We want to check if the mime type isn't VIDEO again, for if it isn't, we'll return the function.
This return statement will end the current iteration of the Loop if the user makes it to this point,
we can begin moving on to the next step in the form.
Let's handle this part of the process in the next lecture.