Move Images to Storage0:00
Hey, what's up? Wait, what? Anyway, I thought that before we continue, we should quickly set up the images to come from the storage directory. So let's set that up. So right now our images are stored in the public directory, which kind of makes sense for the logo, but not really for the puppy images. So what I wanna do is move all of these to the storage/app.
but not really for the puppy images. So what I wanna do is move all of these to the storage/app and then public directory. So I will create a new directory called Puppies inside there, and I will grab inside the public directory all the 22 puppies. And I'm going to drag those inside this new Puppies directory. There we go. Hello, frisket. So now if I go back in the PuppySeeder,
Update Seeder Image URLs0:58
There we go. Hello, frisket. So now if I go back in the puppy cedar, remember we have all the images with just the image file name. And down there we set an image URL with /images and then the name of the file. And so here we can update this to instead use storage. So we'll get the Storage facade and then we can set the URL, which is going to be puppies/ and then we will concatenate that.
and then we can set the URL, which is going to be puppies slash And then we will concatenate that with the puppy image file name. I think that should work. So we're going to refresh the database and reseed the puppies here. So php artisan migrate:fresh --seed. Okay. And if I look at the front end, it looks like the images are now broken. If we try inspect one of the images, you can see
Diagnose 403 Image Access1:42
it looks like the images are now broken. If we try inspect one of the images, you can see that the path is /storage/puppies/eight, which seems correct. But if we open the console, we will see that we have these 403 errors all over the place. And so it looks like the images paths are actually correct, but we are not allowed to access it from the browser. And while that's exactly what's happening, the public directory in the storage folder is not accessible.
Create Storage Symlink2:05
And while that's exactly what's happening, the public directory in the storage folder is not accessible for the web by default. And if you want to do that, you have to turn it on by doing the php artisan storage:link command. So let's give that a try. php artisan storage:link. Okay, very nice. So the public/storage link has been connected to storage/app/public, which is where we've stored our puppies. And so now back in the browser,
where we've stored our puppies. And so now back in the browser, if I refresh this page this time, I can access those images. We still have an error, but this has nothing to do with it. We just forgot to have a key in our another list, and that's throwaway code. But what the problem was here is we needed a key, a unique key so we can go puppy that id remember. We decided to ignore this because we're going to change this with JSON Resources,
Prepare for Image Uploads2:49
We decided to ignore this because we're going to change this with JsonResources, but now if I refresh, we should be error free in the console, which is always a good place to be. All right, that was quick and easy, but now we are in a nice better place for images management, so that when we upload images for puppies, when we create one with a Puppy, newPuppyForm, it's going to go in the storage container next to this existing placeholder images.
Next: JSON Resources3:09
to go in the storage container next to this existing placeholder images. It makes more sense than having the images in the public folder directory. All right, in the next lesson, we are going to create JS resources for the puppies and the users. See you there.
