1
00:00:01,470 --> 00:00:11,090
Hello, in the video, I am going to show you how to add the Foleo selection component to your form.

2
00:00:11,280 --> 00:00:16,450
So it is basically like this led you to browse and select a file for uploading.

3
00:00:16,560 --> 00:00:18,980
So this isn't a video on how to upload a file.

4
00:00:19,170 --> 00:00:24,210
That is something that you would want to link with JavaScript and link with backend technology like

5
00:00:24,810 --> 00:00:30,580
Python to upload the file story on a database or story somewhere else, potentially.

6
00:00:31,020 --> 00:00:32,220
This is just the front end.

7
00:00:32,220 --> 00:00:35,880
You can copulate with that technology and there's a lot of other videos out there.

8
00:00:36,100 --> 00:00:39,160
Feel free to ask me if you want any advice on that.

9
00:00:39,180 --> 00:00:43,050
But again, this is just frontin really simple to implement one of those forms.

10
00:00:44,160 --> 00:00:51,390
So I'm going to have a class up and be free just for formatting purposes, places at the margin for

11
00:00:51,390 --> 00:00:53,250
the next set of components.

12
00:00:53,580 --> 00:01:03,570
And I'm going to have a div then I have a class of form dush file and in here we're going to have an

13
00:01:03,570 --> 00:01:05,480
input as we always do.

14
00:01:06,750 --> 00:01:20,730
We are going to have a type of file, going to have a class form, dash file, dash input or ID equals

15
00:01:20,730 --> 00:01:21,870
custom file.

16
00:01:21,900 --> 00:01:27,150
Feel free to name whatever you want relative to what you are meant to be.

17
00:01:27,150 --> 00:01:36,030
Uploading a video mapping image for an avatar for example, from now, whatever it is, a label just

18
00:01:36,030 --> 00:01:37,890
to describe what this is.

19
00:01:38,070 --> 00:01:47,360
And this is basically what you would actually be clicking persay and we're going to put a class of dush

20
00:01:48,420 --> 00:01:51,390
file dash label

21
00:01:54,630 --> 00:01:57,460
for the custom file.

22
00:01:57,480 --> 00:02:00,330
So make sure it matches this already.

23
00:02:03,060 --> 00:02:09,500
We know inside of we're going to put a band.

24
00:02:11,040 --> 00:02:23,730
And this is going to have a class of dust fly or dust text to foil, then we are going to have a span,

25
00:02:23,730 --> 00:02:31,740
which is going to be the button text class dash for the spot.

26
00:02:33,540 --> 00:02:38,460
And this is going to be Gretel's save that reload.

27
00:02:38,460 --> 00:02:44,280
And then we go anywhere on it, like the browser or the there this pops up Lesnik Selecta file.

28
00:02:44,490 --> 00:02:50,940
Again, that's something you would want to link with JavaScript P and then when you submit the form

29
00:02:51,060 --> 00:02:52,340
to be able to upload it.

30
00:02:52,530 --> 00:02:55,060
But again, feel free to have a look at that.

31
00:02:55,140 --> 00:02:58,350
It's a very simple video of how to create the front end.

32
00:02:58,590 --> 00:03:00,950
If you have any questions for me, a message.

33
00:03:00,990 --> 00:03:05,460
And as usual, I look forward to seeing you in the next awesome video.