Thank you for joining me for this video, File plugin. Servoy University, I'm Bob Cusick. You're going to find yourself using the File plugin primarily in your smart client solutions because you can get folder contents, you can copy folders and files, you can do all kinds of things on the local client file system. You can also use it in the web client in a more limited way by uploading a single file at a time or downloading to the local client's hard drive a file that's in the database. Let's start by having a look at all of the functions that are in the file plugin. So here we have Convert to JS file where you can take a string and convert it to a JS file object. You can copy files, folders, you can create new files. Now this just creates a JS file instance in memory, it doesn't actually write it to the disk. You can create folders and you can create temp files. Temp files are actually pretty cool because you give it a prefix and a suffix and sort of why we'll manage it for you automatically. When the client ends the session, so what will automatically delete all of those temp files that you created during that session? You can delete files, delete a whole folder, get the desktop folder, get the disk list, so all of the attached disk on the local client. You can get the file size of a particular file. You can get the contents of a folder and there's lots of things that you can do here. You can filter it by both files and directories visible and non-visible locked and not locked. All of those kinds of things. Here you can get the home directory, the modification data of a file, move a file, and there's two read functions. One is for binary data. You can read any type of file but it allows you to have a optional size parameter so you can read it in the chunk at a time. This is handy if you have large files. So rather than reading it in one go and taking a while, you can do it in smaller chunks to update your progress bar or whatever. And notice at the end of the tool tip, it says web enabled. So you can use this in your web client solutions as well as your smart client. And then there's a dedicated function to reading a text file. If you just say retext file and don't pass it in a file name, then the selection dialogue will pop up automatically. So you can do it all in one go. This is also web enabled. For your smart client solution, you can have the user choose a specific directory. So for example, if you're going to write out a bunch of files from the database, you can ask user to choose the destination folder and just go ahead and use that same folder over and over. This is not web compatible. Here's the show file open dialogue. This is one that you're going to use a lot as well, both in the web and the smart. Now in the smart, you can go ahead and have lots of different options like to choose both files and directories so they can upload a whole directory of images, for example. You can have the start directory whether they can choose more than one file with the true or false. You can have a filter array so that you can limit the types of files that they can choose. There's a callback method. This is primarily used for the web client as we'll see in a minute. And then here's the show save file dialogue. This is the standard dialogue that will allow the user to save it to their local drive. And there are three different write files. So this is generally for binary data. You can go ahead and write that out to disk. You can also write text file. You can write an XML file. And all three of those write methods are also web enabled. To kind of put all of this together, I've created a very simple sample solution. All right, so let's see how this looks in the smart client. So here I have just an empty file and we're going to press the import file button. And we're going to go ahead and take a sample picture of the koala. Now let us down here at the bottom that I'm limiting the types of files that the user can choose by jpegg for PNG. So I've chosen my file. Let's press the select button. Now here I have my picture and I have some information about it, the file name, the path, the file type, how big it is and when it was last modified. Now notice here I've also put two types of fields. This is a native media field and the other one, this one here is just a label. Now notice how the native media field is the full size image. And if you make the media field editable, the user can come here and right click and load it, save it, copy it, paste it and remove it in the smart client. Now you may not want the user to do this. Like in our case, this is supposed to be like a document management or asset management type of application. So we don't want the user to just load new media in there because we want to store all the information about the file with the file in the database. So if you do use a media field, just make it not editable. And the code behind this import file button, I've allowed the user to upload more than one file. So the user can just simply hold down their control key or command on the Mac and bring in more than one picture at a time. So if you say select, then here's the other files that the user has imported. Let's see how this works in the web client. Okay, so here in the web client, because my media field is editable, there's the delete, the load and the save. So again, if you're going to use this at a document management type of application, you want to make your media field non-editable. And then write your own buttons to do the functionality. So let's see how the file import works in the browser. So notice it works a little bit differently in the browser. You don't just get an open file dialog. Instead you get this upload form, and the user chooses the file, and let's bring in the tulips picture. And they can only do one at a time, even though they can do multiple in the smart client. Once the files chosen, then then you press the upload button. And there it is. Now notice here that we got the file name, the file type, the file size, and the date mod, but we didn't get the file path. That's because it's uploaded via the browser. Now we can even go ahead and export this file. So let me go ahead and go do a different record here. Let's take our friendly koala, and let's export him out to our local hard drive. So here I get the standard image. Notice I've created a custom title called Save the Image. And I've put in the same file name that we stored in the database. So this is name the same thing as it was when it was imported. And we'll click Save. And here I have a little form variable that just shows that the file was exported successfully. Now let's hop back into Servoy and take a look at the code. So here in my document, JS, we can see the code behind it. And here's a quick tip for you. If you want to hide all of the comments, so all of the blue comments that shows the UUIDs of the methods and all that stuff, you can come over here and right click, go down the folding and say collapse comments. And it just makes it easier to read. So at the very start, I have a form variable called error that I've set to nothing. And then the button that does the import starts in line 13 there. And we first check and see if we're in the smart client. And if we are, then we use the show file open dialog. And let's take a look at that function down here. And there's lots of different switches that you can use. So you can have the user choose files or folders or both. You can specify the start directory or null if you want it to start in the last place, that the user was when they did the last import. Multi select, choose or false, so they can choose more than one file at a time. In this case, the code that I've written requires it to be true. Then you have a filter array, which contains the three letter extensions of the files that you want to allow the user to choose from. And you have the callback method, which is used for the web client. And then finally, you can specify the text on the dialog. So here in line 23, I've chosen to just show files. I've set the start directory to null. So it uses the same place they were last time. I set true to the multi select. And then my filter array, the very first part of the filter array is what the text is and that choose files. And then the other three members of the array are the actual extensions that I want to filter by. Now if they click the cancel button, the files variable will be null. And so that's why we say in line 24 if the files is not null, then go ahead and do this import callback method with that array of files. In line 28, we say else, meaning that it's not running in the smart client. So it must be running in the web client. And therefore, we can only do one thing, which is to have the import callback. At this point, the web client doesn't support all of the different options that the smart client does. Once we get our list of files back, we then come down to our import callback. Let's take a look at that. Because we allow the user in the smart client to choose more than one file, there's a file array. So we need to do a for loop and loop through all of those files, even though the user may have just chosen one, we don't really know that. So part of the for loop we create a new record. And then what we do is we set the fields like file media, file, path, file name, file type and file date mod to the various attributes of each one of those items in the file array. Now each one of those items in the file array is of type, Js file. So the Js file allows you to get all kinds of information and set properties of each individual file. One of those functions there is get bytes. Get bytes will get the actual data from the file. And that's what we're going to put into our media field. So we get the absolute path, we get the name, the content type and the last modified. And then finally we get the size in line 54, so we do a little bit of math to show the size in a more user friendly way. And then finally in line 66 we call database manager saved data. This is critical, especially if you're going to be doing it in the web client. This is what's going to actually save the record. Moving on down here to the bottom for our export file, we set our form variable to null. And then we use another plug in show save file dialog. And here it passes in the file name. Now the file name is that database column that we have that contains the name of the file that they uploaded. We change the title on the dialog to save the image. And then if that file is successful again, they didn't press cancel. Then what we do is we use another plug in function called write file to take that file object. And then we take the file media column in our database. And we tell it to write out what was in that file media column to the file that the user specified. And that returns true or false. And I put that into the success variable. So it says in line 89, if not success in that form variable, put there was a problem saving the file. Otherwise in line 92, the file was exported successfully. There's a lot of things you can do with the file plug in. It's very rich and allows you to create very robust document management solutions. I hope you try it out on your own to explore all the other options. Thanks for watching.