Uploadify User Control - Documentation for version 1.5 or lower

Unofficial Content

This document is part of the documentation of user control Uploadify

Control Description

Uploadify is a control that allows the integration of single (or multiple) file uploads on your website. It can be easily customized, for instance, maximum file size for each upload and file-type you would like to allow for upload can be configured in the control's properties. Is based on Uploadify project which is one of the most used upload control in web applications.

The control saves the uploaded file in the folder defined as "temporal media directory" in GeneXus (PrivateTempStorage) like the Blob data type and it also uses a temporal name (to avoid overlap).

Features

  • Multiple file selection
    The property "Multi" indicates if you want to allow the multiple selection (False by default), in the image you can see the multiple selection in action.

    Uploadify Multiple Selection

  • File-type filtering
    The properties "FileDescription" and "FileExtension" indicate if you want to filter by a especific file type, for example, Excel document, images, etc.

    Uploadiy File-type selection

    In this example the property "FileDescription" has the "Images" value and the property "FileExtension" has "*.jpg" (it also supports a collection of types, example: *.jpg;*.png;*.jpeg;*.gif;*.bmp).

  • Client side file-size limitation
    The property "SizeLimit" sets the maximun file size (in kbytes), this validation is performed in client side!!!

    Uploadify Size checker

    In this example I set the value "512" in the "SizeLimit" property.

  • Button Image and text changeable
    The properties "ButtonImage" and "ButtonText" allow you to modify the Button image and the caption of the button.

To Install It

Install the control into GeneXus IDE: Default Installation Instructions for User Controls.
Then, you have to do
some minimals changes according to the chosen platform:

  • .NET
    1) Copy "Newtonsoft.Json.Net20.dll" and "Upload.dll" from folder "Additional files\Net" to ...\web\bin folder.
    2) The control property value "UploadScript" needs to be "upload.aspx".
     
  • Java
    1) Copy  "upload.class" from the folder  "Additional files\Java" to the "Servlet directory" folder  (Example:  C:\Program Files\Apache Software Foundation\Tomcat 6.0\webapps\<webappname>\WEB-INF\classes)
    2) Copy "commons-fileupload-1.2.1.jar", "commons-io-1.4.jar" and "JsonJava.jar" from folder  "Additional files\Java" to the "lib" folder (one level down from the "classes" folder used in the first step).
    3) The control property value "UploadScript" needs to be "../servlet/upload"
     

Note:  The KB SHOULD NOT have an object named "upload".

How To Use ?

Example 1 - My first upload

Steps:

1) Drag the control to the form.

2) In the events tab a snippet with an example will be created:

/*
Event Uploadify1.OnComplete
    msg(Uploadify1.UploadedFileName)
    msg("Files uploaded:" + &UploadedFiles.Count.ToString())
EndEvent
*/

3) Uncomment this code and it is ready to test.

Each time you perform a successful upload the "OnComplete" event will be triggered.
In the &UploadedFile variable you will have the information of each uploaded file, if you uploaded only one file there will be only one record.
Each item in the collection (file upload) will have the original name and full path of the temporary file created on the server. (if &UploadedFile is the item, &UploadedFile.OriginalFileName and &UploadedFile.TemporalFileName are the original file name and the temporal full path).

Example 2 - Insert into the database

If you want to insert this file into the database, you just need to assign the temporal full path to a blob variable, por example:

// &blob is a blob type variable, &UploadedFile UploadifyOutput variable, and &UploadedFiles is UploadifyOutput collection type
for &UploadedFile in &UploadedFiles    
    &blob = &UploadedFile.TemporalFileName
    // now, you have the &blob variable loaded and ready to use, for example, calling a procedure that inserts this blob into the database (new command or Business Component)
endfor

Example 3 - Move uploaded file to another folder on the server

You can use File Data Type, for example, if you have a &file variable (File Data Type) you can do:

&File.Source = &UploadedFile.TemporalFileName
&File.Copy(&NewPath)

Example 4 - Change Button image

You can change the button image like GeneXus Marketplace "upload product" page.

Uploadify Change Button Image

In the Start Event:

UploadifyControl.ButtonImage = MyImage.Link()

Where: "UploadifyControl" is the Uploadify controlName and "MyImage" is a GeneXus Image (in this case multi-language)

Example 5 - Change properties in runtime

You can change some properties in runtime (e.g.: the button text).
To be done the change, you must execute the refresh method.

Event 'Change'

Uploadify1.SizeLimit = &sizeLimit

Uploadify1.ButtonImage = NewImage.Link()

Uploadify1.Refresh()

EndEvent

Troubleshooting

  • I can't upload files larger than 4 MB (.NET)
    Try to set a higher "maximum request size" value in web.config file.
    The maximum request size in kilobytes. The default size is 4096 KB (4 MB).
    Example: 
    <system.web>
        <httpRuntime executionTimeout="600" maxRequestLength="20120"/>
  • Upload error in Java using Tomcat 7.0 with  “Use annotations for servlet definition”
    Edit the web.xml file in the webapp and add:
    <servlet>
                <servlet-name>upload</servlet-name>
                <servlet-class>upload</servlet-class>
    </servlet>
    <servlet-mapping>
                <servlet-name>upload</servlet-name>
                <url-pattern>/servlet/upload</url-pattern>
    </servlet-mapping>

 

Please send feedback by GeneXus Marketplace