HTML5 File Upload Manual

Prev Index Next

Advanced: Show a Loader during the Upload

In this tutorial we will show you how to display a loader or a message, during the file upload, using HTML5 File Upload.

*You can also check out the video.

How to do it

1. We created a file upload page. We also created a file upload server action and server action executor, using DMXzone Server Connect. We also added a div container with animated background, which contains an uploading message. We want to show this div only during the file upload. Select the container (1) that you want to show, during the upload. And expand the server action executor (2) in the HTML5 Data Bindings tree.
   
   

2. Select the uploading binding (1), select div.data.show (2) and click the bind button (3).

3. And you are done. Let's preview the results!

4. Now, as we have our file field inserted, we need to add the submit button. From the insert menu (1) add a submit button (2).

5. As we've already set up our form properly, let's add the file upload functionality to it. First, create a new server action (1) inside the DMXzone Server Connect panel and add a name for it (2).

6. Then expand globals (1) and sync your page form fields. Browse to your page (2), select it (3) and click the OK button (4).

Prev Index Next