Servoy Tech Webinar #63: Uploading Files & Uppy

Good morning. Good afternoon or good evening depending on where in the world you’re joining us from I’m Sean Devlin from Servoy and I’m pleased to bring you This tech webinar that we run every two weeks before we jump into it I just want to beat the Servoy world drum one more time and remind everyone that it’s coming up November 9th I believe and we have all the info for this on Our website so please go visit there if you haven’t signed up. I do believe there might be still some space left in the conference hotel But if you haven’t signed up yet, please do so It’s gonna be a lot of fun and we’ll be posting some more info about the sessions about that soon Today I’m happy to be joined by my colleague and friend Patrick Ruseert who is a long-time Servoy expert and he’s done some pretty cool work on how to deal with file uploads In Servoy and it’s a topic that we’ve been meaning to cover in this tech webinar series So we finally got around to it because there’s always a lot of questions on our forum and emails to me etc. So Patrick Please take it away Yeah, thanks good morning My screen is visible Yes, I see the lovely northern pick hotel Well, I’m a bit new in the business and The thing asked me if attendees are still on hold, but yeah, I get there not all right How do I proceed here with a slide? Oh, geez. All right The topic today is how to upload files in Servoy There’s always been the file plugin that allowed you to select a file and upload it that has changed slightly when the web plan was introduced ages ago And has remained the same with the engine client, but it could be that not everybody is really familiar with that so I’m gonna show how that works and We can go sorry I Want it to go to the agenda here So the file selecting all right So that is the first thing I’d like to show and the second one is then the file uplum component that maybe not everybody is aware that exists That is a component that allows you to drag and drop files and basically without coding Fives uploaded to the server and then lastly we have a preview of a component that we will ship with here We release in the fall that is I like the file upload component it allows drag and drop It is highly customizable It allows multi file upload, which is one of the features that has been requested quite a lot And I have a pretty sleep UI So let’s The thing to do now is demo right John first demo then yeah demo demo demo demo so let’s see Now I have these lights open so I’m firing up that breaks it Cuz I want all right first demo is how to upload files using the Standard out of the box server with file plug-in So there’s a button here that allows me to select files This one is now filtering for image types. I’m gonna show how that is done in a second So all we see here is images while in that folder. We are in the files in folder. There’s actually More files there’s PDF in text files, etc But this one will only allow me to select images so I can select a bunch of images We can add more can remove one and Then upload them. Let’s see if that is cleared once they are uploaded. They should end up in this Directry here that is currently empty So we upload those and here we got a little message that says that these two files were uploaded So pretty easy use case, right? So let’s have a look on how that is done, which is the next thing you always do read And let’s have a look at the form first that is the form a Simple button and that button has Only the select file method attached which is over here And all that does is it says show file open dialogue Then this parameter controls whether I’m allowed to Multi select files and this is an array of allowed file endings, so that’s how I managed to To only select images and then an important date here is that the files are not directly returned to this method But they are given to a callback method which is down here. They call back method receives an array of the files that were uploaded and In the sample here I’m writing to the message box Which is this one And I get the name of the file and I get the bytes of the file and write them to the output directory This little method just just create a Sorry, that’s something I throw This method just creates a a j file. We have a look For the output path and the funny If it already exists and removes it and returns a j file that can be written to so At the end of the day once the files are uploaded, they just be written to the output directory So for example use case next slightly more elegant version is the upload The upload team that allows to drop files on here. So basically there’s two modes you can click and Select files Yeah, now we have seen how they were filtered And it immediately starts uploading here, so it is uploaded. I can select another one Upload it Select the PDF upload it all the files again end up here in the out So that is the same mechanism And as you can tweak it slightly so you know there’s a few options that allow you to control on Oops, we’re still on No, sorry files and we need for them to do a bit Patrick I have a question. I thought I saw a progress bar But I guess you’re running locally, so if the upload is really quick Yeah, that’s too fast But but I even I even tried with 500 megabytes Progress bar once once How much so if it were if it were a large file though, they would see it Would slowly progress By the way if anyone else has any questions There’s a question panel in the go to meeting console you can type in your question there and we’ll answer them at the end Yeah, there’s an option to also hide the progress per increase you don’t want that Then it would just Show you that it has done the job after it is finished It will show us her first And then return to this date where you can drop All right, so let’s have a look how that works Implementation is slightly different from the other one All right So in that case What is used is The Where’s the upload thing the file upload component here, so I dragged it on the form There it is and it has a few Few options that you can tweak for example, except Property here controls what you can upload So very similar to To what we’ve seen in the file select so if I want to drag for example a text file that shouldn’t be allowed and let’s see what happens then I turn the red and Produces a message here the message comes from Comes from here From that property upload not support a text That could obviously be any item and whatever string I Do not a default I made it match to the to the accept filter that I gave it You can control what I can it shows you can control how long that display The success message stays on the on the screen Here are the properties that we control from here and Well important thing is now to see how the file is received And that is done through the on-day change event because this component is hooked to a data provider here So if we look at the code The on data chain receives the The bytes of the file because that is That is the change that is being made to the data provider the data provider is up here. It’s a variable in my case could be a Record Column of a record My case is just a form variable These bikes in a second So on data change I Write some output like in the other example. I get the bytes and I write them to the file. So it’s the same procedure basically Except for that the event here is a different one than the callback method we’re seeing before these two variables here are a Name in convention that the component is using to provide the file name and the mime type of the file that was uploaded So the data provider will receive the rights and if you want to know the file name and mime type of the file uploaded Then you need to have two form variables with that Data provider underscore file name data provider underscore mime type Name and then here I can I can grab the file name that was uploaded. That is what you’ve seen down here The output here in the field All right, so that is basically also the bin is pretty easy to implement and It can only upload one file at a time And goes directly to a data provider All right next example That is actually the one that marketing asked for when they came up with this webinar idea And that is this one. It’s called a upbeat That is a new component that We want to ship with the next release of Servoy And Let’s see how that works. It asks you here to drop files. So we do that again Let me remove all these from the out folder And let me get some files So let’s see All right, so you see all kinds of stuff happening now There was a toast that told me that I cannot upload a certain file type The files I added to a list before they are uploaded So that’s a difference to the upload bin The upload bin starts uploading immediately Here you can see the files that you’re about to upload before you actually upload them You start the upload with the with a button here. So You can even add more files now afterwards And still decide to upload or remove a file Another nice thing that this supports is you can add meta fields So As a developer in the designer we see that in a minute you can add an array of fields that you want to add to the file that is being uploaded Like to After user for some input on things Let’s give it a This is This is the title And some purpose You save that you are returned to the to the list Now when I upload these You see down here that And while you see in a lot of events anyway coming in but at the end here you see that the files were uploaded and somewhere here You also have the the fields that I provided right For the one file and some purpose this is the title down here. That’s what you get then Okay After an upload is done the user can eat add more So the component will remember the files that it uploaded and it will keep track of all the files that have been in that Uploadation so now we upload one more file Done there it comes There’s quite some API So for example I can clear it all That’s that some more files Like that I can remove a file using API the last one then it’s gone I Can get a list of all files that we have to look down here So now see this output down here Gives me the files that the user currently has in the in the box here Another nice feature is to not use it in line at all So I’m not show it inside the form but showed in a model Let’s see how that looks So now the component is gone and you open the fire drop thingy using an API call And again you can drop stuff Here tells me again that I can only upload files of types on so on so on so And the previous year up in nicer. You have more space You can still do all this everything off extra fields Upload You can control whether it closes now or stays open Etc. There’s a bunch of property that allow you to control the behavior All right, so let’s have a look how that is done here Designer Designer that is close all these All right for the time being The component resides In this subway extra components package that might change when a foolish or how we can release this as its own thing or as part of the server extras Component sits on the form And here you see a bunch of properties that allow you to control how it behaves and what is shown etc I’m only gonna show maybe the most interesting ones Here for example, this is the meter fields that you’ve seen So it’s pretty simple field has an identifier have a name that is shown at the label and has a play folder text So those were the two that we’ve seen right The fire restrictions that it can handle We’ve seen that a few file types were allowed and others not so in this case It’s just an array of mind types basically, but it also supports Jokers like that so any video type any image type Text files and PDFs in that case But you could also have Let’s say a maximum number of files that are supported so you can say user can only have live five files when he drags in seven Then only five or under list and he gets a warning a maximum number of a single file can be added Things like that so you can restrict That people won’t upload you 55 and I megabytes Another interesting aspect maybe is that there are Possibly a range of different sources of files So we’ve seen my fire system as a source But a possibility for example is that you also add a webcam Maybe I can show that Now it looks slightly different it shows you my device to browse from or the camera All right, and you see me and the picture And it have a file here So that is also a nice Edition It supports a range of languages Currently I added English Spanish German friends Dutch Italian, but there’s a few more like Russian We can have them before we actually release that Maybe Dutch All that goes Dutch now Me and up about Yep Let’s see what else I like to show Yeah, the properties now that’s good. I think that’s all done. The rest here basically controls If you see the status bar If the page can scroll when the model is open So when the user uses the scrolling wheel will the page below the models scroll and all etc So things like that Interesting part here is the event that it supports So for example, there’s an event before a file gets added You can run into a method and actually reject that a certain file is added for whatever reason That is similar to restrictions, but you could say that the files with a name or so and so cannot be added So you could refuse that That is a method as fired when the user adds a file before he uploads it That’s a hand letter is called when a file is removed and so forth So the important one basically is this one That is the one that is called when a file is uploaded. That is typically when you want to process a server side The file that you received And then there’s one handler that is called when the up then the full upload is complete So when all files uploaded The on restriction failed we’ve seen that happening that the toaster popped up You remember that one. I’m sure again Which was the file that was not allowed Remember I’m just grab them all that toaster here. That is fired by The on restriction failed event. We look at that code in a second So handlers for basically everything that goes on in the component, right Okay, so let’s have a look on what happens on file uploaded So the file uploaded handler it receives a js upload Object that one is new to server. So that is one of the reasons why we would have released this with the next release of Servoy on that and not today um What I’m doing here again is I output the name of the file uploaded and The number of bytes that I received and then I write it directly from that Js upload object to a file So that’s pretty simple handling Right The other events here That I attached a basically output to a console here What you receive here is a bit different is not a js upload object like that here But it’s an an upbeat file object that basically offers things like The meta fields that they use are added the name the progress status of transfer The ID the type etc So in all these examples when I removed a file added a file etc The events down there. They were just output to the field and you have a look again So let’s see When I remove a file here down here you see fire removed so on so J back So this comes from this event for example Here’s an example on how you could react on the four file added you could do something like Return false if it’s not a PDF then the fire would not be added to the list of files This is the one that is fired on upload complete In that event you get actually an array of all the successful files and an array of all the failed files This is the restriction failed In that case I output the name and the error message and then I Push that toaster And that toaster asks the component for the allowed file times and writes them with a comma separated in the toaster message All right, lastly The component also has quite some API methods that you can go For example the a reset that is That one it clears everything An upload method that starts the upload without the user pushing That button that we’ve seen down here. Let me drag some files back in Boom So that button here and you can also do that programmatically. I haven’t created a button for that case, but yeah, there’s API to start the upload I remove file that I had a button for Get files so you get all the files that are there Get file by ID so you can check if a file for example before upload has made the fields filled out or not things like that All right, so that is basically It regarding the new happy component. I hope you like that So let’s go to The recap of what we’ve covered How do I start from here Present looks good All right, so the file select that we’ve seen the first one the file upload We’ve seen that You can upload multiple files File type restrictions can be provided so you can say I only want text files or Excel files or whatever You need two methods to get this working the first one that shows the dialogue In that one you have to provide the callback method that will then receive the files And in that callback method you receive an array of all the files that were uploaded during that session and You can process them there Nice thing maybe for some of you is that it works in all client types the same so you can use this in the smartline To web-client and G-clined all the same coding style All right next one was the file upload component from the server extra components package Type you see can do drag and drop or you click to select files Fire restrictions are possible through the accepts property It’s customizable. You can also style it so you can override style classes to Customize the appearance of it The files need to be processed via the on data change event And that one is maybe a bit hard to Remember but if you want the file time and the file name and the type then you need to have two variables With the data provider underscore file name and data provider underscore mine type whatever your data provider name is Form variables and that will receive then after each upload the file name and mine type of the file that was just uploaded All right, and lastly the happy component preview that we’ve seen That Can do drag and drop click select You can do multiple files The component keeps track of all files So it doesn’t start to upload immediately Although you can enable that mode too. That’s one of the properties that makes it upload right away There could be several sources for the time being that’s the file system and the camera It can be shown modal or in line on the form There’s lots of interaction possible even before the user uploads so you can look at the files before they get uploaded For example, if you disable the upload button and you make your own upload button Then you can get all the files before the user uploads and check for example the meter fields If they are filled or not and you can say well file number three still needs a description or whatever So there’s lots of things you can do API wise and it has loads of events to react whenever something goes on in the component itself So the meter fields are a nice addition. I think It’s easy to describe a file before it gets uploaded It have language support We have been looking into Providing your own translations and That will be possible. I’m not foolish for how that is done because the list of Strings used is quite extensive I’m thinking about letting you provide a text file that contains all these So that will be possible next to the languages that are already part of it The answer is it requires 2019 on nine Okay, so that is basically it for me Other questions on Yeah, we have quite some questions. Thanks for that. Yeah Well, first of all we had some praise for a great demo from Bob Cusick. It’s always nice So James asked can can this get metadata like file size and file type before uploading it or does it have to be fully uploaded before the system gets this information I think you answered that for the metadata. How about how about for example the file size Yes Yeah, one third file is added to the component you can ask the component for its files And that file array you get there has name and metadata Mind type, etc. So yes, if you wanted to limit and upload to say 500 megabytes You’d be able to do that before they start sending it to the server Yes, but you should probably do that for a restriction because that’s a bit more straightforward, right? Okay, so we had a Control by again in the restrictions you could say that you don’t want files larger than so and so Where’s it? Here there’s a max file size so you enter a number of bytes and then It will be limited to that Okay Excellent Another question from Aros can upbeat be used on mobile to take Multiple pictures and store them in a database I haven’t tried but it’s so yes. Yeah, I think I think the when you use Browser-based application on a mobile and you get to the Sort of file upload integration it typically defaults to allowing you to to get files from I think I think even the Older way for the library as well. Yeah. Yeah, so that should work Yeah, I’ve shortly looked at Some demo and that that looked very much like that does yeah, and I think at the end of the day it’s an input so They do support that on mobile devices. Yeah should work Okay Question from Juan Carlos Anything in the bean to rename the files automatically for example using a parameter Like a renaming scheme And then he type something in which is hard to read out loud, but is there a way to I guess rename Files automatically to some sort of naming convention that you have Before they get uploaded I mean you have the file added for example. I haven’t tried but I would say you can change the name there But I mean you can always do that once they are uploaded right so once you receive them You can do anything with But yeah, it should be possible to do that even before When when you receive the files for example here on the file added event Yeah, you get to file object and that has properties. Sorry that should be possible. Yeah Okay Question from Andreas Or more of a comment I guess one nice extra for the file upload would be a barcode Recognition and then get the information into meta fields. I I gather that’s not really something that you would put directly into this component, but We have applications Sounds slightly exotic, but yeah Before it gets uploaded Why not after it gets uploaded I guess if you look at it If it’s an image you try to See a barcode and you add that to whatever They know that you store Andreas. Maybe you can send us a description of your use case By email or posted on the forum and we can look at it in more detail Question from in-ray Related more to plugins dot file dot right file For really large files is there a buffered loop technique behind or just the whole Just flashes the whole file for memory I think that we’ve seen the whole thing is a memory. Yeah, yeah, I don’t think we in the in the The sort of out of the box API we do any buffering, but that’s easily possible because you can always write Java code when you’re writing a file to so if you wanted to you could you could buffer Another question from on Carlos Regarding adding metadata does the metadata is it Added to the uploaded file can it be added to PDF files with the metadata show in the document properties of the PDF I didn’t get that one I Guess I guess what he’s saying is after it’s been uploaded can and you looked at the document properties Would it show up in the documents properties of the PDF So you upload a PDF that has metadata and that should show in the Metafield that we’ve seen here Right that idea yeah, I guess I guess he’s wondering if it’s in in the file under You know on the file system and it’s document properties Yeah, but that’s that’s very file format specific to the this is took an uploading Yeah mechanism so it’s not a file analyzer that similar to the barcode question. I think yeah, yeah So yeah, once once the file is uploaded and it’s a PDF you can take that PDF apart and grab the Metafield from there Okay, all right I finally a comment from Kim. He said it came right for this component long overdue Great job and I think that that’s a good one to end on because we’re over time seems there’s a lot of questions and interest just to remind you guys this the Third demo that Patrick showed is in requires the next version of Servoy which will be out 2009 that that means our third quarter release which will be out in September for public beta so you can Try it as soon as it’s available And we’ll probably make an announcement on how we sort of properly released that Component as well, so you need the component and the new version of Servoy Patrick great job. Thanks a lot Goodbye everyone. Thanks for attending If you want to watch this again, we will be posting the recording and Patrick do we have an example solution that they’ll be able to have access to when the component is released Well, it’s the one that I had was good enough. Yeah, I think so all right guys. Thanks so much and we’ll talk to you in two weeks

Close