File Uploads With Carrierwave and ActiveAdmin

so I'm gonna demonstrate two ways to do images and rails one just a really simple way that we've that I've showed just really quickly in the past before and then one a more full-featured way using a gem and I'm using the same project that I used a demo active admin and so I've got it running and I'm gonna log in password is the password and so inactive it man I have this dashboard and I have categories and I have board games and the idea here is that I want to attach an image to optional image to each board game and so currently there's no property of a board game to allow me to do that so the first thing I need to do is to create a new column in the board games table so that I will have an image property for board games so that when I go to new or edit I will have somewhere to store some information about an image and so that I will do using a migration and so I will do or no sorry using a generation a generator yeah so the generator is the migration generator and what I want to do is I want to add an image to org games and so this is the name of the migration but if I name it in this very specific manner add X to Y where X is the name of the column I wish to add and Y is the name of the table that I wish to add to Rails is gonna write the migration for me if I didn't write it in this special way I could just write the migration and when we look at the migration we'll see that it's not really that difficult if we had to write it ourselves but if rails is gonna write some code for us you might as well allow it to so add image to boardgames and then I need to tell one other bit of information which is the the data type for the column so the image column that I'm adding is colon string and so I'll click OK on that and if we were to look in the DB migrate folder we would see this new add image to boardgames and there it is it as you can see it's not very long all right so I could have written this myself the class is named add image to boardgames so that same add X to Y it inherits from active record migration has a single change method inside of it that simply adds a column to board games named image of type string so we could have written that we either just on rails generate migration given a name and written that out ourselves but we have that little tool to do a little bit of extra building for us and now I'm going to run the DB migrate task to bring that into existence and if I look in my app admins folder or admin folder will remember that I had a place where I needed to whitelist the parameters that activate men would allow a user to manipulate so when I open up my board games at men file I'm permitting params on name rating and category ID I have to add image to that list otherwise I would not be able to change that from active and men so I need to restart my server now and then from here when I reload this page we should see an image column and I should be able to edit an existing image and add a file name so that's this is gonna be like the less flexible way of adding images I'm just gonna do it by way of a file name so for guitar hero here I can edit and I'm gonna say I need a guitar hero dot PNG and that gets saved to that column and we can see that over here I now need an image a guitar hero image to use and luckily I have some like incredible paint skills and so that is supposed to be a guitar sort of looks like a funny-looking violin if you're very generous but there's my guitar hero image and so I've saved that to my desktop and there is a place within every rails application where you can put images and it's the app assets images folder and then we typically put images in here that are just static that are gonna be used say in our layout maybe in a header used by our CSS this isn't where like uploaded images typically go to and it's the least flexible way of working with images because you literally have to move the file yourself into this full so you know to do that I will I've saved that image somewhere to my desktop here my desktop is really messy at the moment where are you beautiful guitar hero image oh there it is so I'll copy and paste that in there and now for it to be displayed on the front end of the website so the user facing end to the website if you remember I had built a user facing into this website which just simply loaded up some of the properties of a board game and so we have this new property which is an image so I need to have that displayed as well and each one of these games was displayed by way of a view partial so I can go to my app views folder into the board games and find that partial and below the category I can say something like if the board game image is present question mark so we know because it's a question mark method that is going to return it's a predicate it's gonna return true or false and here I can put a paragraph tag and within there I can use an image tag helper to load up the board game image and I don't have to worry about the path thing to that assets folder or anything along those lines because the image tag helper does that for me and it makes use of what rails calls the asset pipeline which does all sorts of extra work for us like it's sort of heavy caching of permanent assets and it will what we can see it in action in a moment so I can what does it not like here oh my close tag is not present there save that and head back over here and reload this I've noticed I don't need to reload the rail server when I just make view changes its controller and routing changes that seems to be what I need to to reload and there's my beautiful image on the game that had an image associated with it and on the other game nothing if I didn't have that if statement I would have gone an exception because it would have tried to access an image where it was nil so it would have tried to throw nil to the the image tag and that would have been a problem so that's the that's the really simple but not very flexible way of adding images likely what you'll want to do in your project is file uploads and that is much more flexible and so I will do that now as well but before I do I will quickly go into the admin and remove this data here though there's no image okay there are a number of gems that will allow us to add file uploads to a rails project and a few of them are known and supported by active admin which is nice so active admits and go out of its way to sort of work with them the one I use most often is carrier wave there's another name paperclip that I've used in the past but when carrier wave came out I sort of just switched over to it and so that's what we'll be using today in the the currently sort of version of edge rails so edge rails is sort of like the bleeding edge of rails at drills right now is at 5.2 we're all using a five point one variant in five point two rails has actually added native support for file uploads using something called active storage and so if you went to the edge rails guides you would see active storage and for anyone who wants to play around with that I'm going to put extra marks on the project so that if you push your rails up to 5.2 and make use of active storage you'll get more marks there's already marks for file uploads but you'd get even more for using active storage and I found a few pretty good tutorials on making use of active storage so there's there's some sort of knowledge out there on how to make use of it okay so what are the steps to using carrier wave which is what typically we've used in this course well we need to add carrier wave to our gem file that's step one and so before we do that I'll probably just save my changes to get here image problem two board games and now in my gem file below where I added active admin and devise I can add carrier wave as well and then either Ruby mine will pick up that I need to install that or I might have to go to tools and do a bundler installed and make sure that I have access to that gem and then looking at the readme there's a few things I need to do like active admin carrier wave adds a new generator to Rails so I'm gonna generate what's called an uploader and then I'm gonna mount that uploader inside of the model that I wish to have associated with the uploader and so giving that a moment to do its thing tools generator the generator I want is the uploader generator we're going to take tools generator uploader and the uploader I'm gonna call image so I'm just naming it after the column and that's the convention here it's a name it after the column that we added to our model and so in their example they have uploader and they've called an avatar so you could think of them probably adding this to like a user model where they're adding an avatar for that user we add an image so I'm gonna do capital I image for my uploader click OK there and then in the app uploaders folder I get this file and it has some pre-existing configuration in there so we're defaulting to the storage being the file system carrier wave also supports cloud-based file storage so you could have your images saved to Amazon s3 or other sort of cloud-based providers the other thing that image uploader or that carrier wave can do is automatic resizing of images so you can upload a really large image and have it resize to multiple different images a thumbnail a medium size a large and you could use those you could have them set to particular aspect ratios or particular widths or Heights or whatnot it's very very configurable and so I need to now mount this uploader inside of my model so it's the boardgames model and [Music] how we do that and they explain a little bit later on here is I just have a mount uploader command mount uploader and then the name of my column and the name of my uploader and I can now restart my server [Music] and now if I edit a board game or create a new board game from the backend look at this a little file picker so active it man has recognized the fact that carrier wave is president recognized the fact that the image column is set to Mountain uploader it's provided a file picker for me I can choose the file that I wish to upload so for example that same guitar hero image I can say update board game now the image I just reused that same image string column it now contains a file path that file path uploads boardgames image blah blah blah that is not in the assets folder that is in rails is public folder the public folder is where we can put things that are loaded up that circumvent rails so if you put something in the public folder and someone goes to a URL and it paths to a file in this public folder off of your route then the rail stack won't even sort of kick in and so when you go to like / localhost colon 3000 slash some path it'll first look for that path as if the route is public if it finds that thing it'll load it if it doesn't then it goes to the sort of rails routing system and so if in this uploads folder we have the boardgames fold or board game folder image - meaning that was the primary key of the board game that I associated with and there's the image if I go back to the front-end I don't know if it just just works does it just work it just works if I had multiple sizes I would have to do a little bit more work in that I would go to like dot image dot and then which size I wished to load up at this particular point in time but there you go file uploads right so now I you know I could go and create a whole whole new board game or game create a new one the Winnipeg news board game so I have a screenshot here then I can associate with it and we'll see a little bit of a problem here because you know at this point I haven't done any resizing and so we have this nice little guitar hero and this giant screenshot and like the hacky fix to that is to go to the image tag and you know say well you know give me a width of 200 pixels for all images and that you know visually fixes the problem but now if someone say with a mobile phone was loading this website they would have to first download this giant image only to have it resized by their browser not a very efficient way of handling things so the proper way which I'm going to leave up to an exercise to you for your project the proper way to handle this is if we look in the the uploader it mentions a few commented out things here include our magic or include carrier wave blah blah blah there's a few different ways of handling it all of them need some kind of command line image manipulation program installed on your virtual machine so the typical way I do it is we're using a Debian based or a buncha based virtual machine so I would use apt-get to install image magic image magic is a command line image manipulation tool then I would install the mini magic gem in the gem file and I would enable carrier wave mini magic and then there's a bunch of commented out things here for doing scaling or making different sizes and the docs are really good the other thing that carrier wave does for us which is really nice if you think back to web dev - when we did file uploads we did things like checking file extensions and mime types to make sure that the thing that the person was uploading was really an image carrier wave does that for us automatically so it's already doing mime type and file extension checking and we can circumvent that and we can like give it a list extensions that we specifically want a whitelist maybe you did maybe you're not dealing with images maybe you're dealing with a PDF so you would just set the whitelist just to PDF and you could do mine type white listing all sorts of extra stuff and the docs as I said are really really strong so that's that is image upload using carrier wave and as I said there is now in edge rails active storage I haven't had a chance to to work with it yet but it sounds it sounds really interesting and just like carrier wave it also supports local file storage but also Amazon s3 Microsoft Azure Google cloud as a way to host your images this becomes important if you want to host your application on Heroku Heroku is a cloud service that allows you to easily host a rails application but one of the things that is a limitation with Heroku is that the file system is immutable so once you load an application on to Heroku you cannot permanently right to their file system you can temporarily write to the file system you could write images to it but it's sort of it can be flushed away at any time so if you want to get the marks associated with Heroku uploads and still have your whole website work including image uploads you're gonna have to configure some kind of cloud service for hosting these images and as I said that can be done with carrier wave but it looks like it can also be done using active storage and that's all I got for you for uploads

Channel: Kyle Geske

Views: 1,478

Keywords: Rails, Ruby on Rails, RubyOnRails, Ruby, WebDev, File Uploads, Web Dev, Carrierwave, ActiveAdmin, Active Admin

Id: CLoZsLk6j0E

Length: 20min 38sec (1238 seconds)

Published: Thu Mar 15 2018