Enhancing the user experience was one of the fundamental goals when creating Geocortex Workflow technology, and we wanted to spend some time today to show you how you can enrich that experience using images, specifically within the file picker form element.
In this Geocortex Tech Tip, we’ll show you how to create a simple workflow that displays bas64 encoded images to your users have within a form.
Video Transcript
“Hi, thanks for joining me. My name is Ryan. Today I’d like to show you how you can create a great user experience when a user selects an image using the file picker form element in Geocortex Workflow. Let’s have a look!
Let’s start with a display form activity and inside that display form, we’re going to put the two components we need – first there’s going to be a file picker that the user will use to select the file they are after, and then we’re going to need an image control that’s going to receive that file afterwards.
A couple of things we’re going to want to do is we are going to make this image element non-visible because when we first load there is no image selected, so we don’t want to be showing this yet. We will make it hidden and also, it’s a good idea to put a width on this because we don’t know what size is going to be uploaded in. We don’t want it to fill the whole screen or anything. We’ll give it a width that’s going to fit, in my case that is within the left panel region.
Next thing we’re going to do is tell the file picker to only allow one file. I’ve got one file picker and one image control to accept the content of that. So, it makes sense to restrict this to just one file.
Now the next step was going to do is actually take the file content that selected in the file picker and apply it to this image element, and the way that were going to do that is through the change event of the file picker. So, this event fires every time the user selects the file or clears their selection.
In this workflow here, is where we are going to be able to take the content of that file and give it to the image control. We’re going to do that by taking advantage of something called a data URL. What a data URL is, it’s kind of like a normal URL to a resource or HTTP except it’s specifying that we have the data in line. There’s a certain syntax here, where we have declaring its data, declare the mime type, the content type and then we’re actually going to pass it in the actual raw bite data, and we’re going to do in a way that’s base64 encoded. Here’s an example of what base64 encoded data URL is for an image. So, data followed by the content type, followed by base64 decorator and then followed by the actual base64 encoded content. That’s what we’re going to take advantage of.
What we can do is take advantage of some activities like, “Get Base64 String From File”. That’s going to be useful for us. Before we do that, we should put in an “If” condition, because this file picker might have no file selected, because the user could have cleared it. We just need to account for that. We’re just going to make sure that the file picker has a value. As long as the file picker value is not “undefined,” then we can go this way and go and get the content.
And here when we’re going to get the content, we’re going to drill right into the file picker’s value, which in this case, has a collection of files and since we know it’s got a value and we know that the maximum number of files was one, we can just go and get file zero from that list. We know that’s going to be a safe thing to do.
So, that’s going to produce a result string that will have our have content. Now, we can supply that content to our image form item. There’s an activity called “Set Form Element Property”, and basically we want to set the value property of the image element.
Here I’m going to select the image element and it set its value property, and the value property that I’m going to set it to (this is kind of interesting part) is to be a data URL and I kind of need to construct this out of the various elements that make up a data URL. It starts with data, then it’s going to be followed by the content type of that file.
If you remember, we can drill into a list of files, get file zero. This actually has a type of property that is going to be an image / jpg – whatever that file type was. Then we’re going to declare that it is base64 encoded content, followed by a comma, and finally followed by the base64 encoding content that we get from our getbase64 activity. That’s going to construct the right data URI for us.
The image control is now ready to go except it is still hidden. If we do a, “Show Form Element”. The element we want to show is the image control, that’s going to make it work.
Now, we should also fill out the other side of this. If there are zero files, we could do the exact same thing here. I’m going to copy that set form element property, but rather than setting it equal to this, I’m just going to set it equal to “undefined”. We’re going to clear out the URL and instead of showing the form element, I’m going to hide the form element. Let’s try it out!
I’ve got my sandbox application before I run this, I add my file picker, select an image and there it shows up! You can see if we were to inspect this, it’s actually a data URI that is being used right there. If we’ve done everything correctly, we should be able to clear that, and it removes that.
That’s how you can do it. You can have a user select a file with a file picker and through the change event of that file picker, we can update an image control and use a base64 encoded data URI to get image content right back into that and make it a really rich user experience here.
Thanks for watching!”
Not a Geocortex user and want to build custom widgets (without coding) to streamline complex business processes? Click the button below to learn more about using images with Geocortex Workflow technology, or to schedule a personal demonstration.
Contributors