HTML5 File Upload Manual

Prev Index Next

Advanced: Use HTML5 File Upload with Update Record Server Action

In this tutorial we will show you how to use HTML5 File Upload with Update Record Server Action. In order to do that you'll also need HTML5 Data Bindings, DMXzone Database Updater PHP/ASP and DMXzone Database Connector PHP/ASP extensions.

*You can also check out the video.

How to do it

1.We've already created an update record server action and a simple form that submits text through a text input. You can see how to do this in our video tutorial called: Update your database records. Now we want to add a file field in our form, in order to be able to update also the files on our server and their names in our database. Click inside the form (1) on the page and add a file field (2).

2.Let's change the default file field name to userImage.

3.Save your page, select globals (1) and then click the synchronize button (2).

4.Now, the new file field is also inside the global variables list. Right click the database connection step (1) and add file upload (2).

5.Add a name for it (1) and select your file upload field (2).

6.Expand the global variables (1) and select the file field (2). When you're done, click the select button (3).

7.Set your upload path (1) and right click the file upload action step (2).

8.Add a condition. We need to add a condition that checks if the file field is empty, when we are updating the record. If it is empty - we do not want to insert empty value for the file name in the database but we just want to keep the existing one.

9.Click the server data bindings picker (1), in order to setup the condition. Select the error binding (2), located under the file upload step. With this expression we can check if the file field is empty when submitting the form. We just need to look if there is an error with number 4 returned. So we just add equals 4 in the expression field (3). If the server returns an error and if it equals 4, then the file field was submitted empty. When you're done, click the select button (4).

10.If this condition is true or if the file field was submitted empty we do not want to send its value to the database. So then we just need to run the standard update record step. This is the step that we've created previously, and it only inserts the text fields values into the database. Grab this step (1) and drag it in the steps list, under the then statement (2).

11.Now, right click the steps (1) under the else statement and add a database update (2).

2.This update record step will be run, when there is a file in the file field. So we will update the file name into the database. Add a name for it (1) and choose your connection from the dropdown (2). Finally, setup the update record options (3).

13.Select your database table (1), the columns (2) that you want to update and add (3) them to the columns list.

14.Select the column, where the text field content will be saved (1) and set its value (2).

15.Select your text field, under the post variables list (1) and click the select button (2).

16.Now click the database table column (1) that stores the uploaded files names and set value to it (2).

17.Select the name binding, under file upload (1) and click the select button (2).

18.In the filters tab (1), add the ID column (2) and assign the form hidden field value to it - as explained in the update record tutorial. Click the OK button when you're done.

19.Don't forget to save your server action steps.

20.Our server action executor does not need any changes, so let's just preview the results.

21.Select a record to update. If you do not select an image, then only the text field value will be updated.  Then, select another record to update. Select a new image and enter something in the text field. You see that both get updated, when you hit the update record button.

Prev Index Next