Python flask heroku - Image Upload Field (WTForms) makes APP timeout (takes too long)

Question

I have currently an app deployed on heroku.

It is live since 1 day and I noticed in the logs that users get often an H13 or H28 error on a certain site.

I already found the problem. On this site users are able to upload images (max. 10). I use there 1 Input Field for images where I allow multiselect, so the only way to upload multiple images is doing it at once.

WTForms:

bild = FileField("Weitere Bilder hochladen", validators=[FileAllowed(['jpg', 'png', 'jpeg'], 'Nur Bilder im Formal JPG oder PNG')])

Heroku has a default timeout of 30 seconds if the request is not processed. But the process to upload multiple images is too long and therefore heroku interrupts the process and shows the custom error page.

My Idea:

To solve this I would disable the multiselect and add 9 additonal FileFields in WTForms, so the user has to upload the images one by one, is this the way to go?

Or shall I add a progress bar and increase the timeout, what is the best practise here?

EDIT

Okay I found some solutions, but I would like to use the progress bar and increase the request timeout from heroku.

I will try to upload a new procfile:

web: gunicorn main:app --timeout 120

Answer 1

Okay I managed to solve this issue, but I made it fast and not very efficient.

The best solution seems to be here: Heroku`s solution

I solved it with an increased timeout for my app. Therefore I uploaded the new procfile to my heroku app:

web: gunicorn main:app --timeout 120

After that I implement a loading animation to my submit button of the form which makes the long request. The part I added is in span tag:

<button type="submit" class="btn add-btn"> <span class="ani-holder"><span class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span></span> Zimmer einstellen </button>

Initialy I make the animation to be display: none;. If the button is clicked, the form will submit. Here I use jQuery to change the display of the loading animation to display: inherit; and to make it look better I also change the background color of the button:

$('#regi').submit(function(){
    $('.ani-holder').css("display", "inherit");
    $('.add-room-container .add-btn').css("background-color", "#afddfe");           
});

The function is executed while the form submits the request. After that I redirect url and reload the page, so thats it. If the request is fast, then you wont see anything.