Active Storage For Image Uploads | Ruby on Rails 5.2 Tutorial

hello the Internet my name is Dean and welcome to this tutorial on using active storage in rails 5.2 to upload images to your rails application now if you've already seen the tutorial on using active storage for file uploads this is going to be almost exactly identical if you haven't seen that I'll leave a couple links for you so you can check those out after the video okay so to start off I created a new rails application I named it Pinterest and I started the server I then went to localhost port 3000 or it tells me that I'm running Ruby on Rails and specifically I'm running rails version 5.2 this is important make sure you're running 5.2 otherwise some of these commands won't work for you so we're gonna start off by creating a scaffold so we'll type rails G scaffold and because I called the application Pinterest let's call the images themselves pins so let's say rails G scaffold pin will give each pin a title it's assigned type text by a sign type string by default so you don't have to specify that and then we'll give it a caption of type text and that's pretty much all you have to do for this scaffold generator so assuming this runs in my terrible Windows Xubuntu shell we should then see that's created the scaffold we can come over to our app assets stylesheets and delete the scaffolds s CSS file and then we can come back to our terminal and type rails D vehicle and migrate to migrate the database and add in all our new goodies to it once that's done we can unstart the server again and come over to our config file anti-fur go to our routes dot RB file we'll change the tab size the size - because sublime is being a rebellious teenager today and then we'll say root 2 : and almost a pins index this is saying set the root of the application to be the pins controller index action and then we can hit enter to refresh the page and hopefully come to our pin scaffold so from here we create a new pin call this hello world and give it a caption that says this needs more cowbell we'll create the pen that worked everything's working as intended in terms of the scaffold itself but we want to add in images so how do we do that well prior to rails 5.2 you would use a gem like paperclip or carrier weave or something like that but with 5.2 paperclip recently announced that they were deprecating the gem and we're no longer supporting it so instead we're gonna use active storage hence the tutorial to start off we'll kill the server and then once I trails active underscore storage : install so there's no space between this you can just run this it'll create a migration it'll also create the config file that the a rails edge guide tells you to create so over here you should see that there is now a just storage yeah the storage de amyl so this is all set up the way that you would expect and we can now do a rails DV : migrate to add this into the database the next step is to come over to our pins model and on line 2 will say has one attached space : it will called an image because that's what we're looking to upload here you can call this photo or picture or if you're using devise and you want to give users an avatar you can call it avatar it doesn't really matter it translates fairly weld everything else once that's done we can come over to our views pins form and below the title but above the caption will do a div with a class of the field and then we'll say this form needs a label for the image and it needs a form dot file underscore field for the image once that's done we can refresh the page just kidding we have to start the server first and once we've started the server we can refresh the page click new pin and we now see that there's a pin image choose file options we'll say this one has you know cowbell we'll choose a file on my desktop right now so let's go over to pictures backgrounds and this one and we'll give it a caption just kidding there's never you know cowbell running with a bit of a theme today we could create we could choose or click create pin but that wouldn't work because we still have to go over to controller and go to the pins controller and then scroll down to the pin params where it says params that require pin permit title caption and will also permit the image once that's done we can hit create pin and up here in the rails terminal you'll be able to see that it's actually adding the pin into the database assuming the bash wants to work so here it is active storage blobs it gave it a blob that's great let's go to the pins show page so that we can actually see what this blob looks like so for this we'll just open some Ruby code and then we'll stay at PennDOT image which is the natural first thing that you would try and this tells us that it's an active storage attached one object so that's great but how do we actually see it well for those of you that use paperclip you'll probably remember this it's just an image tag surrounding the at pin dot image which shows you the image of course you can put a div around this with a style equal to width 400 pixels and a height equal to Auto and we can close that and then we can refactor this a bit and that doesn't do anything so let's instead change this to have a style and we'll say with 100% and now it's properly formatted we could take this a step further and say link to the image and then after the image tag we can then say pins on your score path and all that did was it created a link to the pins path and that's pretty much it in terms of using active storage and sort of paperclip you now have everything working as you would expect it to if this video did help you please you know like the video if didn't help you dislike it so that other people know not to watch further for the first couple of seconds but for now thank you for watching and I'll see you in the next video [Music]

Channel: Deanin

Views: 23,383

Rating: 4.9629202 out of 5

Keywords: Ruby on Rails, Ruby, Rails, Rails 5, Ruby on Rails 5 Tutorial, deanout, Ruby on Rails tutorial, Active Storage, Rails 5.2 Active Storage, Active Storage Tutorial, Active Storage Getting Started, Ruby on Rails Image Upload, Ruby on Rails 5.2, Ruby on Rails 5.2 Active Storage, Ruby Tutorial, Paperclip alternative, pinterest clone, file uploads rails, rails 5 upload image, deanin, new in rails 5.2, ruby on rails 5.2 new, how to upload images in rails 5.2, rails 5.2, rails 5.1

Id: fVtGy3QL9xg

Length: 7min 12sec (432 seconds)

Published: Mon May 21 2018