Let's imagine we have a Book database. The entity has Name, Author, Price, and also there's another Entity called BookPicture with an Id of the Book Identifier type.

So far so good.

Whats the current best practice to create one single page with a form where we can set the Name, Authoer, Price (which have to be validated, and thus if have errors, the container must be Ajax-refreshed) and also include a 'Upload picture' button?

The Upload action requires a Submit method because files have to be POSTed to be uploaded to the server. So, if we want the file, we have to give up the Ajax refresh and thus the validation. Submit will make the whole page blink, which just looks unprofessional. 

The Widget_Click action doesn't work if the link method is Submit. 

What do you do in these situations?

Hi Mariano,

So, there's no easy way around this.

Obviously, and as you already figured out, when you want to upload a file you have to do a full page submit (a HTTP POST request), so the only way to not have this on the main form page is to do it somewhere else.

What you can do is to have a popup where you select and upload the files, because then you'd only need to submit the popup.

It would work something like this:

1. In the preparation of the main page you generate a random number

2. you pass this number to the popup

3. when you upload the file, you save it in a temporary table together with the random number from 2

4. when you finally save the form data, you copy the records from the temporary table to the final destination. You can tell which belong to this request by the random number;

5. create a timer that runs periodically (maybe once every hour, but it really depends on how many files are uploaded every day, you could get away with bigger intervals) to delete all the records from the temporary table that have been there longer than, say, 30 minutes.

Hi Mariano

Yes, I can see your issue and we had one with one of our projects as well. For that we used a web block, which has an iFrame. That iFrame has the upload widget and a submit button within it, which will temporally stores the file in our local database and it will then be deleted with a timer. That button is triggered with a JS onChange, when you upload the file, that onChange 'clicks' that hidden button, which has the 'submit'.

This is the OS widget for the iFrame:

However, that screen, which will be in the iFrame does need a GUID as input so that you can link the created file with the data you're filling in in the form.

Thank you for your replies. I will see which method works best for our needs right now, probably the pop up, but the iFrame idea is very interesting as well.

It would seem to me it's time OutSystems figures out a more modern approach to uploading files, this is quite limited and old fashioned. 

Also, don't forget to look in the Forge, there might be a solution for your problem in there already!