close ad
Install the LAtest Updates to Work with CC 2017 and CC 2018
open ad
View Menu

Web development tutorial

Add file fields to Data Bridge insert / update pages

Tutorial created by Team WebAssist

Categories: Data Bridge

rating

Data Bridge can build you forms that insert and update into a database. To turn any text fields on those forms into file upload fields, you can follow the steps in this tutorial.

arrow downWhat you need to start

  1. Dreamweaver CS3 or higher
  2. Data Bridge
  3. Site properly defined in Dreamweaver
You should have on your Insert and Update pages, a field that you want to replace with your Digital File Pro file field.

arrow downApplying to your Insert page

The following instructions guide you through adding Digital File Pro's Upload behavior to your Data Bridge Insert page.

Step 1: Creating the file field

Use the following instructions for creating this field for your Insert page.

  1. From the Dreamweaver Files panel, open your Data Bridge Insert page.
  2. Select the field you want to replace with a file upload field.
  3. From the Properties Inspector, select the ID for that form field.


  4. Press Ctrl (Cmd) C to copy the ID.
  5. Select the field on the page again.
  6. Press Delete on your keyboard to remove this field.
  7. Choose the File field option from Forms category of the Insert bar.


  8. Place your cursor in the ID field and press Ctrl (Cmd) V to paste.
  9. Leave the Label field blank.
  10. Click OK.

Step 2: Applying Digital File Pro

Next you will want to apply the Digital File Pro Upload behavior to your new file field.

  1. In Dreamweaver, open the Insert page.
  2. From the Insert menu, choose WebAssist > File Manipulation > Upload.
  3. From the File field option, choose the file field you just created.
  4. Click Next.
    You may want to specify other settings, but they are not necessary for this tutorial.

  5. On Step 2, specify the Upload directory you wish to store these images.
    You may also want to specify multiple output options. For example, if you want a detail image and a thumbnail image, Digital File Pro v2 can create this for you from just one upload.
  6. Click Finish to create the file upload behavior.

Step 3: Updating the Insert Record server behavior

We now need to update the Data Bridge Insert record server behavior to accommodate the file field.

  1. From the Server Behaviors panel, double-click on the Insert Record option.
  2. Click Next.
  3. Select the column you applied the file field to.
  4. Click the value lightning bolt.
  5. Expand the WA Upload File option for your column.
  6. Choose Server File Name.
  7. Click OK.
  8. Click Finish.

arrow downApplying to your Update page

With your Insert page complete, you now need to do the same with the Update page. The process is similar, but requires an additional step.

Step 1: Creating the file field

Use the following instructions for creating this field for your Update page.

  1. From the Dreamweaver Files panel, open your Data Bridge Update page.
  2. Select the field you want to replace with a file upload field.
  3. On your keyboard, press Ctrl (Cmd) T.
    This displays the Quick Tag Editor.
  4. Change <input type="text"> to <input type="hidden">.


    This is done to allow us to display the value for the form field that is currently entered into the database.

  5. Place your cursor beside the hidden form field icon.
  6. Choose the File field option from Forms category of the Insert bar.


  7. Place your cursor in the ID field and enter an id for this field.
  8. Leave the Label field blank
  9. Click OK.

Step 2: Applying Digital File Pro

Next you will want to apply the Digital File Pro Upload behavior to your new file field.

  1. In Dreamweaver, open the Insert page.
  2. Choose WebAssist >File Manipulation > Upload.
  3. From the File field option, choose the file field you just created.
  4. Click Next.
    You may want to specify other settings, but they are not necessary for this tutorial.

  5. On Step 2, specify the Upload directory you wish to store these images.
  6. Choose the Default file value lightning bolt.
  7. Expand the WADAUpdateForm option.
  8. Choose the form field you set to hidden earlier.
  9. Click OK.
    The remaining settings should be specified as they were with the Insert page.

  10. Click Finish to create the file upload behavior.

Step 3: Updating the Update Record server behavior

We now need to update the Data Bridge Update record server behavior to accommodate the file field.

  1. From the Server Behaviors panel, double-click on the Update Record option.
  2. Click Next.
  3. Select the column you applied the file field to.
  4. Click the value lightning bolt.
  5. Expand the WA Upload File option for your column.
  6. Choose Server File Name.
  7. Click OK.
  8. Click Finish.

arrow downDisplaying your upload images

With your file upload complete, you may want to customize the Data Bridge Detail and Results pages, to display the image uploaded.

The following instructions refer to an image upload application. However, if you are using Digital File Pro to upload files, simply follow these steps, but instead of creating an image, simply create a link (a href="") tag
  1. Open the Data Bridge page that you wish to display the image on.
  2. Place your cursor where the image should display.
  3. From the Insert menu, choose Image.
  4. Choose the Data sources option.
  5. Expand the Recordset used by your Data Bridge form.
  6. Select the database column which contains your image file names.
  7. Place your cursor at the beginning of the line of code, before the URL field.
  8. Enter the path to the directory on your server, where the images are stored.
    Make sure to include the ending "/".


  9. Click OK
You can also display these images on any non-Data Bridge created page by creating a new recordset for you database table, and then following the steps above

arrow downWhat to do next...

Nothing, because now you are finished. High five!

arrow downReviews and comments

Comments will be sent to the author of this tutorial and may not be answered immediately. For general help from WebAssist, please visit technical support.

Sign in to add comments
rating

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.