How to Create an Active Storage Previewer

[Music] what's up guys this episode we're diving into an advanced feature in active storage where we're gonna be creating a new previewer so pre viewers are classes that can process your uploaded files and create a preview image for them and built in into rails by default there are three and they handle PDFs and videos and that's all they really do right now so we're gonna create one that treats presentations as pre viewable and so will extract a preview image from presentations like powerpoints keynotes any other kind of presentation format that our tool understands and the tool that we're using is Libre Office this is an Open Office suite it's open source basically it is what we'll use on the command line to convert our presentations into an image and we're gonna do this on the server side so that we don't have to load their GUI and we'll just all run in the command line and so that's what you need to look for if you're trying to build one of these yourself you need something that runs in the command line and just to point out here we're not going to dive into this in much detail but if you want to see any of the previews built into rails active storage lib active storage pre viewers where those live inside the repository and you can take a look at how these are built I just want to point out two things here that are important you need a class method called accept so that this returns a boolean yes or not and yes or no will we process the file that was just uploaded you need to check for the correct content type and whether or not you're required executables installed and then this preview method which is actually the where the real work happens you download the original file and then you convert it to an image and then you upload that image so that's all you have to implement to build your own preview or let's dive into building our own and we'll get into the details of how this works so let's create a new rails app I'm going to use my rails app template so that we have devise and bootstrap and some things installed already but all you really need is a rails five-point-two app education that has active storage installed in it so we're going to create this application and then run rails active storage install once it's done now that that's done we'll run rails active storage install to get that installed and then we'll we're on Rails DB migrate to create our migrations and all of that now we can get started with adding our upload Abul files what I'm going to do is run generate scaffold we're gonna have a slide deck as our model let's just call it yeah let's call it slide deck we'll have a name and we'll have an upload that will create with active storage so we run rails DB migrate to create that let's go to our routes will have our slide decks up there move that down and then we can have slide decks index as a route our slide deck model can have one attach presentation and so that will be the file that gets uploaded with it and then in our form our slide decks are going to need to be able to do file upload so we'll change this to a file field of presentation and change the label on it and then our slide decks controller will need to permit the presentation here as well so we'll have presentation and once we have that we can go load up our rails server and create a new slide deck so we have the ability to create an upload file so I'm just going to upload a PowerPoint X file and this doesn't do anything right now there's no display for it or anything so we can go to our show action and we can add a section here maybe for the preview so we'll add preview we'll have an image tag for this this is for presentation and we want to preview and we want to resize this to say 400 by 400 you always have to pass some sort of option like this to figure out what size it's going to be and then that's going to give us some sort of error and the reason we get this error is because it's unprovable so if you try to call preview and there isn't a matching previewer it will throw an exception and so that's what's happening here so we need to define our previewer that matches this content type and does all of that now one of the things that we can do is we can look at active storage blobs or blob dot last and we can look at the content type for this so we can say content type so this content type describes your dot pptx files that come from PowerPoint but we can also support keynotes we can support the older dot PPT files and other types of content types for presentation so you want to Google and see what your content types are or try uploading your own and seeing what the application content types are but we're going to specifically implement this one and then go check some more later on so we'll just copy this to the clipboard and have access to it in just a minute as we create our preview so to create our previewer we want to create a folder inside app and I'm gonna call it preview it's just out of convenience and then we can edit app preview errs and we can create a file called presentation previewer inside here we can create a class called presentation previewer this is going to inherit from the active storage previewer and we need to define our class def except blob method this is going to be where we check our blob content type against that string that we just grabbed and in the future we can adjust this to accept those other PowerPoint types but we also want to check to see if our LibreOffice is installed so we'll have Libre Office exists as a method will create LibreOffice exists and here we'll do a similar sort of check to what the new PDF tools one does so here we'll have a LibreOffice path method and allow you to override this and in this case it's super important for this so active storage type as libre office or s office and the reason for this is because s office is apparently the version for the Mac the executable name on Linux I guess it's Libre Office I'm not entirely sure I haven't tested this on Linux yet but you can also override the path by setting active storage that path Libre Office explicitly so now I'm just going to paste in a copy from the MU PDF tools of the exists function with some change variable names basically this is going to see if you've already run this command don't do it again but we will check to see if the version command runs without any errors and so that's when the X's status is 0 and if that ran successfully then we know LibreOffice is installed and pointing to the right path and then we can go ahead and run this command so then we need to implement our preview command and have it capture that file now pretty much the same as the last method we're going to grab this from the MU PDF example so we're following the same kind of approach that they are so in this case we want to generate the temp file we want to draw first page from and we will want to implement that method which will do the heavy lifting for us so we'll have draw first page from that's going to take our file and then we will go ahead and figure out how to draw that file so the MU PDF example is actually printing out to standard out so it's command gets run and then the standardout gets captured in the draw command and then it gets passed to the block and so unfortunately we can't quite do that and our just needs to be a little bit more complicated because LibreOffice does not allow you to print it out the output to standard out so we're going to be doing a little bit of a different style so ours is going to be grabbing the directory where the filed that der name of the file path is so this file path we want to grab the directory for it we also want the base name of that file cell file that base name file that path and we're going to give it dot asterisk to remove the via file extension and so that we can have our PNG file here which is going to be a file dot join directory and base name dot PNG and so that's what will be output and this is a full file path so then we can call system self dot class dot Libre Office path so you can get that executable path from this function above that we wrote then we can pass in our options which is headless invisible convert to PNG and we want the out der equal to directory and file dot path will be our input file and so that's going to create a new PNG in the same directory as our temp file and then we can use the draw command with cat so cat just takes the contents of a file and prints it to standard out so we're going to create the PNG one step ahead then print out that PNG so the draw command can capture it and so that will be our PNG file and then we'll pass in and block here and so we have to have an block as one of the arguments up here so that it will be able to call this line of code later on in the draw command so that is that and then last but not least we can say file dot delete PNG file and clean it up ourselves manually so we can make sure that that file does not get left on our server because we don't want our server to run out of disk space when we've created all these PNG files that we've never cleaned up before so last but not least we need to create config initializers storage Darby and we want to add rails that application dot config dot active storage pre viewers and shovel on the presentation previewer so that's gonna make sure that it gets added to the list and checked every single time and lastly we can optionally add in config active storage dot paths and you could define the LibreOffice executable location in here and now on the Mac the application path is actually this one so it's in applications LibreOffice app content Mac OS s office not LibreOffice for whatever reason so I'm going to paste that in here and our presentation previewer should probably default to say libreoffice if that's the one that's going to be used on like Ubuntu and we don't want probably the s office version of that for the Mac or we could actually check the operating system inside this method and choose the default but we should always default to if this is defined and they pass options we should use that one because that user has configured that one themselves and overridden the default so we should actually fall back to one of these other ones that is more sane and your version of your previewer can do whatever you want here just kind of make sure that it defaults to the executable name so that in case it's in the path then it will be automatically used so that is all we're going to do there to change our config and if we restart a rails application we should be able to go back to our app and refresh the page in run through all this code and see the previewed image so if you refresh the page and we have a broken image in this case and what we can do is take a look at our logs to see what went wrong now in our logs we can see a stack trace and that is part of the request to grab this active storage route and so it grabs that and it begins to run our previewer and then it crashes because it run our previewer it's inserted a new blob for our image/png version of the content-type and all of that is good all of our code ran successfully except when it got to the resize we didn't have the mini magic gem installed in our application so this is all we need to do need to add mini magic to our gem file and we'll be good to go we can refresh the page and it should work this time so if you ran into any errors maybe you made a typo you called the wrong function or something then you will see it in a very similar stack trace whenever that image does not get displayed correctly you can take a look at your rails logs and figure out exactly what went wrong now I've installed mini magic and we can see that our image preview has worked successfully and now we can see that that works with these powerpoints which is really cool so last but not least if you ever wanted your previewer to support multiple content types you can actually grab your content types and put them in a constant inside of your class and then you can just list out the ones that you want to support here and so I'll make it note this is for pptx files there's actually one called application X ole a storage which is the old PPT files but unfortunately this one actually would accidentally trigger if you had I believe an old XLS like spreadsheet and maybe old doc files now this one of course I'm going to leave commented out because it's too generic and actually is probably a bug that is overriding the original content type it's is more which is more descriptive usually it usually says Excel or PowerPoint in it and you should be able to grab that out but unfortunately that is how it is right now and so there's probably a bug that gets fixed in the mime types wherever that is being called inside active storage that gets cleaned up so that is it for this episode unfortunately keynote files from the Mac can't really be open by a LibreOffice and most of the recommendations are just to export as PowerPoint files and open notes so if you make changes to this file you're probably going to need to restart your rail server so that it gets read correctly but that is all there is to it it's really straightforward to build your own previewer and I hope that we see a lot more of these we should be able to package them up as a gem and then have them automatically included into your pre viewers just with a rail time so if you want to see an episode on creating the active storage preview or gem let me know in the comments below and we can get to that in the future episode until then I will talk to you guys in the next one peace [Music]