In this lecture, we're going to add fallback support for the uploader, adding drag and drop capability
looks cool and it is.
Despite that, we may want to consider adding a fallback because it is prone to errors.
We did face a couple of issues when using it.
In the resource section of this lecture, I provide a link to a site called Can I Use?
I highly recommend bookmarking this site.
This site will provide a list of browsers that provide support for a specific API.
Most modern browsers support they drag and drop feature.
Most mobile browsers do not support this API.
Users on mobile devices will struggle with uploading files.
In these cases, going with the tried and true is what will yield the best experience for our users.
That's done by adding a file upload input field.
It works on all browsers and devices because it's been around for a long time.
Implementing the file input won't take much work.
We've written most of the logic for uploading a file.
The difference will be dealing with how we retrieve the file.
Let's get started in the editor openly upload template file.
Well, want to add a file input field to the template?
We're going to place it under the drop box, the type attribute should be set to file.
For extra spacing, let's add the empty for class to this element.
This class will add margins to the top of the element.
The next thing will want to do is listen to the change event during this event, call the store file
function with the event object passed in.
There's one more update will apply to the template, the input will always appear on the page.
The structural directive will not affect this element when the user uploads a file.
We're going to wrap the div elements and input element with a nji container element.
Next will move the energy if directive from the div tag to the nji container element.
Our template is ready.
Unfortunately, it's not the only update we need to make files uploaded through the input element are
stored in a different location, then drop events.
These store file function will not be able to find the file switch over to the upload component class
file.
Scroll down to the store file function.
Files are stored in another location if uploaded through a file input.
Let's see where the list of files is stored inside the function.
We're going to log the event object.
Next, we'll proceed with uploading file through the file input in the browser.
An arrow will get produced in the console, but that's perfectly fine.
We're interested in inspecting the contents of the event object inside the object.
We have the same properties as before.
One significant difference is the absence of the data transfer object.
This is not an error or a bug.
The data transfer object is exposed if the event was triggered by a drag and drop event.
This is why we get an error in the console.
We can find the list of files under the target object.
The target object refers to the input field element.
It's what we attached the event listener to.
The target will expose the list of files under a property called Files.
It's the same object we worked with in the store file function.
Hopefully, it's clear as to what we need to do.
We'll need to make a small adjustment to our function.
It should check if the data transfer property exists on the event.
If it does, we'll use it.
Otherwise, we'll ground the files from the target property back in the editor.
We're going to remove the long statement.
We don't need it anymore inside our function.
We're going to modify the assignment to the final property instead of directly setting it to the data
transfer object.
We'll use a ternary operator.
For the condition, we're going to check if the data transfer property is on the event object.
In fact, we can copy this small portion of the line as the condition.
This property is defined if the event was a drag and drop event.
It won't exist if it's a different event.
If this condition turns out to be true, the property will be set to the original value we had in the
function.
Otherwise, we'll send it to the following events Dot's target as a HTML input element files question
mark.
Dot Item zero No.
There's a lot going on.
Let's break it down.
First, we're asserting the type of the target property to each HTML input element.
This assertion is to prevent TypeScript from complaining about the property not existing.
Next, we're calling the item function on the files property to grab the first file.
Lastly, we're using the nolice coalescing operator to return null if we can't find a file.
We won't need to make any further modifications.
The files property is the same in both events.
We shouldn't experience further issues.
Let's try testing the uploader one more time.
The upload will ultimately be a success, either upload will work in any order, we please.
The console shouldn't produce errors, either.
Creating a fallback solution is never a bad idea.
You will always want to consider scenarios like this.