#111 In-depth Look into ActiveStorage
12-24-2017

Summary

In this episode, we look at ActiveStorage, which is the new file uploading interface in Rails 5.2, and how we can accomplish direct uploads to cloud storage, retrieving & displaying uploaded content, and showing progression with progress bars.
6
rails 5.2 cloud uploads 21:59
  • Student & Teacher
  • $9.00 / month
  • Valid School Email Required
  • Same Access as Pro
  • Subscribe Now
  • Pro Monthly
  • $15.00 / month
  • Access to Pro Episodes
  • Invite to Slack Channel
  • Priority Episode Suggestions
  • Ad Free
  • Subscribe Now
  • Pro Annual
  • $150.00 / year
  • Access to Pro Episodes
  • Invite to Slack Channel
  • Priority Episode Suggestions
  • Ad Free
  • Subscribe Now
  • Teams
  • starts at $75.00 / month
  • 5 Users Minimum
  • $15.00 / user / month
  • Same Access as Pro
  • Subscribe to Teams
there are turning to ah to add a turn around and learned lessons and vanilla to it as storage which is a new feature camino their will to fight to its for handling foul up clothes so with their user model going to create a new user when when added this avatar attribute the leeches a file we want it to upload then also showing progress bar with a cop clothes and then we can see that we'll get our image back in there we can also be sizes so this will will be creating think i'm looking at some of the inner depths features of active storage one the biggest features they wanted things out like most bad actors storage they don't need any credit database migrations if you want to wager add a uploaded to a moral one the way the rails able to do that is you simply more fit associations with the upload a model for example if we have the user if we want to upload files for this user that we can say has one attached and then pass in the yet to be like avatar and that's all you have to do you not to do anything else as far as database scheme it goes it's just going to war am i to sources by the faults or on the local environment the hard drive you also had the building to store to the aid of us as three the google cloud platform or is her in in this example today and these media which is a amazon has to be compatible a pr it it's one that i really like because as far as the bills application goes and other than the in point being their friend the application should really does not see any candidate friends within the whole state of of many universes s three and his umbilical watch it because if you have a sandbox a fireman or a development of our mid they you want to work with instead of using the s three and having to rely on their service then this is something that you sell clothes and allocate the resources eighty two as you need and it's a free option to which is always great and as we'll see getting then set to use with actors storage is really good to be no different other than a couple of configuration changes that will make it our storage gamble while and this is going to war without any hassle so to get started i created a brand new wales applications using the bills by the gym so but ty burrell zest for shit you can see that i'm ordeal of the bills five to make it to if you need to us all this began selling just a gym install rails and add a dash dash free this will go to the process of installing the weight israel's pre will use for sure only television you hear that it added is actually want if you're upgrading your wealth application to rails five to the you'll need to run the rails at the storage install if you're wanting to use the act is storage and all that's going to do is create the migration file which is what a great actors or detachment and actors were to blobs table so the president to do with the applicator just get a user scaffold to so we have some know we can use cigarettes a day that so does better run will generate scaffold user and impersonate molesting and then as if we are gonna want to upload files against this user model later down the road we'll have to do anything they can just be an afterthought because we're not that indeed a database migration to add a avatar to the caesar catches could be all that behind the scenes with the poly more to associations that the storage so once we created my gracious we can just run drills the b my great aunt in all creator tables for us so within our rails application we had this works to read to read this or stretch res scan of the war all the local files are uploaded so by the ball at his word is getting easy local storage whoever we want he's many of them to score the deep rooted in so many young within the application directory and just get up without vocals work for it really doesn't matter you creator use a different folder but the sororities service that is good it's i'm in eu server event has in the path that i wanted to host this case is could be storage and then we'll see that we get some information popping up so right off the bat we have written point in the end point is going to be your computer's ip address want or nine thousand to get multiple network cards they you might get additional ip addresses in the heavier the back or your home ip address and then yeah the access key which is going to be the public key that we're going to put in the application then we also have the secret key which is also dated for upvoting the files and as soon as all the information that we should need in order to be able to upload files to many ill so what do they get fed for under the stores i get more while i'm going to one comment the amazon settings and for the most part we're to believe that's the way it is what are we on a copy of some of the settings that we got from any of and typically you don't wanna keep his secrets with him here it said you want to use the now credentials and will swipe to which assesses secrets get more stuff i ask is and is that they sit in your clothes this is just ate the pretense of armor you then leave are we to nancy us east want that doesn't really matter that we came creator but good name such is great the bucket truck to ruby and they we do have to create a couple additional settings because with the way that this is going to work we have a shade ikea dress whereas with a debbie west it's quite a typically try to post says something like debbie debbie in this case are but today which is drafted ready and then be asked to read died they get us out something but instead we're using a different domain name so we need a different and point in it we don't want to pretend the bucket name within the domain because that's not gonna really work with the ip address or a custom domain if you're using that sell it said and escorted create a good point and this employing them what he is i'm just gonna pick the first mural then we also need to add eight additional option so we've over rated us part so for now we need to say it's an abuse in this as part of the sub domain name we want to use that as the patents that in your able to do that with force path style and what is said this option to true because we're unique be using the amazon a guide to store files were then add that and he debbie u s s t k s to reach him however because we're using and whether we control which is armenia service it's never going up on on amazon so what then are jump while villages at the gym eight of us as dk s three and indeed require falls to the genre but no breeze on the application when every make changes your job file or with the storage site yeah i'm all for all and then under the two big environments the bell made better be filed and in the production or as you're going to want to change around one thirty one beacon they died active storage that service but the voyages said the local level we can said this to amazon to now use our amazon settings so next week you start adding the upload to war user so organizations user has one egg hatched the organ it has in a predator in this case we're just gonna call avatar and then in the users controller under these are friends which is our strong parameters we also need to add the avatar brenner here as well this'll be white listed and they within our users form where we have our first name last name what is going to copy yeah wanna bes and there were going to create one for avatar and seven the tax field or abilities the file field miller does indicate avatar so what their real server in armenia server running with you know cousin sal so on our local those sports me thousand for slash users you create a new user we're going some information that we can select our avatar now just make this profile picture and then they create user the yeah see that the book it does not exist so we want me to first log into word many of our men and create the bucket so with armenia it's it's frightening it is click on the plus will create a bucket and are about the name we'd named trip to ruby so they'll ever bucket created which he would go back then bush is refreshed the page which will all come from the importance of the shit again we continued they can see that it worked back in the media browser we get checked out or drug for bebop it that we can see that there is no way thought op loaded so jealous it's an interaction with our follow up voted so the personnel we do is we can check to see if the caesar has the file attached would you give them with his cardiac user in a call or object which is the avatar in a week ago attached and if we we friendship page you'll see that avatar attached is true the mini what the user to be able to download this fall baby it's not necessarily an image but a different kind of father you uploaded so we wanna trade away with it to download the file and to do this we do use the euro for damages a bleak as in the user died avatar i'm going to create a link to it then i'm just going to display the tech so we can see what it looks like there we will use the euro for avatar and it is a it's it's variables we get the call and user and gone back to our application a fresh unabated we now see that we have our euro and if we click on it you see that takes us to the better and this when the image is also pretty easy when you just uses standard image tag there we get as in the euro for the users avatar what are some situations you may know what to display best in the user does not have an avatar so was someone to pass and it just look at what the content type its self we call user avatar we can also passing content height so let's see what these to look like at their application a refreshingly can we can see that say in that shithead one reason that we ever broken image and this is probably something to do with the neo umpire met collaborative we look at our common specter if we go under the console we can see their refusal of the image because it violates the content security policy directives image source which allows itself over h t t p s or de dah so within our can take in this allies risk honor the content security policy that are being filed under the image stores will also need to pass an army neo barman it and you can make this a secret said that a nokia but in new dynamic we be easily of armor that speed needs i'm also see a similar issue we had to do direct upwards with the default source that will be dead in our apartment here as well so i'm just going to donate a natter many a server in year again because is is in the initial wiser let's go ahead and we start our wills application to to get these changes so cut back a repetition out of wee wee fresh her page oh now see that it's disclaimer and it was all had the image content pack so there's a pretty good helper said come with active sort so we only want to display vienna shag if the catchment is a actual image illegal event news or bad avatar the only thing called image question more so back at the application free refreshed we see that the images still displayed because it is affecting the image wonder if we were to pick something different like a zip file if we tried a couple of those say that if the application said in the image did not show at all so sometimes you may want to display a smaller or a constraint and midsize and at the source of course is al the box if he is a mini magic gem so copying a image that we're just going to remove the euro for a discernible user avatar the weekend cause of the call variant know we invest in a predator like he resigns the wiki give it our dimensions this case which is used twenty five pixels by twenty five pixels and if we are going to use a variant and resigns we do need dead in the mini magic jammed into origin file so go into our job while others were dead in the gym many magic then beach on the robot obese or you will sell caucasian right so let's go back to our application and was good and changes back to a different image and out to select people fall image again you will upload those know we see are smaller image is walls are original size so sometimes we are applauding are images we don't want it to first past the more server and then about two or source lose should instead we want to do some because they tried to upload an aide to write upload is where the file goes directly from the cool aid to the storage place we're going to be old to do that because at the source is going to do the very end we sizing on the fly in that's really great for us because we can put our application if one of the cd in to serve up the assets while giving the benefit of doing need to write up for it and this is gonna be much more preferable over doing something like passing it to the application first so bleak as elway were not high enough resources on our web application and again focus on serving the end users instead of handling the images so within our app assets java script in the application i j s well we'll need to add and be active storage if it's not party been added in with a new application but this will allow us to do or to rack up loads and then back to perform waterfowl field we can simply called direct up with true or you know so good that declaration within your porn tag that would work as well water in our case we just need on the foul field we will refresh actually made the changes in their wills like your file and upload it and hopefully it'll still works so one thing down like to do now is will we uploaded image we learned that should give us some feedback that it is up loading maybe if we have multiple images or something like that we would want to see the progress bar of its actual status were able to do that with the actors storage java scrip that we included and if you look at the edge guides for active storage they have some jobs with a you can use to automatically add in the progress bars so we're just going to copy this information into the direct upload that j s fall or whatever j s well and then we're also going to bed in the selling for the upload progress borders rebecca your application that is gonna create a new file in a disconnect call this the direct upload that j s and they said the information that we got from the rails guides and that maybe it is when the direct application is wise is so when it's starting to do the upload we're going to add in this h t m l and then we have a couple of different events that you're going to win it starts up loading a particular file what tube removal class and as we go to our progress of it upward enough while we're going to change the width of our progress bar if there's an error there were like to add a care in the edges said they attribute and then when the outlook is finished we're going to change the class to the direct upload complete and then we can copy of the styling and as selling i'm just going to place under the application that's the assessed value very well can throw this into a direct up with ideas as if you wish and so back in her application because i'm passing this all mobile omar met i'm going to go to the inspector and under the network kept under the law mind when it changes to a slow three g. to so we can simulate a slow upload the knowledge is a file update my tank alibi file and then head out the user to know we did see that the input has changed and eight now just has a low bar day we saw it finished the progress know it's completed the infamous slow three g. connection it's taken a while to download the image it's not that we average user avatar but some also work with many images so let's say if we when the user to upload all one of their stock photography it's that they've taken we can do it a has many attached incentive a has one attached you know he doesn't another hatch be like images because we haven't read that to be there were up voting against we also need a comeback into our users controller under the user primers or the strong parameters an impasse and are images water instead of just passing in the sample images now we're gonna have an eight are ready of images and then enter for 'em aged geometric our images and they should work what are we are going to need to educate them multiple images can be selected here who were able to do that by adding the multiple true sept it passes out now what do you go back to work at it we now have multiple images then applied to select some stock images that have they want to select five of them and then uploaded all five of these files agency better progress bars point that's because i'm one eight and was shitty connection net but they did successfully sued now let's go ahead and add in these images here sound as good common out our large avatar and it said i want to just went through each one of our user images so we have our ad user guide images to manage and then we can display the image forgot what it is some kind of very precise it it is and has been a copy of the previous good and instead of doing the avatar and going to do the image that we don't need the ad user declaration 'cause we have the object right there we get so upset get the image is in fact an image and less what about the the size of maybe fifty by fifty they're making clothes outer loop and we will need to go to reach one the images so we also have are pretty bad that the the school and and and a one hundred five one hundred in a week you look back home in erupted can see why this happened with the variants so i'm back to our application of the refresher page we now see each one the images and if we go over to our men your browser and if we go into the variants folder you see that we now have our image is uploaded here but the cool thing about this this said even though we have our main original image uploaded of legal into one of these we can see that we had two additional files for this one variant and it's because we ever fit the pixel and er hundred pixel image so when actors or distilling is that is still in the lazy loading on the image because we're using a variant and it's having to use me magic to scale down the image size its do with it on the flight but only one car and then upload c variant to or cloud storage then this could refer to the cloud storage from the portal one and sad and really impressed with that sort of given it a fair shot in the book and i think that is good because we're slow should go on board just because of how easy they make it the next big right into the will score and baffling check out the documentation on get up as well as the edge guides because as a weapon we haven't covered and if you have a collection of writers guild good at was one query and after you call all the records he call with detached images to avoid the impossible and and another thing that we been covered as we're living in a patch file and it's as simple as his calling the file that hurt and if you want to do this via a active job which is going to do it like that but the fault being called heard later and with waiting to attachments you saw that would call and euro for the user bad habits or and this is going to generate the party made you or l for the blob that points to the application and we get the requests from the bills application it's a good degree degree direct lars storage euro and from there that link will expire within five minutes if you're wanting to create a link to where they can download the files the yankees he builds blah path and it has in the user got avatar and this allows you to add in the disposition attachment or downloading the file there's no they're really cool feature that they've edited that's the preview for non image files so if you're handling p d f upload sir something like that and we're gonna need to install the app up a bag or the new tool for the videos or for a p the elves and by using the fouled up review the hint and enabling size then it's going to be cited p f or skidded take the pressure on the video in use it as like a thumbnail well that's all for this episode watching