HTML5 File Upload Manual

Prev Index Next

Advanced: Upload Images and Store their Names into aDatabase

In this tutorial we will show you how to how to upload images and store their names into a database, using HTML5 File Upload. 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 added a form, containing a file field and a text field. We'd like to store the uploaded file name and the text from the text field, into our database. We've also created a server action that uploads our files to a folder on the server. Check our previous tutorial, called "Upload Files to Your Server" in order to learn how to do this. So, now we need to add an insert record step, after the file upload. Right click the file upload step (1) in the action steps tree and select – add database insert (2).

2.We first need to setup a database connection, so click yes.

3.Create your database connection, or select it from the dropdown if you have already created it.

4.Then right click the database connection step (1) and select add database insert (2).

5.Add a name (1) for the database insert step, select your connection (2) from the dropdown and click the insert options button (3).

6.Select your database table (1), choose the table columns, where you want to insert the textfield text and file name into (2) and add them to the columns list (3).

7.First, select the database column (1) where you want to store the input text and click the server data bindings picker (2) for its value.

8.Under globals and post choose your textfield (1) and click – select button (2).

9.Then, select the database column where you want to store the image name (1) and select the server data bindings picker (2) for its value.

10.In the steps tree you see your file upload step. Select the name binding (1), located under it. This returns the name of the uploaded file. Then click the select button (2).

11.Click Ok, in order to apply these step properties.

12.And do not forget to save your server action steps.

13.Then, open the HTML5 Data Bindings panel (1), select server connect action executors (2) and click add new button (3).

14.Select your server action (1), bind your form (2) and add a name for this executor (3). Then, check the on submit option (4) and click OK (5).

15.Let's preview the results.

16.Enter a product name and select an image. As soon as you click the Add Product button, the image gets uploaded, and then the server connect runs the insert step, which inserts the data into your database. You can see the results on the right.

Prev Index Next