Upload image

To create a form for uploading images, follow these steps:

1. Open the \admin\upload_img page.

2. Use the Insert Record Form Wizard to create an insert form for uploading images. You can access the wizard from the Insert bar -> MX Kollection -> Insert Record Form Wizard. Configure the dialog box as indicated below.

3. In the first step of the wizard, specify the following:
   ·  the defined database A database refers to data organized and stored on a computer that can be searched and retrieved by a computer program. Most industrial-strength and many smaller database applications can be addressed using SQL (Structured Query Language). Connection;
   ·  In the Insert into table select the table that stores image data - image_img;
   ·  the Primary key column;
   ·  the page to redirect to (list_img) after uploading an image.
   
   
    

4. Click Next to proceed to the second step, where you will configure the individual form fields:
   ·  Remove the foreign key A foreign key is a field from a database table that refers to (or targets) a specific key, usually the primary key, in another table. This is a convenient way of logically linking information from related tables in the same database. For instance, a table that stores information about products can contain a foreign key that references the primary key field in a table that stores manufacturers. This way, each product has an associated manufacturer – its associated foreign key points to the unique identifier of the manufacturer. Please note that the foreign key is not unique, but the referenced field (the primary key in the referenced table) usually is.field (idalb_img) as you will not need it for the moment.
   ·  Change the filename_img field to a file field from the Display as drop-down menu. Also change its Label to "File".
   ·  Change the description_img field to a text area from the corresponding Display as drop-down menu.
   ·  Change the date_img field to be displayed as text and set its default value to {NOW_DT}. This uses the InterAKT's mark-up language to set the field's value to the current date and time. This way, you won't have to set up a value for this field. The current date and time will be recorded in the database each time an image is uploaded. After completing the wizard, you must remove the row which displays the date (using the text element instead of a hidden field is more safe).
   
   Note: If you are using a Microsoft Access database, in the Submit as drop-down menu, another option will be available: Date MS Access. Select this option when submitting the date.
   
   
              

5. In the final step of the wizard, make the filename_img field required, then click Finish.
   
   Note: If you do not have MX Form Validation or the MX Kollection 3 bundle installed, step 3 of the Insert Record Form Wizard will not be available.
   
   
        

6. Remove the date text field from the form on page.

7. Apply the Upload and Resize Image server behavior A server behavior is a reusable component for server-side development. They add blocks of code to your pages for accomplishing specific tasks. Dreamweaver comes with several default server behaviors and the InterAKT extensions add many more to this list. to the generated form from the Application panel -> Server Behaviors -> + -> MX Kollection -> File Upload -> Upload and Resize Image.

8. Configure the Basic tab of the server behavior as follows:
   ·  Select the Form field used for uploading pictures: filename_img from form1.
   ·  Select the Table column that stores the name of the image: filename_img.
   ·  Use the Browse button to select the folder where images will be uploaded: images.
   ·  Resize all images to fit within a 800 pixels by 600 pixels box.
   ·  Move on to configuring the next tab.
   
   
    

9. Configure the File tab of the server behavior as follows:
   ·  Set the Maximum file size to 200 KB. Users will not be able to upload images larger than that.
   ·  Specify the image extensions allowed for uploading. Use the Plus (+) button to add new extensions and the Minus (-) button to remove extensions. To add a file extension, just enter the extension name in the displayed pop-up window.
   
   
   
   ·  Sometimes the uploaded file has the same name as another file on the server. For such cases, use the options in the File Renaming drop-down menu. Use the Automatic renaming option to give the current file a new name. For instance, if you attempt to upload a file called landscape.jpg and there is already another file with the same name on the server, the new file will be renamed landscape_1.jpg.
   
   
   
    

10. Click OK to confirm your settings.

Now you can preview the page in the browser, and see how it works:

If you try to upload an image larger than 200 KB, the following error is displayed.

After the image upload is completed, you will be redirected to the page specified when you configured the first step of the Insert Record Form Wizard.

You have created the page for uploading images to your gallery. In the next topic you will create a list of all your images.