Rails Tutorial | Uploading Images with Active Storage in Rails 6

what's up everyone Steven here from tech maker TV in this episode I'm gonna show you how to add images and image uploading to your applications with active storage this is going to be a pretty simple example so you should be able to follow along even if you haven't been following along with the series this is actually the 11th episode in a series that we're doing on building out a note taking application from scratch if you want to see the entire series I'll link to it down in the description it's over on our website a tech maker TV but we're basically going to be adding image uploading to this page so that you can essentially add rich text and images after this episode in the episode after this we're gonna add drag and drop so that you can drag and drop and sort these things that we're gonna add checklist after that so setting up active storage is actually pretty straightforward so what we need to do is go over to our terminal and I'm gonna stop my server and I'm gonna run a couple of commands here so I'm gonna say rails active storage install : install so we'll run this and this is gonna generate some files for us and then we're gonna run rails DB migrate which should actually set up a couple of database tables that active storage depends on so let's go check that out that didn't really look like it did anything and I'm wondering if I had already done it actually but in any case we'll look at what I think that we may have done that actually when we set up rich text because rich text probably depends on it and you can see that here actually so this was generated by that command so if you haven't been following along and you just want to set up active storage then you would need to run that but I had already done it I think I'm trying to think back there was several episodes ago but that looks like that is the case so anyway so we're already set up then so now what I want to do is set up a new model and the way that this works on the front end is essentially we have this note object or a page object actually and then we're adding elements to it and I have some reasons for why I'm doing it that way you could do this a number of ways you could set this up where you actually drag images into the actual rich text but that's not really what I'm looking to do my server is not running so it just kind of crashed on me but what I'm gonna do here is generate a model and I'm gonna call it an image element so what we need to do now is say page references and that's about it actually so essentially this is a object that doesn't really have any attributes because it's going to essentially be a holder for an actual image that's going to be stored in those other tables that will gin that were generated before so let's go ahead and run our migrations here if you're following along and just kind of get that done and then it's going to jump back over to the code so if we go back over here you want to open up the new image element class we can essentially say in order to add an image all we have to do is say has one attached image now you can call this whatever you want you could call this has want to attached anything it doesn't really matter it's just that's what the attribute is gonna be called and I'm gonna call it image in my case now the way that that works has to do with the database tables that were generated so if you go down into the database folder DB folder and look at the list well if you just ran that it'll be your last migration but in my case it's gonna be this one up here for active storage tables so you'll see down here in the active storage attachments table that there's this T references record polymorphic true now there's a little bit of stuff going on here where you have this record type and record ID so I'm not going to go super deep into what's going on but you just need to know that these tables can be referenced from essentially any class so when you say has one attached image your data for that is going to end up store those tables and so it's called a polymorphic join table if you want to look that up but essentially it allows you to use the same concepts of this file attachment thing in any of your active record classes so if we want to get this working we need to go over to our routes and I've got this nested resources thing going on here so she's going to put this down under paragraphs so I'm gonna say resources image elements and then I need to create a controller for this so I'm gonna come up here and create one called image elements controller dot RB and then we'll say class image elements controller and we'll inherit from application controller and it looks like I actually didn't put the R in my file name so let me delete that and put it back new file image elements controller dot RB image elements controller put that in there and then what I'm gonna do I'm gonna look over at my pages controller no not pages paragraph controller so if we look in here the only ones that are really in use right now are the create and update and they've got quite a bit in common with what I'm about to be doing so I'm gonna copy these two things and then edit them to sort of match my needs so notebook is current you so first of all I don't need like instance variables for any of this so notebook is current user notebooks fine params notebook ID same thing with page and then what I'm gonna do is actually say page dot image elements create and I'm going to open up page and make sure that has many images that's image elements and then will redirect you the notebook page path with notebook and page I'm gonna do some refactoring soon and clean a lot of this code up so if you want to see that check it out over on the website because I'll be posting all of those and some more just work session kind of stuff notebook page you know we might actually do those in like before action so maybe it would be useful to have them in instance variables but for now I think that that's probably fine like it is so the one big difference here is this is first of all an image element so we'll say page dot image elements dot find what we're gonna do here is say image elements dot image and so it's image element image dot attached and then I'm gonna pass in a parameter and actually let me think about this so maybe this should be image element params image something like that and then we can redirect and I'm gonna go ahead and take away the notice because it's gonna be kind of obvious and there there really is no edit per se so redirecting their way to make much sense but I'll handle that in a little bit I just want to kind of get this hooked up and working ok so let's see what we need to do next ok so let's go look at the pages show and let's look at what we have here so we have this form with model so on and so forth and you can see here we have an at paragraph instance variable so let's go ahead and check out our pages controller here and I'm gonna add a new instance variable image elements and it's going to be at page that image elements stop build and then what I'm gonna do is put these two things in a div together the class doesn't really matter this is because we're using this D flex above we need these things to be inside of a single element if we want them to group together and I'm going to just copy this exactly and I'm gonna say image element and then I'm gonna say form submit add image and we'll leave that as is okay so let's see what this looks like on the front end so let's go restart our server and then let's jump back to the browser and if we refresh so I don't hate the way that looks weirdly I'm gonna change it they'll be in line at some point but right now it's okay actually what I'm gonna do is make it so that these are all like an icon x-bar' at the top so you click on like some icon that represents a paragraph and a new paragraph gets added so on and so forth but let's go back and now what we need to do so eventually we're gonna need to mix all of these things up right so eventually we will have not just paragraphs and images separated but we'll have them all at a group so that you can sort them mix and match but for now we actually need to render the images below here because we don't have that built out yet so I'm just gonna say at page image elements die each do image element okay let me go ahead and end that and then inside of here let's just kind of get something basic working so I'm gonna say if image elements dot image dot present else okay so what we want to do is say if our image is present let's just print the image out in an image tag so let's say image tag image element image and then below here let's add a form and so what we can do is actually add this form here and then we will let me cut this and paste it and then I'll fix my syntax highlighting so we don't need this form for rich or this rich content thing obviously what we need is a form dot file field and we want it to be for an image and then we'll have a Save button and then the cancel button I'm not sure about it we'll just comment that out for now so let's see what this does this may work may not and in its current form I'm gonna click add image so now let's see what's happening here well you can see here that well there's a couple things that did wrong so first of all I need to make sure that the image is persisted so we're getting an empty image element showing up and that's just because of the way I loaded it if image element persisted I messed up something with fee nesting there I feel like if that else yeah so that needs to actually be tabbed in okay so let me go back and check this now so now I should only have the one so it is rendering our form what I did wrong here is you see hey that's equal sign so we don't actually want to print out this the looping part of it so what's happening is like it's doing the work and then at the end it's printing out the data that it looped through because we had that equal sign so we just want that I've also got this butting up right against the bottom of the page and I'm gonna go ahead and make the so I need to do this in the actual application layout sorry this is just bothering me a little bit so I'm gonna fix it container and I do pb5 so now I have a little bit more space at the bottom of the screen so okay so I'm gonna choose a file let's just grab this picture of New York and save it and see what happens so looks like on the fine local variable or method image element params okay yeah I can I think I did forget to do that actually okay so image element params will say params dot require image element dot permit and then I'm gonna say image like that and so that's gonna make this work this image element params image so let's go back to our browser and let's just do a quick refresh and then choose a file same file open it save it and now we have an image there you go so I'm gonna do a couple of small styling tweaks here while while I'm doing this right now and I'm gonna I've got a good amount of work left to do on this and I'm gonna kick over into deeper work session so I'll post that on the website again if you want to check out the full series I'll put a link down in the description or you can just go to our website tech maker TV and check that out but what I want to do is go over here to our show page and let's look at what we did at our paragraph so essentially I want to get all this stuff lined up right so we have this div class text content we're giving it a padding afford a margin bottom of two and again that's bootstrap stuff so let's go ahead and just set that up and we'll call it image content will also do the P for an MB two and then I'm just gonna grab all of this to have it in cut it and paste it up here and that's not what I wanted to do I'm get rid of that okay so now let's go check out what this looks like so if i refresh you can see that it kind of bumps in line right there so the next thing I want to do is actually say okay let's go over to our where it's CSS so we have we have there's notebook CSS so I'm just gonna add a little bit here where I say image content and we're gonna say well first I want to Center it so I want to say text-align:center the image and then I actually want to squeeze it in just a little bit and I'm gonna say image and I'm going to make a couple of things here so I'm gonna say well let's do max width is 80% and let's see what this looks like if we go back and refresh so hopefully it's smaller and centered okay so that's kind of what I was anticipating now the very last thing I'm going to do and this is more just a stylistic thing overall is I'm gonna make everything squeezed in just a little bit more that's just something I kind of want to do you don't have to do this if you're following along and you like it the way that it is but what I want to do is say div class equals Co L md-10 offset MD one and actually I'm gonna make that LG because I think on in I think on medium screens it probably looks good as it is if I have to guess and then I'm gonna literally get everything tab it in cut it and paste it right here and let's see what this looks like so now it's it's bumped in better now what I don't like actually you don't want this h3 in there so I'm gonna put that back at the top so I kind of like that aligned with the breadcrumbs and stuff so now it's more like kind of in the middle so what I may do and I'm not 100% sure yet is I may make something that looks kind of like a page around this in the end of this top bit right here is gonna look a little bit more like a toolbar and I may actually put this bread crumb in a bar up here under I've kind of got to work out a little bit more of a solid design right now I'm kind of just doing everything on the fly off the cuff however you want to say that I'm just kind of making it up as I go before we finish this series I'm gonna sit down actually really put a design together it'll be pretty similar because I don't want to do anything radical where I have to redo everything but it'll at least look a little bit more professional when we're done but it's not looking bad right now so anyway I think that's about it for this episode I hope you enjoyed this if you did give me a thumbs up and definitely subscribe to the channel if you want more content like this and again if you want to see this whole series from front to back go check us out on tech maker TV or just go down in the description and I'll link straight to the series

Channel: Techmaker Studio

Views: 4,683

Keywords: rails tutorial, active storage, ruby on rails, rails 6, ruby on rails tutorial, active storage tutorial, ruby tutorial, ruby on rails 6, active storage getting started, active storage rails 6, active storage rails

Id: qHhWXdcDwjI

Length: 18min 29sec (1109 seconds)

Published: Fri Jun 12 2020