[00:00] In this lesson, we'll take a look at the file upload component. This component allows the user of the perspective session to send files from their own system to the Gateway for processing. You will have an opportunity to process those files however you'd like, including pushing them into a database or saving them onto the Gateway's file system and so on. So for starters, I have a file upload component here and it's currently telling me to browse or drag files here. So if I were to click that browse button, what it would do is open up a file menu that I can use to choose a file to upload. In a bit, we'll look at how we can actually process that uploaded file. There are some properties that dictate how the component behaves. For one, there is this max uploads property here that'll dictate how many uploads can happen simultaneously. So if we were already uploading five very large files, no more uploads would be accepted until one of those five is complete. We also have a supported file types property, which is an array, and each element of that array is simply a file extension that the component should allow. If we have nothing in that array, all file types are accepted, but once I start adding elements, only those files will be accepted. So my file upload component will only accept PDF files under the current configuration. Next, we have a file size limit property. That allows us to specify a max file upload size in megabytes so any files larger than 10 megabytes will not be accepted. And then finally, we have a file upload icon property here. That might seem a little bit strange since there is an icon selected in there, but it's not being shown on the component at all, but one thing that's worth keeping in mind on the component is that there are built in break points. So if I grab one of the anchors of my components and shrink the component to be narrower, eventually the component is now rendered using just a single icon, which is what that file upload icon property is getting at. So that's how the component is configured. Let's switch over to my file upload view here to see it in action. So now we're going to get into how the file upload component actually processes the uploaded files. So for this example, I've created a table in my database called files, and I have a table component here that's fetching the contents of that table. I, of course, have another file upload component up here. This one, I've configured to accept only text files, but all the other properties are pretty much the same. So to get into how the file upload component will actually process the uploaded file, I'm going to right click on the component and then go to Configure Events. So the file upload component relies on two very specific component events seen on the left here. So these are special events specific to the file upload component. So the one I'm using here is on file received. This will be called whenever a user uploads a file. So on that event, I've configured a script action, which is the action of choice. You will almost certainly need to use a script action in combination with this component. This script action will dictate how we respond to the file upload. Now for this example, I've gotten about 80% of my script done already. My goal here is just to pass file information into the database table that I've made and the query to actually do that is already happening. All that I need to do is configure lines three, four, and five here to actually work. So one thing that's very special about this component event is that the event object that we're passed has some very specific properties on it pertaining to the file that was uploaded. For instance, if I need to get the file name here, meaning the name of the file that was uploaded, I can just type event.file.name. Next, if I want to get the contents of the file as a string, all I have to type is events.file.getString and that is a function that will return the file's contents as a UTF-8 encoded string. If I wanted to, I could pass a parameter to that function that would change the encoding. UTF-8 is just the default. Finally, I also want to fetch the actual bytes from the file. Meaning the actual raw file data. If you were uploading something other than a text file, the actual bytes of the file are probably going to be what's most useful to you. For instance, if you are uploading images, the getString function is just going to return garbage. Whereas event.file.getBytes will get you the raw image data you're looking for. So the rest of my script here is just passing data into our database and refreshing the table component to reflect that data that's coming through. By the way, the other component event here, onUploadsCleared, will run when the user has cleared all uploads. I'm ready to see my script in action, so I'll click okay at the bottom here and then I'll go into preview mode. I'll save my project, and then I'll click on browse here. And then I've set up a couple of simple little text files to work with, so I'll select myfile and then click open. And it looks like we've been successful, so my table's set up to pull back the name of the file as well as the actual text contents, which in this case is just the word test, as well as the date associated with the upload.