Tutorial - File Upload to Folder

In this tutorial we will show you how to setup file upload to folder in DB AppMaker. We will use the demo database for demonstration.

Fields in Table "cars":

We want to setup the "PictureName" field in the "cars" table for image upload to folder. Note that unlike in the tutorial File Upload to Database in which we used a binary field ("Picture") to store data in database, this time we choose "PictureName" which is a text field only. It is because this field will be used for storing the filename, the uploaded file will be stored in the upload folder as a physical file.

Note You must choose a field of string 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\.

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 (bytes) 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 "PictureName" field.

In the Edit Tag Panel, set the Edit Tag as "File":

If you want to allow multiple file upload, enable Multiple. If enabled, the field value will store comma separated file names of the uploaded files.

If you have field specific settings for Upload folder, Allowed file types, Max file size (bytes) and Max number of files, enter them as needed. See Field Settings for detail.

4. Set up View Tag settings

You can choose to display the file/image field using the Formatted Text View Tag or Image View Tag. Default is Formatted Text.

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

Image View tag will display the field as image and is also hyperlinked to the image. To change image display style to Image, 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 the image linked to the file, 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/image fields.

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

Image View tag will display the field as image:

The edit page will allow you to delete or replace an existing file/image:

Note If you upload files to folder and the destination file already exists, the file name will be changed automatically. By default an index in the format of "(n)" will be appended to the end of the file name where n is an integer.

Also See

File Upload to Database