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.
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.
- 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.
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.
||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
||The maximum allowed file size in bytes. This option only has an effect for browsers supporting the File API.
||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.
||A comma-separated list of accepted file extensions. For example: doc, xls ,pdf.
||The event is automatically executed when one or more files have finished being uploaded.
||The upload action is triggered. Can be used in any event, but uploaded files information will only be available in the UploadComplete event.
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.
The Class can be edited on the Theme, as follows:
- 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.
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.
Consider the following model, where the ProductPhoto table stores several photos for each Product (both are Business Component - BCs).
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.
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.
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.
for &FileUploadData in &FileUploadDataColl
&ProductPhotoItem = new()
&ProductPhotoItem.ProductId = &ProductId
&ProductPhotoItem.ProductPhoto = &FileUploadData.File
&count += 1
msg(format(!"Data sucessfully added: File #%1",&count.Tostring()))
&ErrorMessage = &ProductPhotoItem.GetMessages().Item(1).Description
msg(format(!"There was an error uploading the images: %1",&ErrorMessage))
The ProductPhotoId is assigned by the following rule which is defined in the ProductPhoto Business Component.
At runtime, the form looks as follows:
Download sample from FileUpload UC sample