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.

images/dragdrop1.jpg

Next, click on the smart field to configure the Drag and Drop area properties and File upload properties for the control:

images/dragdrop2.jpg

When the UX component is run, the Drag&Drop control will be rendered as shown in the image below:

images/dragdrop5.jpg

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.

2019-12-11

See Also