Tutorial - File Upload to Database

In this tutorial we will show you how to setup File/Image Upload in DB AppMaker. We will use the demo database for demonstration.

Fields in Table "cars":

We want to setup the "Picture" field in the "cars" table for image upload to database.

Note You must choose a field of binary type.

Steps to Setup File/Image Uploading

1. Open DB AppMaker

Open DB AppMaker and connect to the demo database.

2. Set up file upload properties

Go to the Config -> General tab.

Specify the Upload folder relative to the API folder. Do NOT leave it empty. For example, you can enter "uploads/" (use slashes "/" as path delimiter). If the API folder is D:\demo\api\, then the upload folder is D:\demo\api\uploads\. The upload folder is required for storing temporary files.

Make sure that the web server user has read/write access to the folder.

If you want to change the file size limit on uploading, enter a limit in bytes for the Max file size field. The installation default is 2,000,000 bytes.

Note Configurations of PHP, web server and database affects max file size also, read Config Settings.

In Allowed file type, enter the file extensions that you allow user to upload.

Note The Max file size (bytes), Allowed file type and Upload Folder here are global settings for all fle upload fields, you can also enter field specific settings in the Edit Tag panel (see below).

3. Set up Edit Tag settings

Select the "cars" Table on Database pane and then click on the "Picture" field.

In the Edit Tag panel, the Edit Tag should be already set to "File", you may set the field-specific Max file size (bytes) and Allowed file type.

4. Set up View Tag settings

In the View Tag panel, You can choose to display the file using the Formatted Text View Tag or Image View Tag.

Formatted Text View Tag will display the field as a hyperlink to the file.

Image View tag will display the file as image (or video/audio).

To change image display style to Image, simply click on the Image icon in the View Tag Panel for the settings.

If you want to add hyperlink to the image, set the Href field. If you want to image linked to itself, select the field itself as the Href field. If you want to image linked to other URL, select another field which stores the URL. You can also optionally set the target of the hyperlink.

5. Generate scripts

Click the Generate button to generate scripts.

6. Run the application

Run the app with ionic serve. Click on the link to the Cars table. You should now be able to add, view, edit and delete records with file fields.

Formatted Text View Tag will display the field as a hyperlink to the file:

Image View tag will display the field as image:

The Add/Edit page will allow you to delete or upload another file:

Also See

Tutorial - File Upload to Folder