1
00:00:00,090 --> 00:00:06,660
In this lecture, we are going to make one small adjustment to our upload form before creating a fallback

2
00:00:06,660 --> 00:00:07,290
solution.

3
00:00:07,650 --> 00:00:08,850
Do you understand why?

4
00:00:08,880 --> 00:00:10,740
Let's test the upload form.

5
00:00:11,070 --> 00:00:14,460
I'm going to drag and drop a file onto the uploader.

6
00:00:16,980 --> 00:00:21,930
After doing so, I'm going to submit the form during the upload process.

7
00:00:22,050 --> 00:00:24,870
I'm going to empty the field for the title.

8
00:00:27,440 --> 00:00:32,870
After the upload was successful, let's check out the document in the Firebase console.

9
00:00:33,200 --> 00:00:38,630
If you have that database open in another tab, the database should auto refresh.

10
00:00:38,930 --> 00:00:43,340
If you don't see the document, you will need to manually refresh the page.

11
00:00:43,610 --> 00:00:49,040
Looking closely at the new document, the title property is completely empty.

12
00:00:49,760 --> 00:00:55,490
This problem occurs because we're creating the clip object after the file has been uploaded.

13
00:00:55,880 --> 00:00:59,900
Users can still interact with the form during the upload process.

14
00:01:00,260 --> 00:01:07,040
They can completely circumvent the form validation we've put in place to prevent this issue from happening.

15
00:01:07,400 --> 00:01:09,590
We can disable the entire form.

16
00:01:10,190 --> 00:01:12,920
Form groups and controls can be disabled.

17
00:01:13,160 --> 00:01:17,180
As for groups, the entire set of controls are disabled.

18
00:01:17,510 --> 00:01:20,120
For this solution, let's disable the group.

19
00:01:20,360 --> 00:01:22,130
Switch over to your editor.

20
00:01:24,570 --> 00:01:29,790
We're going to call the upload form disable function at the beginning of our function.

21
00:01:32,320 --> 00:01:38,260
The disable function is available on all groups and controls by calling this function.

22
00:01:38,440 --> 00:01:40,990
All controls within a group are disabled.

23
00:01:41,260 --> 00:01:44,710
We should keep the controls disabled unless there's an error.

24
00:01:45,070 --> 00:01:50,140
Error should cause the controls to be enabled to allow the user to edit their values.

25
00:01:50,440 --> 00:01:56,020
Let's scroll to the error function at the top of the function, called the upload form.

26
00:01:56,350 --> 00:01:57,400
Enable function.

27
00:01:59,910 --> 00:02:04,680
The ANIE will function for forms, the opposite action of the disable function.

28
00:02:05,210 --> 00:02:07,950
It'll enable the controls from within a group.

29
00:02:08,280 --> 00:02:13,290
This solution is an alternative to manually binding the disabled attribute.

30
00:02:13,620 --> 00:02:16,170
You're more than welcome to use either solution.

31
00:02:16,410 --> 00:02:20,100
Let's try uploading a file switch over to your browser.

32
00:02:22,620 --> 00:02:26,250
During the upload process, trying, clearing the title field.

33
00:02:28,710 --> 00:02:31,920
Let's check out the document in the Firebase console.

34
00:02:34,350 --> 00:02:38,970
By disabling the group, we've prevented the case of having an empty title.

35
00:02:39,390 --> 00:02:43,320
Users shouldn't be able to submit new uploads without a title.

36
00:02:43,620 --> 00:02:44,070
Great.

37
00:02:44,280 --> 00:02:47,280
Let's add a fallback solution in the next lecture.