WEBVTT

1
00:00:01.599 --> 00:00:06.520
So, this code here needs to be adjusted and again I'll use AI here.

2
00:00:07.619 --> 00:00:13.500
If I were using cursor, chances would be high that it would automatically make the appropriate

3
00:00:13.500 --> 00:00:18.680
suggestions and I would simply have to confirm them by hitting tab.

4
00:00:19.200 --> 00:00:24.600
Here when I'm recording this, GitHub Copilot is not that smart and therefore I have to

5
00:00:24.600 --> 00:00:25.080
tell it.

6
00:00:26.640 --> 00:00:33.580
So here I will tell it, extract the image key and store it in the database.

7
00:00:34.600 --> 00:00:35.940
Let's see what that gives us.

8
00:00:38.440 --> 00:00:46.780
It extracts it here, stores it here, that's looking good, yeah, should do the trick.

9
00:00:47.260 --> 00:00:50.360
Let's accept it and make the same changes here.

10
00:00:52.160 --> 00:00:53.520
Also store image.

11
00:00:54.160 --> 00:00:56.940
Shift the context from before, this hopefully should be enough.

12
00:00:58.280 --> 00:01:02.220
Extracts the image key, stores it in the database.

13
00:01:03.640 --> 00:01:04.379
Looks good.

14
00:01:06.640 --> 00:01:11.060
Of course we need to make sure that we have an image field in the database though.

15
00:01:11.380 --> 00:01:16.580
So in the database.js file, when we create the events table, we must make sure that there

16
00:01:16.540 --> 00:01:22.260
is an image field and GitHub Copilot suggests this here due to my latest edits.

17
00:01:24.980 --> 00:01:30.420
And of course therefore I edited the events table, hence I'll delete the database SQLite

18
00:01:30.420 --> 00:01:36.420
file to reinitialize it and restart my development server.

19
00:01:37.920 --> 00:01:42.940
And that should now ensure that this events table is set up appropriately and with all

20
00:01:42.840 --> 00:01:47.360
the other changes made, we should be able to extract and store uploaded images.

21
00:01:49.760 --> 00:01:57.980
So to test this image upload feature here, we can go back to Postman and since I deleted

22
00:01:57.980 --> 00:02:01.700
and recreated the database, I'll start by signing up a new user again.

23
00:02:03.020 --> 00:02:05.440
And I'll grab that token because I'll need it.

24
00:02:06.280 --> 00:02:09.639
And I then want to send a new event here to the backend.

25
00:02:11.200 --> 00:02:18.780
So a post request to slash events with my new token here added to it.

26
00:02:20.780 --> 00:02:25.580
But now we need to change the body because now we must include an image here.

27
00:02:27.320 --> 00:02:30.680
And I will actually generate an image here with help of chat.gpt.

28
00:02:33.140 --> 00:02:41.940
Create a dummy event image showing a group of people hiking in the mountains.

29
00:02:42.160 --> 00:02:45.120
You can use any image of course, you don't need to generate with AI.

30
00:02:45.720 --> 00:02:49.500
But since this is an AI course, we can of course also do that, I guess.

31
00:02:51.560 --> 00:02:54.080
So that will be a dummy image which I want to upload.

32
00:02:54.820 --> 00:03:00.260
Yeah, they look a bit, well, not too happy, but I'll take it.

33
00:03:01.280 --> 00:03:01.760
Upload this image.

34
00:03:04.420 --> 00:03:12.280
And then here in Postman, we need to change the body type from JSON to form data.

35
00:03:14.080 --> 00:03:17.360
And then there, we again can add title.

36
00:03:18.400 --> 00:03:22.100
Now we just use this nice table here to enter that data.

37
00:03:24.459 --> 00:03:39.180
Description, test event, address, test street 5, date, I'll grab this date here.

38
00:03:41.359 --> 00:03:46.900
And then before clicking into the field, you should have a drop down here where you can

39
00:03:46.880 --> 00:03:53.080
select file and give this a name of image now and then select that file.

40
00:03:54.720 --> 00:03:58.760
So I did now select that image which I generated with AI.

41
00:04:00.200 --> 00:04:05.280
If I now send this request, looks like the event was stored.

42
00:04:07.399 --> 00:04:12.760
Now actually, I did not change the name of that file.

43
00:04:13.420 --> 00:04:17.220
So I got a super long file name here, should have changed it before.

44
00:04:19.059 --> 00:04:27.280
Actually gives me a good opportunity to test this put route and first grab that token again

45
00:04:28.780 --> 00:04:32.360
and use that here in the header like this.

46
00:04:34.420 --> 00:04:40.880
And then there also change the body to form data, enter all that information like a title,

47
00:04:41.500 --> 00:04:53.240
tested event, description, updated, dot, dot, dot, address, updated and date is this

48
00:04:53.240 --> 00:04:53.900
date here.

49
00:04:54.880 --> 00:04:59.360
Again pick a file and I'll generate another file.

50
00:05:00.220 --> 00:05:01.080
Give me another one.

51
00:05:01.820 --> 00:05:02.660
Let's see if that works.

52
00:05:03.280 --> 00:05:03.860
Here we go.

53
00:05:05.320 --> 00:05:06.500
Yeah, sure.

54
00:05:06.680 --> 00:05:17.280
Let's take this one and I'll rename it off screen and I'll grab it and also store it

55
00:05:17.280 --> 00:05:23.300
under a key named image, send this and looks like it was updated.

56
00:05:24.700 --> 00:05:29.220
And if I now go back to my code, to my project folder here, we should see that in the public

57
00:05:29.220 --> 00:05:32.580
images folder, we got those image files.

58
00:05:33.820 --> 00:05:39.100
And if I refresh here with refresh explorer, I can indeed see them here.

59
00:05:39.960 --> 00:05:44.620
So they were indeed uploaded and stored in that public images folder.

60
00:05:45.040 --> 00:05:49.100
So that image upload functionality is working the way it should work here.

61
00:05:50.820 --> 00:05:55.980
Again, you can always tweak it, change parts of it, but the main functionality here is

62
00:05:55.900 --> 00:05:57.260
working the way it should.