File Upload User control

Official Content

File Upload is an HTML5 control whose purpose is to enable the user to upload multiple files to the web server's file system at the same time. Those files can be handled as needed afterwards.

The control is distributed with GeneXus and has the following characteristics:

  • The files to upload can be dragged to the form.
  • Each file can be uploaded independently from the rest, or all can be uploaded at once. The upload progress can be seen for all the files being uploaded.
  • It shows a preview of the image, audio or video file being uploaded (if the browser supports that format).
  • It's a control for Responsive Web Applications.
  • Runs in Chrome, Firefox, Safari and IE>=8

The control can be found in the Extended Controls section of the Toolbox, and should be dragged to the form. Only the Abstract layout supports this control.

i2016_03_15_20_02_581_png

When the control is dragged to the form, the FileUploadData SDT is imported to the KB. Its purpose is to get the file data that is going to be uploaded.

i2016_03_15_20_11_362

How to use the control

  1. At design time, you need to configure the Uploaded Files control property. It should be assigned to a variable based on the FileUploadData SDT collection data type.

i2016_03_15_20_09_271_png

       2. When the files are uploaded, you can get them using the variable associated with the Upload Files property. The files are uploaded to the server file system, to the location indicated on the Temp media directory property. Those files are deleted from the server on a basis established here. In Java, the files are deleted according to this document. Then, using the File data type is recommended to check for the existence of the file before using it.

Control Properties

AutoUpload By default, files added to the widget are uploaded when the user clicks on the start buttons. To enable automatic uploads, set this property to true
MaxFileSize The maximum allowed file size in bytes. This option only has an effect for browsers supporting the File API.
AcceptedFileType Indicates the type of files the control will accept. To specify a custom type list, select Custom and use the CustomFileTypes property to specify the accepted file types.
CustomFileTypes A comma-separated list of accepted file extensions. For example: doc, xls ,pdf.

Control Events

UploadComplete The event is automatically executed when one or more files have finished being uploaded.

Control Methods

StartUpload   The upload action is triggered. Can be used in any event, but uploaded files information will only be available in the UploadComplete event.

How to configure the appearance of the File Upload UC

Use the FileUpload Class of the Theme (or define one of its descendants).

The FileUpload class is assigned by default to the Class property of the UC.

i2016_03_15_21_22_257_png

The Class can be edited on the Theme, as follows:

i2016_03_15_21_21_346_png

  • Add File Button Class: Class used to style the "Add Files" button.
  • Start Button Class: Class used to style the "Start" buttons.
  • Cancel Button Class: Class used to style the "Cancel" buttons.
  • Buttons Bar Class: Class used to style the bar containing the buttons on top the files table.
  • Drop Zone Class: Class used to style the area where files are dropped.
  • Files Table Class: Class used to style the table where files are displayed.
  • File Preview Class: Class used to style the file preview.
  • File Name Class: Class used to style the file name text.
  • File Size Class: Class used to style the file size text.
  • Error Message Class: Class used to style the error messages of the control.

How to change the captions of the buttons

The captions of the buttons are GeneXus standard messages. If you want to change them, you have to access the language object and unmark the "Show only user messages" filter. The captions of the buttons of the FileUpload User Control have the GXM_fileupload prefix.

ChangeCaptionFileUploadUCButtons_png

Example

Consider the following model, where the ProductPhoto table stores several photos for each Product (both are Business Component - BCs).

i2016_03_15_21_00_183_png

Let's design a "ProductPanel" form that receives the &ProductId as a parameter. It loads the Product information and allows the user to make any changes to the product basic information (name or price) and upload photos related to this product. 

i2016_03_18_01_53_203_png

If the user wants to upload photos for that product, he/she is redirected to another web panel, where she can choose multiple files to upload at the same time. There, she can also remove the photos she doesn't want to have any longer.

Then, the resulting form looks as follows; note that the File Upload control has been dragged to the form and the "Uploaded Files" property has been assigned to the &FileUploadedDataColl variable. Also, note that the photos that have already been uploaded are going to be displayed using a grid.

i2016_03_18_01_51_131_png

Here we show the part of the code related to the saving process of the photos in the database. To see the entire example, download it from FileUpload UC sample.

Basically, the &FileUploadDataColl collection is scanned and the photo is saved to the database.

Event 'Confirm'

    for &FileUploadData in &FileUploadDataColl

        &ProductPhotoItem = new()
        &ProductPhotoItem.ProductId = &ProductId
        &ProductPhotoItem.ProductPhoto = &FileUploadData.File
        &ProductPhotoItem.Save()
        if &ProductPhotoItem.Success()
            commit
            &count += 1
            msg(format(!"Data sucessfully added: File #%1",&count.Tostring()))

        else
            &ErrorMessage = &ProductPhotoItem.GetMessages().Item(1).Description
            msg(format(!"There was an error uploading the images: %1",&ErrorMessage))
        endif

    endfor
    grid1.Refresh()
Endevent

The ProductPhotoId is assigned by the following rule which is defined in the ProductPhoto Business Component.

serial(productPhotoId,ProductPhotoLastId,1);

At runtime, the form looks as follows:

Runtime Upload sample1

Runtime Upload sample2

Download sample from FileUpload UC sample


 



Was this page helpful?
What Is This?
Your feedback about this content is important. Let us know what you think.