1 00:00:01,140 --> 00:00:04,170 ‫Next up comes a really cool part, 2 00:00:04,170 --> 00:00:06,420 ‫which is to handle file uploads 3 00:00:06,420 --> 00:00:11,283 ‫and then to actually upload images to a super base bucket. 4 00:00:12,840 --> 00:00:15,120 ‫So, basically, we will now make 5 00:00:15,120 --> 00:00:17,130 ‫this part of the form here work 6 00:00:17,130 --> 00:00:20,940 ‫where we upload a corresponding cabin photo. 7 00:00:20,940 --> 00:00:24,990 ‫And so, let's start by registering also this field 8 00:00:24,990 --> 00:00:26,313 ‫by just copying this, 9 00:00:28,544 --> 00:00:31,283 ‫and then let's just call it image. 10 00:00:33,750 --> 00:00:38,613 ‫And then we also need to make it off the type file. 11 00:00:39,930 --> 00:00:41,610 ‫All right. 12 00:00:41,610 --> 00:00:43,320 ‫Now, let's actually check out 13 00:00:43,320 --> 00:00:47,523 ‫this component right here that I created earlier. 14 00:00:48,780 --> 00:00:53,250 ‫So, this is actually just another input element, right? 15 00:00:53,250 --> 00:00:56,850 ‫But since we already know that this is a file input, 16 00:00:56,850 --> 00:01:01,500 ‫it should automatically get somehow this type of a file. 17 00:01:01,500 --> 00:01:04,860 ‫So, we shouldn't have to declare this right here manually 18 00:01:04,860 --> 00:01:07,260 ‫each time that we use this component, 19 00:01:07,260 --> 00:01:09,390 ‫because again, that component 20 00:01:09,390 --> 00:01:12,270 ‫should already have that in itself. 21 00:01:12,270 --> 00:01:15,603 ‫And with styled components, we can actually do that. 22 00:01:16,650 --> 00:01:20,970 ‫So, right here, after declaring that this is an input field, 23 00:01:20,970 --> 00:01:24,780 ‫we can then set the attributes property. 24 00:01:24,780 --> 00:01:29,780 ‫And so, in here, we can set the type to file. 25 00:01:31,830 --> 00:01:33,270 ‫All right. 26 00:01:33,270 --> 00:01:35,610 ‫And so, this should now be working. 27 00:01:35,610 --> 00:01:39,540 ‫So, let's come to our event handler function here 28 00:01:39,540 --> 00:01:42,390 ‫and actually deactivate this 29 00:01:42,390 --> 00:01:45,303 ‫and just take a look at the data again. 30 00:01:53,400 --> 00:01:56,430 ‫So, all of this doesn't matter for now. 31 00:01:56,430 --> 00:01:59,160 ‫And so, let's just select some image here. 32 00:01:59,160 --> 00:02:02,730 ‫So, inside or project folder, inside public 33 00:02:02,730 --> 00:02:05,760 ‫or actually inside the data. 34 00:02:05,760 --> 00:02:08,610 ‫So, here we have some cabin photos. 35 00:02:08,610 --> 00:02:11,523 ‫So, let's select this file, open it, 36 00:02:12,690 --> 00:02:14,700 ‫and so then we can take a look 37 00:02:14,700 --> 00:02:16,923 ‫at what kind of data we get here. 38 00:02:18,330 --> 00:02:21,540 ‫So, the image is this file list here 39 00:02:21,540 --> 00:02:25,830 ‫where we will want to retrieve the very first element. 40 00:02:25,830 --> 00:02:27,930 ‫So, this file right here. 41 00:02:27,930 --> 00:02:29,850 ‫So, this is of the type of file. 42 00:02:29,850 --> 00:02:32,310 ‫Then here we get the name and some other stuff. 43 00:02:32,310 --> 00:02:36,030 ‫But this really does contain the image itself. 44 00:02:36,030 --> 00:02:38,250 ‫And so, we now need to pass this 45 00:02:38,250 --> 00:02:40,563 ‫also into our mutate function. 46 00:02:43,320 --> 00:02:45,360 ‫So, then here, let's actually create 47 00:02:45,360 --> 00:02:48,780 ‫a new object with all the data in it. 48 00:02:48,780 --> 00:02:50,970 ‫So, we need to spread it out. 49 00:02:50,970 --> 00:02:53,940 ‫And then we define the image property. 50 00:02:53,940 --> 00:02:57,120 ‫And again, it is called image for the exact same reason 51 00:02:57,120 --> 00:03:00,300 ‫that all these other fields have their names. 52 00:03:00,300 --> 00:03:04,620 ‫So, ID, max capacity and so on. 53 00:03:04,620 --> 00:03:07,110 ‫And so, that's because in super base, 54 00:03:07,110 --> 00:03:10,410 ‫that's exactly the name that we gave our fields 55 00:03:10,410 --> 00:03:11,910 ‫so to our columns. 56 00:03:11,910 --> 00:03:13,320 ‫And so, here, we then of course, 57 00:03:13,320 --> 00:03:15,393 ‫need to match exactly those. 58 00:03:16,320 --> 00:03:19,800 ‫So, here, that's going to be data.image 59 00:03:19,800 --> 00:03:23,013 ‫and then the very first one. 60 00:03:24,510 --> 00:03:25,650 ‫Okay. 61 00:03:25,650 --> 00:03:29,550 ‫And so now, let's go here to or create cabin function 62 00:03:29,550 --> 00:03:32,853 ‫because this is where we will actually upload the image. 63 00:03:34,440 --> 00:03:36,633 ‫So, here we will first of all, 64 00:03:37,770 --> 00:03:40,023 ‫of course, create the cabin itself. 65 00:03:41,700 --> 00:03:43,110 ‫So, create the cabin. 66 00:03:43,110 --> 00:03:45,120 ‫And if that is successful, 67 00:03:45,120 --> 00:03:47,343 ‫then we upload the image. 68 00:03:50,520 --> 00:03:52,320 ‫Upload image. 69 00:03:52,320 --> 00:03:53,950 ‫Now, what we still need to do 70 00:03:53,950 --> 00:03:56,970 ‫is to actually specify the image path 71 00:03:56,970 --> 00:03:59,613 ‫here in this new cabin that we create. 72 00:04:00,600 --> 00:04:03,933 ‫So, remember that in our data right here, 73 00:04:06,330 --> 00:04:07,860 ‫for example, in this first row, 74 00:04:07,860 --> 00:04:09,780 ‫we already have the image 75 00:04:09,780 --> 00:04:13,680 ‫but the only way in which we specify the image in the cabin 76 00:04:13,680 --> 00:04:16,350 ‫is by using the file name. 77 00:04:16,350 --> 00:04:17,580 ‫So, with this file name, 78 00:04:17,580 --> 00:04:20,190 ‫we basically connect this cabin row 79 00:04:20,190 --> 00:04:22,743 ‫with the corresponding cabin image. 80 00:04:23,760 --> 00:04:26,913 ‫And actually let's grab this URL here. 81 00:04:28,050 --> 00:04:29,750 ‫So, we will need this in a minute. 82 00:04:30,780 --> 00:04:33,393 ‫So, the format of that URL. 83 00:04:35,700 --> 00:04:38,310 ‫But as I was saying, we need not only 84 00:04:38,310 --> 00:04:40,290 ‫to upload the image itself, 85 00:04:40,290 --> 00:04:43,410 ‫but to also specify the image name 86 00:04:43,410 --> 00:04:46,590 ‫and actually the path to the image in the bucket 87 00:04:46,590 --> 00:04:49,503 ‫right here in the new cabin that we insert. 88 00:04:50,700 --> 00:04:55,700 ‫So, first of all, we need to create a URL like this. 89 00:04:55,890 --> 00:05:00,450 ‫So, basically containing the path to the bucket itself 90 00:05:00,450 --> 00:05:02,463 ‫and then a unique cabin name. 91 00:05:03,540 --> 00:05:04,863 ‫So, let's do that. 92 00:05:06,810 --> 00:05:09,180 ‫So, image name. 93 00:05:09,180 --> 00:05:11,340 ‫And so, here, we need to really make sure 94 00:05:11,340 --> 00:05:13,440 ‫that this name is unique. 95 00:05:13,440 --> 00:05:16,080 ‫So, let's create a template literal 96 00:05:16,080 --> 00:05:20,853 ‫and then doing math.random. 97 00:05:22,050 --> 00:05:25,080 ‫And so, then, we just prefixed that 98 00:05:25,080 --> 00:05:27,450 ‫to the cabin name itself. 99 00:05:27,450 --> 00:05:29,820 ‫So, that is gonna be stored inside 100 00:05:29,820 --> 00:05:34,820 ‫the new cabin.image.name as we saw earlier. 101 00:05:36,300 --> 00:05:39,780 ‫Now, if this cabin name contains any slashes, 102 00:05:39,780 --> 00:05:43,503 ‫then super base will create folders based on that. 103 00:05:44,460 --> 00:05:46,890 ‫And so, we of course don't want that. 104 00:05:46,890 --> 00:05:51,890 ‫And so, let's replace all the slashes with nothing. 105 00:05:55,470 --> 00:05:58,740 ‫So, this part is really important because again, 106 00:05:58,740 --> 00:06:01,920 ‫if for example, the file was called like this, 107 00:06:01,920 --> 00:06:05,580 ‫then super base would create a new folder with this 108 00:06:05,580 --> 00:06:08,970 ‫and then create an image called 2.jpeg. 109 00:06:08,970 --> 00:06:10,530 ‫And so, that's not what we want 110 00:06:10,530 --> 00:06:12,903 ‫and so, we would have to replace that part. 111 00:06:14,250 --> 00:06:15,360 ‫All right. 112 00:06:15,360 --> 00:06:19,069 ‫And next up, let's then create the image path. 113 00:06:19,069 --> 00:06:22,860 ‫So, that's what we will then ultimately store 114 00:06:22,860 --> 00:06:25,203 ‫inside of the cabin row. 115 00:06:26,070 --> 00:06:29,123 ‫So, basically here we have our super base URL 116 00:06:29,123 --> 00:06:33,210 ‫and then besides that, it is slash storage V1 117 00:06:33,210 --> 00:06:37,470 ‫and then all of this and the name of our bucket. 118 00:06:37,470 --> 00:06:42,470 ‫So, let's grab actually the super base URL from right here. 119 00:06:44,730 --> 00:06:47,013 ‫So, basically that's exactly the same, 120 00:06:48,480 --> 00:06:50,643 ‫and not here but here of course. 121 00:06:51,990 --> 00:06:53,823 ‫And so, we need to use that here. 122 00:06:56,880 --> 00:07:01,710 ‫So, let's try to import that super base URL. 123 00:07:01,710 --> 00:07:02,610 ‫Ah, but for that, 124 00:07:02,610 --> 00:07:07,203 ‫we need to actually export it as a named export here. 125 00:07:10,230 --> 00:07:12,510 ‫So, up until this point, we didn't need this 126 00:07:12,510 --> 00:07:16,293 ‫outside of this file, but now we do want to use it here. 127 00:07:17,370 --> 00:07:19,650 ‫Now, that doesn't work automatically 128 00:07:19,650 --> 00:07:22,413 ‫so let's just import that here manually. 129 00:07:23,940 --> 00:07:25,893 ‫So, super base URL. 130 00:07:27,720 --> 00:07:32,720 ‫And yeah, then let's just add all of this part right here. 131 00:07:35,070 --> 00:07:39,933 ‫And then finally, the image name that we created earlier. 132 00:07:42,750 --> 00:07:43,950 ‫All right. 133 00:07:43,950 --> 00:07:47,973 ‫And so here, now we need to spread out this new cabin. 134 00:07:49,024 --> 00:07:52,080 ‫And then the image is going to be 135 00:07:52,080 --> 00:07:54,843 ‫the image path that we just created. 136 00:07:55,980 --> 00:07:56,813 ‫Nice. 137 00:07:56,813 --> 00:08:00,000 ‫So, that's the first part that is finished now. 138 00:08:00,000 --> 00:08:04,263 ‫And next up, we want to actually upload the image itself. 139 00:08:05,220 --> 00:08:09,900 ‫So, let's come here to our API to learn how we can do that. 140 00:08:09,900 --> 00:08:12,750 ‫Now, actually right here in this documentation, 141 00:08:12,750 --> 00:08:15,060 ‫they don't explain how to do it. 142 00:08:15,060 --> 00:08:17,820 ‫And so, let's come here to the introduction 143 00:08:17,820 --> 00:08:21,900 ‫where they should be a link to the documentation. 144 00:08:21,900 --> 00:08:24,690 ‫So, this one right here, let's click that. 145 00:08:24,690 --> 00:08:27,870 ‫And so, this is a good opportunity to also check out 146 00:08:27,870 --> 00:08:29,523 ‫the documentation here. 147 00:08:30,540 --> 00:08:34,200 ‫So, here, is where you could read 148 00:08:34,200 --> 00:08:37,950 ‫all about how to fetch data, how to insert, update, 149 00:08:37,950 --> 00:08:38,783 ‫and so on. 150 00:08:39,630 --> 00:08:42,030 ‫Then we have authentication. 151 00:08:42,030 --> 00:08:46,533 ‫And finally, here we have everything about storage buckets. 152 00:08:48,060 --> 00:08:51,600 ‫So, here creating a bucket we already did manually. 153 00:08:51,600 --> 00:08:55,443 ‫And what we are interested now is uploading a file. 154 00:08:57,240 --> 00:08:58,380 ‫All right. 155 00:08:58,380 --> 00:09:00,015 ‫Now, here they actually tell us 156 00:09:00,015 --> 00:09:03,153 ‫that we need role level security policies. 157 00:09:04,050 --> 00:09:06,720 ‫So, we haven't done that yet. 158 00:09:06,720 --> 00:09:08,613 ‫And so, let's go do this now. 159 00:09:09,780 --> 00:09:11,643 ‫So, coming here to our bucket. 160 00:09:13,380 --> 00:09:16,290 ‫So, let's then select policies from here. 161 00:09:16,290 --> 00:09:18,630 ‫And then for our cabin images, 162 00:09:18,630 --> 00:09:21,030 ‫which is the one we're working on now, 163 00:09:21,030 --> 00:09:23,070 ‫let's create a new policy. 164 00:09:23,070 --> 00:09:25,200 ‫And let's do full customization 165 00:09:25,200 --> 00:09:30,200 ‫and simply for now, enable everything for everyone. 166 00:09:30,660 --> 00:09:33,150 ‫And again, we will change this later. 167 00:09:33,150 --> 00:09:36,783 ‫So, allow all operations. 168 00:09:38,520 --> 00:09:41,626 ‫And again, we can then actually later change this here 169 00:09:41,626 --> 00:09:44,133 ‫only to authenticated users. 170 00:09:44,970 --> 00:09:47,950 ‫But for now, this will need to suffice 171 00:09:51,000 --> 00:09:53,463 ‫because we don't have authentication yet. 172 00:09:55,420 --> 00:09:56,580 ‫Okay. 173 00:09:56,580 --> 00:10:01,140 ‫And now, let's see actually how we can do this. 174 00:10:01,140 --> 00:10:03,460 ‫So, let's grab all of this 175 00:10:05,700 --> 00:10:07,203 ‫and place that here. 176 00:10:10,440 --> 00:10:12,450 ‫So, again, we are doing this 177 00:10:12,450 --> 00:10:14,700 ‫only if there was no error 178 00:10:14,700 --> 00:10:17,553 ‫in creating the cabin itself, right? 179 00:10:18,480 --> 00:10:21,180 ‫And so, let's then analyze this here. 180 00:10:21,180 --> 00:10:24,210 ‫So, here we won't need this data. 181 00:10:24,210 --> 00:10:26,130 ‫Then we have this duplicate error. 182 00:10:26,130 --> 00:10:31,073 ‫So, let's rename this to storage error. 183 00:10:32,310 --> 00:10:35,700 ‫And then here, of course, we need to change a lot of things. 184 00:10:35,700 --> 00:10:37,336 ‫So, it's superbase.storage. 185 00:10:37,336 --> 00:10:39,090 ‫And then from 186 00:10:39,090 --> 00:10:43,503 ‫and here, our bucket name is cabin images. 187 00:10:45,300 --> 00:10:48,690 ‫And then here, we need to specify the name of the file 188 00:10:48,690 --> 00:10:50,340 ‫and the file itself. 189 00:10:50,340 --> 00:10:52,350 ‫Then we have a few objects here 190 00:10:52,350 --> 00:10:55,470 ‫but those are not really important. 191 00:10:55,470 --> 00:11:00,123 ‫And so, here is the image name that we already created. 192 00:11:02,910 --> 00:11:04,560 ‫So, the image name itself. 193 00:11:04,560 --> 00:11:07,950 ‫And then here is the actual image. 194 00:11:07,950 --> 00:11:12,950 ‫So, that's new cabin.image and this is actually already it. 195 00:11:15,090 --> 00:11:19,050 ‫So, this is how we upload images to super base. 196 00:11:19,050 --> 00:11:22,470 ‫Now, there's just one final thing that I want to do here 197 00:11:22,470 --> 00:11:24,900 ‫and that is to prevent a new cabin 198 00:11:24,900 --> 00:11:26,562 ‫from being created in case 199 00:11:26,562 --> 00:11:30,660 ‫that this file actually didn't upload correctly. 200 00:11:30,660 --> 00:11:35,490 ‫So, basically, what I want to do is to delete the cabin 201 00:11:35,490 --> 00:11:40,490 ‫if there was an error uploading the corresponding image. 202 00:11:43,200 --> 00:11:46,893 ‫So, if there was a storage error, 203 00:11:48,270 --> 00:11:51,783 ‫and now let's just grab this data from here. 204 00:11:55,860 --> 00:11:59,940 ‫So, and here the ID is going to be the one 205 00:11:59,940 --> 00:12:02,103 ‫coming from the data. 206 00:12:02,970 --> 00:12:04,560 ‫So, basically, this data 207 00:12:04,560 --> 00:12:06,690 ‫that we received here from super base 208 00:12:06,690 --> 00:12:09,300 ‫will already contain the new ID. 209 00:12:09,300 --> 00:12:14,300 ‫And so, again, if the cabin was successfully uploaded 210 00:12:15,000 --> 00:12:18,150 ‫but then there was an error in uploading the file, 211 00:12:18,150 --> 00:12:22,353 ‫then we just go back and delete that cabin as well. 212 00:12:23,310 --> 00:12:27,390 ‫And then let's also lock some stuff to the console. 213 00:12:27,390 --> 00:12:29,283 ‫So, also grabbing that part. 214 00:12:30,390 --> 00:12:33,723 ‫So, then here that's gonna be the storage error. 215 00:12:34,620 --> 00:12:37,960 ‫And then here, let's just say cabin image 216 00:12:38,820 --> 00:12:43,820 ‫could not be uploaded and the cabin was not created. 217 00:12:47,430 --> 00:12:48,810 ‫Now, okay. 218 00:12:48,810 --> 00:12:51,390 ‫So, this should be all the code that we need. 219 00:12:51,390 --> 00:12:53,763 ‫And so now, let's go test this. 220 00:12:54,630 --> 00:12:58,470 ‫So, just reloading adding a new cabin. 221 00:12:58,470 --> 00:13:02,700 ‫So let's do 008 for eight people, 222 00:13:02,700 --> 00:13:07,480 ‫800 euros, $80 or euros discount 223 00:13:08,700 --> 00:13:12,750 ‫and then let's select our image number 8. 224 00:13:12,750 --> 00:13:15,273 ‫So, open, add the cabin, 225 00:13:16,440 --> 00:13:18,360 ‫and we have an error. 226 00:13:18,360 --> 00:13:22,263 ‫So, data.image.at is not a function. 227 00:13:23,160 --> 00:13:25,260 ‫So, let's come here. 228 00:13:25,260 --> 00:13:30,180 ‫And I guess this at method here only works on actual arrays 229 00:13:30,180 --> 00:13:34,710 ‫but this image here is I think called a file list. 230 00:13:34,710 --> 00:13:37,083 ‫So, let's actually do it like this. 231 00:13:40,320 --> 00:13:42,210 ‫So, that should fix it. 232 00:13:42,210 --> 00:13:43,203 ‫Let's try it. 233 00:13:44,940 --> 00:13:47,643 ‫So, it's taking some time, which is a good sign. 234 00:13:51,000 --> 00:13:54,690 ‫And yeah, beautiful. 235 00:13:54,690 --> 00:13:56,880 ‫There is our new cabin. 236 00:13:56,880 --> 00:14:00,663 ‫Cabin number eight with the image that we selected. 237 00:14:02,100 --> 00:14:07,100 ‫So, let's of course come now here to our bucket. 238 00:14:09,030 --> 00:14:10,173 ‫And there it is. 239 00:14:11,250 --> 00:14:13,980 ‫So, here we get that random value 240 00:14:13,980 --> 00:14:16,203 ‫plus the name of the image. 241 00:14:17,460 --> 00:14:19,320 ‫And so, that's exactly the one 242 00:14:19,320 --> 00:14:21,810 ‫that we have uploaded right now. 243 00:14:21,810 --> 00:14:24,933 ‫And then it was also successfully connected. 244 00:14:26,430 --> 00:14:29,310 ‫So, this is automatically refreshing. 245 00:14:29,310 --> 00:14:33,840 ‫And so, indeed, he replaced exactly the path to that file. 246 00:14:33,840 --> 00:14:35,940 ‫And so, then in our HTML, 247 00:14:35,940 --> 00:14:38,163 ‫that file can be correctly rendered.