Active Storage For Video Uploads | Ruby On Rails 5.2 Tutorial

hello the Internet my name is Dean and welcome back to another Ruby on Rails tutorial this one's going to be covering using active storage for video uploads so we're gonna do something a little bit different for this one we're not only gonna do video uploads we're also gonna do a thumbnail system similar to YouTube and we're going to use the video j/s framework so that we can customize things a little bit I'll try to cover some of the examples but let's go ahead and get started we're gonna start by generating a scaffold so we're going to type rails G scaffold we'll call it a video we'll give the video a title and a description the description will be of type text and I think that's about it while that's running we can come over to our config and our routes dot RB and we can say root 2 colon and videos index and we can save that then we can come up to our app assets stylesheets and realize that this didn't run because of spring so we'll just close this and open up a new session and then t /d slash sites YouTube YouTube okay so spring stuff you shouldn't have to do this this is just an interesting problem that I've been running into rails G scaffold video title description and text hopefully that runs this time that did so now we can delete the scaffolds dot s CSS file this is all setup let's do a rails active underscore storage colon install that will install the active storage and then we can do a rails DB colon migrate to migrate the database and then we can type rails s to start the server and this should all take us to the home page hopefully and there we go so if we click on new video there is of course no ability to actually upload the video yet so let's change that we'll start by going into the models video RB and then we'll say has one attached and then : let's call it a clip that way it's easier to differentiate what we're referring to and then we'll also say has one attached thumbnail so we can now come over to our controllers and our videos controller and then we can scroll down to the video params and after description we'll add in a comma and then a colon clip another comma and then the colon thumbnail and just as a bit of an aside if you for example wanted to include multiple thumbnails you would change this thumbnail to thumbnail colon and then just an empty array and that would allow to accept more than one and you would change the model to say has many attached thumbnails and then in the views what we're about to do right now you would div dot field we go form label clip form dot file underscore field clip and then we can just copy these two paste them down and then say thumbnail if this was for multiple thumbnails you would just type as multiple I believe but since we're only doing one we'll leave it like this so now we just have to go to our show page and we'll do the thumbnail first so I'll just say image on their score tag at video thumbnail and that will allow us to preview the thumbnail and then we can also do well let's just do the thumbnail for now so test description and I actually have the files that I'd like to upload right here so I'm gonna upload my device user accounts thumbnail and I'm going to upload my intro because that's only seven megabytes so that'll go a bit quicker so we can it create video and then our thumbnail is of course massive as per usual so we'll just force it to resize will say div equals with 400 pixels height 400 pixels and we'll close that at the bottom of the image and refresh and nothing changed so now we'll come into the image tag and we'll put in a comma then we'll say style with 100% height Auto and that should force it to resize itself and there we go so now below that let's go ahead and let's make this video appear so we can start with just a video underscore tag at video video and we can see if that'll work so we do that we refresh and then it says it's at video clips sorry so we do that and then it says the asset blank is not preset in the asset pipeline well the reason for that is we need a URL for wrapped around this video clip because we need to get the actual URL of this asset that is the video clip so once that's done we now have a massive video with a similar problem to the last one so let's see if we can force this to resize itself so outside of the URL for but inside of the video tag I'll do the same thing where I say style : and then I give it a width of 100% and a height of auto and then I refresh and I hope for the best okay cool so we have what appears to be the first frame of the video if I come back to the videos and double click on the intro and drag it over here you can see that hopefully the very first frame Jesus hopefully the very first frame is what we're seeing right there and it looks similar so why can't I do anything well if I right-click I can see that I can show controls but I can also open the video in a new tab so if I do that and that's a little deafening if I do that you can see that it opens up a player where we can do everything including download the video but what if we want to see these controls on the other page well for that we can either right click and hit show controls that's one option alternatively we can come to the video clip and again after the styles will just say I believe it's controls : and then just an empty string and then if we refresh those options are available if I get rid of that and I refresh they're gone and if I put them back and refresh they are here we can fullscreen and all that goodness okay so how do we incorporate the video j/s thing okay apparently my recording cut out there so we're going to now switch from using the default player that we have right here to using this video jeaious player you can find this anywhere online really just google video j/s or google an alternative player and do something similar to what we're about to attempt so to get started I just headed over or I just went over to their getting started page and their download page and I went down to their sample so for this they gave a style sheet and the script so I'm just gonna throw both of those in here and then I'm going to grab this script at the bottom and I'll just paste this one all the way at the bottom the final step after we have all of that is to just grab this entire video block right here and we'll just paste this below our current video player so if we do that and then we refresh we should get a couple errors over here and if we scroll down we can see that our new video player is up but it is it's not working the reason for that as these sources are set to their their video which we don't have access to so let's get rid of one of these sources and let's get rid of this P tag inside of this video ID where the poster is we're going to get rid of the poster and we'll set this to be equal to the URL for our at video thumbnail and then if we refresh that gives us our thumbnail you can see we have an error here telling us we can't do anything that's fine now for the source again this video if I right click it and hit properties this is an mp4 so obviously make sure that you're not trying to do this with a different format of video make sure that this matches so I'm going to throw in some Ruby code here and I'll say URL underscore for @ video and then I'll close the parentheses and if you if you want to go through the validation to make sure that the users uploading the proper that's the type of to make sure the users uploading the proper type of files I do have a tutorial covering file validation which I can link to and also throw in a card or something for you guys so I'm gonna save this again cuz apparently already did that and then I'm going to head over to my browser and I'm going to refresh so now I have a working play button just as a note for that I did have to hit ctrl + f5 to force the refresh I don't know why I didn't work initially but I'm assuming that's something to do with turbolinks so that is working if I'm not mistaken there is an option to use or to yeah the video J's plugins and this is just a massive page of all the good plugins that you could ever want for this really either way there is a method of changing where the play button is to Center it and making it a bigger play button but if we hit play right now you can see that the video is playing as you would expect you can fullscreen it and it's done through this custom player rather than through the default player and of course we still have our thumbnail and all that good stuff so that about does it for this tutorial you know if there's anything else you'd like me to cover with active storage just leave me a comment if this video helped please remember to like it if this video didn't help remember to dislike it so that other people know not to watch my tutorial and I'll see you in the next video thanks for watching [Music]

Channel: Deanin

Views: 5,936

Rating: 4.9791665 out of 5

Keywords: Ruby on Rails, Ruby, Rails, deanout, Ruby on Rails tutorial, Active Storage, Rails 5.2 Active Storage, Active Storage Tutorial, Active Storage Getting Started, Ruby on Rails 5.2, Ruby on Rails 5.2 Active Storage, Ruby Tutorial, Paperclip alternative, deanin, new in rails 5.2, ruby on rails 5.2 new, rails 5.2, rails 5.1, Ruby On Rails Video Upload, rails 5 upload video, youtube clone, how to upload videos in rails, video upload website, rails upload videos, rails upload video

Id: uV1hWKtza0g

Length: 10min 47sec (647 seconds)

Published: Fri Jun 01 2018