Large file upload errors after 10 seconds with react web

I am building a Reactive Web App using version 11.

I am attempting to upload file using the platforms Upload widget.

Files upload ok, unless the upload takes longer than 10 seconds.  If the call to the server action to upload the file takes over 10 seconds an error is displayed "There was an error processing your request." and the logs show "[ErrorScreen] The connection has timed out".

In my testing, that appears to mean my files are effectively limited to around 7MB (slow internet in Australia).

Does anyone know how to extend the timeout, without affecting the timeout of other actions?

Or is there another way of uploading large files?

I suspect I could chunk the files, but I only want to do that if there is no better way.

Hi Stuart,

Did you try the SetRequestTimeout action from HTTPRequestHandler module?

If you set it to -1 you have an infinite timeout, which would allow you to upload larger files.

Regards,

Daniel

Hi Daniel,

Yes, thank you, I just noticed that now, but didn't know about -1!

Thats great, problem solved!

Kind regards,

Stuart

Actually, I'm not sure that will do the trick, as the request will not get to the action in order to call SetRequestTimeout, because it is still uploading.

Although I did manage to find the ServerRequestTimeout. It appears when you drag a server action onto a client action. I'll let you know how it goes.

Hi Stuart,

Yes maybe for React it is different, I am not sure. It works for traditional web apps.

Regards,

Daniel

Hi Daniel,

Well you set me on the right path anyway, so thank you for that.

I have confirmed that for Reactive Web Apps increasing the Server Request Timeout on a server action within a client action will allow large files to upload. I changed it from the default 10 seconds, to 100 seconds.

I tried SetRequestTimeout within the action, but it timed out before it was called.

I would probably avoid using -1, and just set it to a value large enough to support the expected bandwidth and file size for the intended application (maybe make it a Site Property).

Hi Stuart,

Out of curiosity, where do you call the SetRequestTimeout?

Regards,

Daniel

Daniël Kuhlmann wrote:

Hi Stuart,

Out of curiosity, where do you call the SetRequestTimeout?

Regards,

Daniel

I called SetRequestTimeout at the start of the server action that was called from the client.


Ok, nice you got it working.

Yes, in the end it was just user error! ;P

Hi, Does anyone has solution for this upload timeout in react web? i tried SetRequestTimeout but it is not working.

Hi Wei,

The upload component does not appear to have any way to control the timeout. SetRequestTimeout does not work for uploads in Reactive Web Applications. If you want to upload binary content from the client to the server, the only option appears to be using a server action and modifying the Server Request Timeout parameter mentioned above.

The reason I was asking this question is I was updating the File Pond upload forge component to support Reactive Web Applications.  It will handle larger files, it is still limited, but it does extend the SetRequestTimeout to a longer value.  It is available now, feel free to give it a try: 

https://www.outsystems.com/forge/component-overview/7405/reactfilepondupload

I hope this helps.

Kind regards,

Stuart

Stuart Harris wrote:

Hi Wei,

The upload component does not appear to have any way to control the timeout. SetRequestTimeout does not work for uploads in Reactive Web Applications. If you want to upload binary content from the client to the server, the only option appears to be using a server action and modifying the Server Request Timeout parameter mentioned above.

The reason I was asking this question is I was updating the File Pond upload forge component to support Reactive Web Applications.  It will handle larger files, it is still limited, but it does extend the SetRequestTimeout to a longer value.  It is available now, feel free to give it a try: 

https://www.outsystems.com/forge/component-overview/7405/reactfilepondupload

I hope this helps.

Kind regards,

Stuart


Thanks. Appreciate it. It seems like this timeout issue not apply to Upload component only, as long as server process more than 10 min, then it will prompt the connection error, it gave me the same error when i use button trigger some functions, i have opened another post asking for it.

Stuart Harris wrote:

Hi Wei,

The upload component does not appear to have any way to control the timeout. SetRequestTimeout does not work for uploads in Reactive Web Applications. If you want to upload binary content from the client to the server, the only option appears to be using a server action and modifying the Server Request Timeout parameter mentioned above.

The reason I was asking this question is I was updating the File Pond upload forge component to support Reactive Web Applications.  It will handle larger files, it is still limited, but it does extend the SetRequestTimeout to a longer value.  It is available now, feel free to give it a try: 

https://www.outsystems.com/forge/component-overview/7405/reactfilepondupload

I hope this helps.

Kind regards,

Stuart

Hello Stuart

How exactly do I go about modifying the Server Request Timeout parameter?

Many thanks

Richard


Solution

Hi Richard,

The Server Request Timeout Parameter is available as a parameter on each server action when called from a client action.

You can also set the default value at the module level, but I would advise against setting a large timeout for every server action called in a module.

The example below sends a file to the server and extends the default timeout from 10 seconds to 5 hours (18000 seconds).


Solution

Hi,


I have a scenario where I am uploading an Excel file from Client using react web, then importing it. I am currently getting a Timeout as well. I added SetRequestTimeout with value -1 and this does not help.

The flow is as follows:

On the client the user selects the file with the upload widget, get the FileContent in a variable and then call the server action to read the excel file passing it the FileContent, on the server then traverse the records and import the data into the database.

I added the SetRequestTimeout in the Client action just before I call the server action that does the import (where I pass the FileContent), but it is not working and it times out before it enters the serever action, I suspect it is stuck in sending the excel file to the server because it has several pages and is 14901KB big.

Advise will be appreciated

Hi Elize,

Did you try setting it to like 600 seconds, or maybe even bigger? Also, you may need to clear the browser cache and cookies after making that change.

Hi Elize

Thanks for posting your question.

Unfortunately, SetRequestTimeout does not work for React Web Apps, only for Traditional Web Apps. Check out the solution above, but that won't help you for file uploads.

I'm not sure if the OutSystems UI file upload control will support extending the timeout in React Web Apps.

The reason I originally posted this message is I was building the ReactFilePondUpload plugin which uses an action with its timeout extended to perform file uploads.

Try the demo page to see if it works ok for you https://shkiandra.outsystemscloud.com/ReactFilePondUpload_Sample

Kind regards,

Stuart