Hello and welcome to a new OutPower tutorial.
On this video we'll be talking
about how we can do a file type check on the client side in a Reactive Web Application.
We'll make use of JavaScript and the Upload Widget attributes to
overcome the patterns that would be used when developing a Traditional Web Application.
Without further ado, let's jump right into it.
Let's say that you are in the situation where you would like to verify the file
type on the client side to decide which file should or should not be uploaded
into your application.
Currently on Reactive we don't have access to the file type the same way we used to do in Traditional Web.
To go around this, we can do a couple of things.
We can start by restricting which files we can choose for the upload widget.
And to be able to do this we need to have a property
"Accept" on the widget properties.
Now below we can put the accepted file types.
This is a string where the values are separated by commas so for example we
can use something like this...
with this our widget will only accept files with an Excel extension or a jpg.
Another thing we can do is to check the file
type by using JavaScript, for that we already prepared the client action where
it receives an upload widget ID and returns a file type.
Looking at the code you can see it's fairly simple JavaScript from the upload
object we access the file from there we can reach its file type.
but be warned this works fine if the files are recognized on the client side.
So this work great for those basic type files like images otherwise the method will return an
empty string as a response.
so our accepted property is working you only see two files.
And inside of the folder we have we actually have three files.
The image the Excel and an mp3 file.
So continuing with our test, we will choose the Excel.
Looking into our case, we don't have an Excel installed on the machine that is running page.
So we won't be able to retrieve the file type as you can see in this demo.
So please do take this into account if you're considering applying
something like this to more complex scenarios.
But due to this if you're in the situation where it is necessary to know the file type that has been uploaded,
Then what could be suggested is to, on the client side validate the
extension type and on a server side validate the file type.
With this you'll be able to achieve the desired check mechanism.
To be able to check the file
type on the server side there is already a Forge component that will help you with that.
And that component can be found at the following link.
And that is all for a quick video in file type check on the
client-side in an OutSystems Reactive Web Application.
Now it's some care and creativity you should be able to work
on these issues when developing a Reactive app.
We hope you have enjoyed it, and please join us next time for more OutSystems tutorials by OutPower.