close ad
 
Important WebAssist Announcement
open ad
View Menu

Web development tutorial

Apply file upload or download

Tutorial created by Ray Borduin, WebAssist

Categories: Data Bridge

rating

Universal Email 4 has all the file manipulation functionality previously included in Digital File Pro. This functionality allows you to apply file upload behaviors, file download behaviors, and the ability to delete or rename files from your server. It is now included in the Data Bridge bundle.

This tutorial runs you through using the File Upload and File Download functionality found in Universal Email.

arrow downWhat you need to start:

  1. Dreamweaver CS3 or later
  2. Universal Email 4
  3. PHP page
  4. Database connection (required for counter in digital download section)

arrow downCreating a Digital File Upload

Universal Email's File Upload behavior is the most common of the File Manipulation features found in this extension. Here you can specify upload restrictions, determine where the file is stored, and what file types can be uploaded.

Step 1: Create the File field

Your PHP page must have a file field to allow the user to browse for a file to be uploaded. Follow these steps to add a form field to your page, or use CSS Form Builder to create a form that contains a file field prior to continuing with this tutorial.

  1. With your dynamic page already open, choose the File field option from Forms category of the Insert bar.
  2. In the ID field enter 'upload'.
  3. In the Label field enter 'Upload File'.
  4. These are recommended IDs and Labels, feel free to specify something different.
  5. Click OK.
  6. If your cursor was not already within a form tag, you will be asked to create one. Click Yes in this case.
  7. Place your cursor below the File field to create a Submit button.
    You can create as many form fields as you like. Here we will just cover the single Upload field.

  8. From the Insert menu, choose Form > Button.
  9. In the ID field enter 'submit'.
  10. Leave the Label field blank.
  11. Click OK.
  12. Press Ctrl (Cmd) S to save your page.

arrow downCreating the Upload behavior

Once you have created a file field on your PHP page, you can apply the Upload behavior.

  1. From the Insert menu choose WebAssist > File Manipulation > Upload.
  2. From the Trigger menu, choose Button: Submit pressed.
  3. From the File Field menu, choose the File field, upload, that we just created.
    Many of the options available in the wizard can be configured dynamically. Look for the lightning bolt if wish to dynamically configure an option.

  4. If you wish to only allow images to be uploaded, choose the Web images only checkbox.
    This will enable a number of image resize options in Step 2 of the wizard.
  5. If Web images only is selected, choose a file format that you wish to convert all images. If you choose JPEG or PNG, set the desired level of quality or compression, respectively, from the adjacent list.
    If you do not wish to convert the image format, choose Keep existing format.
  6. From the Action menu, choose what you wish to be done to a file if a file with the same filename is already on the server.
  7. If a Rename option is selected in the Action menu, choose how you wish to rename the file.
  8. By default, the name will be appended with a number.
  9. Click Next to proceed to Step 2.

Step 1: Using the File Settings Window

The File settings window allows you to specify multiple output options for the file that is being uploaded. By default, only one file is saved.

  1. To add an additional file to be outputted, choose the Add ( + ) icon.
  2. Select the new file entry in the File Settings window, to specify settings for that file.
  1. In the Upload folder field, enter the relative path to the folder you wish the file to be uploaded to.
  2. In the File field, enter the filename you wish this file to have. Use '[FileName]' if you want to keep the original name.
  3. If necessary, in the Default file field, enter a file to be used as placeholder for this image.

Step 2: Customizing Image options

The Image options settings will be available if Web images only was selected in Step 1 of the wizard.

  1. From the Resize menu, choose the resize option (if any) that you wish to apply to this image.
    By default, if you have selected to add a second item to the File Settings window, this option will automatically have been configured for a the creation of a thumbnail image. These settings are simply recommended for easy implementation, feel free to change them at any time. You can specify these default values by choosing Edit > WebAssist Preferences and selecting the Digital File Pro category.

  2. Specify a width and height for your settings Depending on your selection from the Resize menu, these options may not be available.
  3. Choose a fill color from the Fill color menu.
    This option is only available when the Fixed width and height option is selected in the Resize menu.
  4. Click Finish to apply this behavior to your page.
    Remember, if your form action="", then your form is submitting to its own page. In this case, when you preview your page in a browser, upload a file and click submit, the page will just reload and the browser will display a message that no file is selected. You can test that your upload is working by looking inside of the folder you specified in the upload server behavior.

Step 3: Add a progress bar

Universal Email 4 includes the ability to add a progress bar that will display while an upload is in progress. For instructions on adding a progress bar to your form, check out the Add a Progress Bar tutorial.

arrow downCreating a Digital Download

The File Manipulation features include the ability to add secure download features to your site as well. If you are selling digital goods, or want to restrict access to downloading certain files on your web site, this can be very useful.

There are a number of practical uses for this capability, and each varies based on your needs.

The following details the basic steps for applying the download server behavior to a button.

Step 1: Create the Download button

  1. Place your cursor on your dynamic page, where you want to add the download button.
  2. From the Forms category of the Insert bar, choose Button.
  3. In the ID field, enter download.
  4. Leave the Label field blank.
  5. Click OK.
  6. Click once to select your new button.
  7. In the Properties Inspector enter Download in the Value field.

Step 2: Create the Download behavior

  1. From the Insert menu, choose WebAssist > File Manipulation > Download.
  2. From the Trigger menu, choose Button: download pressed.
  3. In the Folder field, specify the directory that stores the file that is to be downloaded.
  4. From the File name menu, enter the name of the file to be downloaded.
  5. In the Save as field, enter the file name you wish the downloaded file to have.
    With this feature, you can have a complicated file name that conforms to your file storage requirements, but can choose a friendlier file name for the customer who downloads the file.
    In the Download counter section, you can specify details for tracking how many times an individual file has been downloaded. You may find this useful for tracking purposes, but also if you have restrictions on how many times an individual can download a particular file.
    In order to use this feature, you must already have created a connection to a database that contains a column for storing the download count.

  6. From the Connection menu, choose the database connection you wish to use.
  7. From the Table menu, choose the database table to be used.
  8. From the Key column menu, select the key column for the table you selected.
  9. From the Key column value menu, choose the value in the key column that applies to the file that is being downloaded.
    In most cases, you first want to have a database table for your Items (or downloads) where there would be an entry for this particular item. This would also allow you to create more advanced dynamic options for your download
  10. From the Count column menu, choose the database column you wish to use to store the count value.
  11. When you are ready, click OK.
  12. Press Ctrl (Cmd) S to save your page.
  13. Press F12 to preview and test your download.
  14. Click the download button to download the file, and check your database to see if the download was recorded.

arrow downWhat to do next

If you want to customize success and error messages, view this tutorial.

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
rating

arpub2306699: 10 Years, 3 Months, 1 Week, 46 Minutes ago

I need to upload files other than images.Like PDFs, zip mp3s

wyncole: 9 Years, 8 Months, 1 Week, 17 Hours, 38 Minutes ago

Can you upload images taken with a smart phone?

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.