Drag and Drop File Upload Control
Description
The Drag and Drop File Upload Control (Drag and Drop Control) adds the ability to upload files by dragging and dropping files from the filesystem onto a designated location in your app. When the files are dropped, Alpha Anywhere uploads the files to the the specified location -- either Amazon S3 or the Alpha Anywhere Application Server.
In addition to drag and drop, this control also supports tapping or clicking the drag and drop area to open a File picker to select files from the device for upload. See Click on Drag and Drop area to select files below for more details.
Adding the Drag and Drop File Upload Control
To add drag and drop file upload to a component, add a Drag&DropArea control to your UX component.
Next, click on the smart field to configure the Drag and Drop area properties and File upload properties for the control:
When the UX component is run, the Drag&Drop control will be rendered as shown in the image below:
You can control various aspects of the appearance and behavior of the Drag and Drop control. For example:
- The text that appears in the area
- The vertical and horizontal alignment of the text
- The size of the area
- The style of the area
- Whether clicking on the area (as opposed to dropping files into the area) opens the file picker
Configuring the Drag and Drop Area
The drag and drop area is the area where uses can drop files for upload. You can customize the look and feel of the drag and drop area with the Drag and Drop area properites. These properties include:
Text to display
The text shown in the drag and drop area where files can be dropped. This text should suggest what the user should do.
Default message is "Drag one or more files here to upload."
Text position - vertical
The veritcal position of the text shown in the drag and drop area. The message can be positioned Top, Center, or Bottom.
Default value is Center.
Text position - horizontal
The horizontal position of the text shown in the drag and drop area. The message can be positioned Left, Center, or Right.
Default value is Center.
Style
Inline CSS styling applied to the drag and drop area. The CSS specified here will override any style information definined in classes assigned to this control.
Default style is:
border: solid 1px #c1c1c5; border-radius: 10px;
Class name
One or more CSS classes containing styling information for the drag and drop area.
Default value is blank.
Click on Drag and Drop area to select files
If checked, the user can click on the drag and drop area to open a file picker to select one or more files to upload in addition to dragging and dropping files on the control.
By default, this property is unchecked.
Defining the File Upload Properties
The File upload properties specify where files will be stored when they are uploaded. Files can be stored on the Alpha Anywhere Application Server or Amazon S3.
File Upload settings are identical to those specified in the File Upload - Amazon S3 Storage or Alpha Anywhere Action Javascript action. See File Upload - Amazon S3 Storage or Alpha Anywhere for more information about specific upload properties.
Drag and Drop Control Properties
The Drag and Drop control has the following properties:
Control Id
The Drag and Drop control's Id. This id can be used with the {dialog.object}.getPointer() method to get a pointer to the HTML DOM Element for the Drag and Drop control.
Drag and Drop area properties
Settings for configuring the look and feel of the drag and drop area. See Configuring the Drag and Drop Area above for more information.
File upload properties
File upload properties property. See File Upload - Amazon S3 Storage or Alpha Anywhere for more information.
Width
Specify the control width. Use CSS syntax for the width (e.g. 100px, 100%, etc.)
Height
Specify the control height. Use CSS syntax (but not %) for the width (e.g. 100px, etc.). TIP: It is generally not necessary to set the height of a ControlBar as it is computed automatically.
Break
Force a column break before, after, or both before and after this control.
Break height
Specify the vertical distance between this control and the next control. Use CSS syntax. e.g. 10px, .5in, 20pt.
Horizontal spacer
Specify the horizontal space between this control and the next control. Use CSS syntax. e.g. 10px, .5in, 20pt.
Horizontal spacer
Specify the horizontal space between this control and the next control. Use CSS syntax. e.g. 10px, .5in, 20pt.
Control container class name
Controls in a UX Component are wrapped in a DIV with the class 'A5CWLayout' or 'A5container', unless the has been placed in a 'NoFloat' or 'Alignment' container. The Control container class name allows you to add one or more additional CSS classes to the DIV for the Drag and Drop control.
Control container prevent float
The class applied to the DIV wrapped around the Drag and Drop control applies a 'float' to the control so that controls render automatically from left to right until a control with a 'break after' is encountered. The class used to apply the float includes a fixed width padding. If you do not want the padding or float behavior applied to the Drag and Drop control, check the Control container prevent flaot property to prevent the class (either 'A5CWLayout' or 'A5container') from being assigned to the DIV wrapper for this control.
Methods
The Drag and Drop control has no methods or properties. It is not a data control, so UX methods such as {dialog.object}.getValue() and {dialog.object}.setValue() cannot be used with the control.
You can get a pointer to the HTML DOM element for the Drag and Drop control area using the {dialog.object}.getPointer() method:
// Get a pointer to the Drag and Drop control's HTML Element:
var ele = {dialog.object}.getPointer('DRAGDROPFILEUPLOAD_1');
if (ele) {
// ...
}Videos
File Upload using Drag and Drop
You can upload files to either Amazon S3 or to your Alpha Anywhere server by dragging and dropping files onto a 'drag drop area' on your UX component.
This video shows how to configure drag and drop file upload.
See Also