cpr.controls.FileUpload
FileUpload
A control that allows you to upload multiple files simultaneously.
Index
Event |
Description |
add-before-file |
Event that occurs before adding a file. |
add-file |
Event that occurs after all files have been added. |
addbutton-click |
An event that occurs when the button to add a file is clicked. |
animationend |
Event that occurs after the animation ends. |
animationstart |
Event that occurs at the start of the animation. |
before-context-value-change |
Use a bind context in a control that has a bind context
An event that occurs before the value changes. |
before-selection-change |
Event that occurs before the selection is changed. |
context-value-change |
Use a bind context in a control that has a bind context
An event that occurs after the value changes. |
contextmenu |
When the right mouse button is clicked or the context menu key is pressed,
Event called. |
dispose |
The event that is called when the control is dispose. |
download-click |
Event that occurs when the download button is clicked. |
extension-violate |
An event that occurs when adding a file and the type of file extension and the previously registered extension are different. |
item-click |
An event that occurs when an item is clicked. |
maxcount-exceed |
Event that occurs when adding files and the number of files reaches the maximum. |
maxsize-exceed |
An event that occurs when a file is added and the file size reaches the maximum. |
measure-size |
Event raised when calculating control size |
openfile-dblclick |
An event that opens a file when double-clicking an empty area of the list. |
remove-before-file |
An event that occurs before deleting a file. |
remove-file |
Event that occurs after all files have been deleted. |
removebutton-click |
An event that occurs when the button to delete a file is clicked. |
selection-change |
Event that fires after the selection is changed. |
sendbutton-click |
An event that occurs when you click the button to transfer a file. |
transitionend |
Event that fires after CSS property transition ends. |
transitionstart |
Event that fires when CSS property transition starts. |
Name |
Type |
Description |
accessbility |
Accessbility |
Gets the accessibility-related ARIA properties or gets the context in which they can be specified. |
addLabel |
String |
Get the text of the add button. |
buttons |
FileUploadButtonType[] |
Gets a list of the button's names. |
disposed |
Boolean |
Returns whether the control should be removed. |
droppableFile |
Boolean |
Returns whether the drop functionality provided to the control is enabled. |
editable |
Boolean |
Returns whether the value can be changed by user action. |
emptyMessage |
String |
Get the message displayed when the file list is empty. |
enabled |
Boolean |
Returns whether the control is enabled. |
extensions |
String |
Returns a list of extension names of files that can be uploaded. |
fieldLabel |
String |
Returns the logical field name of the control. |
fileLabel |
String |
Get the file name text value of the header. |
focusable |
Boolean |
Returns whether the control is focusable. |
focused |
Boolean |
Returns whether the control has focus. |
footerVisible |
Boolean |
Returns the visibility of the fileCount, fileSize, and buttons area at the bottom. |
headerVisible |
Boolean |
Returns whether the top checkbox, fileLabel, and sizeLabel areas are visible. |
hideSendButton |
Boolean |
Set whether to hide the transfer button. |
id |
String |
Returns the ID of the control. |
limitFileSize |
String |
Returns the maximum data size of files that can be uploaded. |
limitFileSizeUnit |
String |
Returns the unit to limit the maximum size of files that can be selected. |
limitSizePerFile |
String |
Returns the maximum data size per file that can be uploaded. |
limitSizePerFileUnit |
String |
Returns the unit to limit the maximum size of individual files that can be selected. |
maxFileCount |
Number |
Returns the maximum number of files that can be uploaded. |
name |
String |
Returns the name of the control. |
readOnly |
Boolean |
Returns whether a non-modifiable read-only mode is in effect. |
removeLabel |
String |
Get the text of the delete button. |
sendLabel |
String |
Get the text of the send button. |
sizeLabel |
String |
Get the size name text value of the header. |
statusMessageExp |
#expression |
Returns an expression for the text displayed in the fileCount, fileSize areas at the bottom. |
style |
FileUpload$Styler |
Returns the style settings of the control. |
tabIndex |
Number |
Returns the control focus order using the Tab Key. |
tooltip |
String |
Returns a description of the control |
totalFileCount |
Number |
Returns the total number of files added to the file upload. |
totalFileSize |
Number |
Returns the total size of files added to the file upload. |
totalFileSizeUnit |
"GB" | "KB" | "MB" | "byte" |
Returns the size unit of the file added to the file upload. |
type |
ControlType |
Returns the signature string of the Control's unique Type that can distinguish the Control. |
uuid |
String |
Returns the unique ID of the control. |
visible |
Boolean |
Returns the style property for controlling css visibility. |
Constructor
Create a file upload.
name |
type |
description |
idoptional
|
String |
id of file upload |
Events
CItemEvent Event that occurs before adding a file. Calling preventDefault() will not add the file.
files: {File[]} Files to be added
CItemEvent Event that occurs after all files have been added.
files: {File[]} added files
CMouseEvent An event that occurs when the button to add a file is clicked.
CValueChangeEvent Use a bind context in a control that has a bind context
An event that occurs before the value changes.
CSelectionEvent Event that occurs before the selection is changed.
Selection-change occurs as the following event.
oldSelection: {File[]} Previously selected files
newSelection: {File[]} Files to be added or removed from the previously selected files
CValueChangeEvent Use a bind context in a control that has a bind context
An event that occurs after the value changes.
CMouseEvent When the right mouse button is clicked or the context menu key is pressed,
Event called.
CEvent The event that is called when the control is dispose.
CItemEvent Event that occurs when the download button is clicked.
uploadedFile: {cpr.controls.UploadedFile} Clicked uploaded file
CFileUploadEvent An event that occurs when adding a file and the type of file extension and the previously registered extension are different.
files: {File[]} Files not added
CItemEvent An event that occurs when an item is clicked.
item: {cpr.controls.Item} Clicked item
CFileUploadEvent Event that occurs when adding files and the number of files reaches the maximum.
files:{File[]} Files not added
CFileUploadEvent An event that occurs when a file is added and the file size reaches the maximum.
Occurs when the file to be added is larger than the maximum size.
This occurs when the total of added files is larger than the maximum size.
files: {File[]} Files not added
CMouseEvent An event that opens a file when double-clicking an empty area of the list.
CItemEvent An event that occurs before deleting a file. Calling preventDefault() will not remove the file.
files: {File[]} Files to be deleted
CItemEvent Event that occurs after all files have been deleted.
files: {File[]} deleted files
CMouseEvent An event that occurs when the button to delete a file is clicked.
CSelectionEvent Event that fires after the selection is changed.
oldSelection: {File[]} Previously selected files
newSelection: {File[]} Files added or removed from previously selected files
CMouseEvent An event that occurs when you click the button to transfer a file.
Implementation of the transfer button is required through submission.
Properties
declaring type
|
UIControl |
type
|
Accessbility |
readonly
|
Gets the accessibility-related ARIA properties or gets the context in which they can be specified.
|
type
|
String |
get
|
Get the text of the add button.
|
set
|
Set the text for the add button.
|
type
|
FileUploadButtonType[] |
get
|
Gets a list of the button's names.
|
set
|
Set up a list to display buttons.
|
declaring type
|
Control |
type
|
Boolean |
readonly
|
Returns whether the control should be removed.
|
type
|
Boolean |
get
|
Returns whether the drop functionality provided to the control is enabled.
|
set
|
Sets whether to use the drop function provided to the control.
|
declaring type
|
UIControl |
type
|
Boolean |
readonly
|
Returns whether the value can be changed by user action.
UIControl (Output, etc.) that does not allow input returns false.
In the case of an inputtable UIControl, returns true if the binding context in which the value is bound is valid.
Otherwise, it returns false even if it is an inputtable UIControl.
Accordion/Button/Group/Dialog/EmbeddedApp/EmbeddedPage/Grid/HTMLObject/Image/MDIFolder/Menu/
NavigationBar/Notifier/Output/Progress/TabFolder/Shell/FileUpload
In the case of the above control, editable is always false.
|
type
|
String |
get
|
Get the message displayed when the file list is empty.
|
set
|
Set the message displayed when the file list is empty.
|
declaring type
|
EnableUIControl |
type
|
Boolean |
get
|
Returns whether the control is enabled.
|
set
|
Sets whether to activate the control.
|
type
|
String |
get
|
Returns a list of extension names of files that can be uploaded.
Extension .gif, .jpg, .png
Edge legacy versions are not supported.
|
set
|
Set a list of extensions of files that can be uploaded.
The list of extensions is listed in a line and written in one sentence.
FileUpload.extensions = ".gif, .jpg, .png, .doc"
|
declaring type
|
UIControl |
type
|
String |
get
|
Returns the logical field name of the control.
|
set
|
Sets the logical field name of the control.
|
type
|
String |
get
|
Get the file name text value of the header.
|
set
|
Set the file name text value of the header.
|
declaring type
|
UIControl |
type
|
Boolean |
readonly
|
Returns whether the control is focusable.
|
declaring type
|
UIControl |
type
|
Boolean |
readonly
|
Returns whether the control has focus.
|
type
|
Boolean |
get
|
Returns the visibility of the fileCount, fileSize, and buttons area at the bottom.
|
set
|
Set whether to display the fileCount, fileSize, and buttons area at the bottom.
|
type
|
Boolean |
get
|
Returns whether the top checkbox, fileLabel, and sizeLabel areas are visible.
|
set
|
Set whether to display the upper checkbox, fileLabel, and sizeLabel areas.
|
type
|
Boolean |
get
|
Set whether to hide the transfer button.
|
set
|
Returns the value of whether to hide the submit button.
|
declaring type
|
Control |
type
|
String |
readonly
|
Returns the ID of the control.
|
type
|
String |
get
|
Returns the maximum data size of files that can be uploaded.
|
set
|
Limits the maximum data size of files that can be uploaded.
Set the combined size of all files.
|
type
|
String |
get
|
Returns the unit to limit the maximum size of files that can be selected.
|
set
|
Set the unit to limit the maximum size of files that can be selected.
|
type
|
String |
get
|
Returns the maximum data size per file that can be uploaded.
|
set
|
Limit the maximum data size per file that can be uploaded.
|
type
|
String |
get
|
Returns the unit to limit the maximum size of individual files that can be selected.
The default value is kb.
|
set
|
Set the unit to limit the maximum size of individual files that can be selected.
|
type
|
Number |
get
|
Returns the maximum number of files that can be uploaded.
|
set
|
Sets the maximum number of files that can be uploaded.
|
declaring type
|
UIControl |
type
|
String |
get
|
Returns the name of the control.
|
set
|
Sets the name of the control.
|
declaring type
|
EnableUIControl |
type
|
Boolean |
get
|
Returns whether a non-modifiable read-only mode is in effect.
|
set
|
Sets whether to enable read-only mode, which can not be modified.
|
type
|
String |
get
|
Get the text of the delete button.
|
set
|
Sets the text of the delete button.
|
type
|
String |
get
|
Get the text of the send button.
|
set
|
Set the text of the send button.
|
type
|
String |
get
|
Get the size name text value of the header.
|
set
|
Sets the size name text value of the header.
|
type
|
#expression |
get
|
Returns an expression for the text displayed in the fileCount, fileSize areas at the bottom.
|
set
|
Set the expression for the text displayed in the fileCount, fileSize area at the bottom.
|
type
|
FileUpload$Styler |
readonly
|
Returns the style settings of the control.
In case of style changes, only the corresponding control is updated.
Propagation from style changes does not occur.
|
type
|
Number |
get
|
Returns the control focus order using the Tab Key.
This is a property to control the tabindex of HTML.
|
set
|
Set the control focus order using the Tab Key.
This is a property to control the tabindex of HTML.
|
declaring type
|
VisibleUIControl |
type
|
String |
get
|
Returns a description of the control
It works when mouse over.
|
set
|
Set a description for the control.
It works when mouse over.
|
type
|
Number |
readonly
|
Returns the total number of files added to the file upload.
|
type
|
Number |
readonly
|
Returns the total size of files added to the file upload.
|
type
|
"GB" | "KB" | "MB" | "byte" |
readonly
|
Returns the size unit of the file added to the file upload.
|
declaring type
|
Control |
type
|
ControlType |
readonly
|
Returns the signature string of the Control's unique Type that can distinguish the Control.
Please refer to ControlType for available constant values.
For UDC controls, each unique type name is returned. Example: udc.MyUDC
|
declaring type
|
Control |
type
|
String |
readonly
|
Returns the unique ID of the control.
|
declaring type
|
VisibleUIControl |
type
|
Boolean |
get
|
Returns the style property for controlling css visibility.
|
set
|
Sets the style property to control css visibility.
|
Methods
Add listeners by EventType to the control.
Add a listener to the control to handle when a specific event occurs.
var button = new cpr.controls.Button("btn01");
button.addEventListener("click", function(e) {
// event code...
});
name |
type |
description |
type
|
String |
|
listener
|
(e: cpr.events.CEvent)=>Void |
|
Add a listener to the control that will run only once per EventType.
Add a listener to the control to handle when a specific event occurs.
The added listener is automatically deleted after running once.
Since the object of the added listener is changed, when the listener is deleted
It is an object returned after calling addEventListenerOnce and can be deleted.
var button = new cpr.controls.Button("btn01");
button.addEventListenerOnce("click", function(e) {
// event code...
});
name |
type |
description |
type
|
String |
|
listener
|
(e: cpr.events.CEvent)=>Void |
|
return
|
(e: cpr.events.CEvent)=>Void |
The modified Listener object. |
Add files.
fileupload.addFile(new File([""],"filename",{lastModified:date, type:"text/plain"}));
name |
type |
description |
file
|
File |
The file to add. |
emitEventoptional
|
Boolean |
Whether to trigger an event (add-before-file, add-file). |
Add uploaded file information.
name:string, size:number are required values. lastModified:number, type:string are optional.
name |
type |
description |
uploadedFile
|
{
name: String,
size: Number,
lastModified?: Number,
type?: String,
properties: {[key:string]: Object}
} |
:string, size:number, laseModified?:number, type?:string, properties: {}} |
Bind that property.
name |
type |
description |
name
|
String |
|
Removes focus from the control.
Clear all selections.
name |
type |
description |
emitEventoptional
|
Boolean |
defaulttrue
|
Whether to fire an event (before-selection-change, selection-change). |
Determines whether to run the Control's Default Event Handler depending on the state of the Control.
name |
type |
description |
e
|
CEvent |
event |
return
|
Boolean |
Whether the control's event handler is running. |
Forwards specific events.
name |
type |
description |
e
|
CEvent |
|
return
|
Boolean |
Whether to continue processing the default action after propagating the event. |
Removes the objects contained in the control.
Find the parent control.
If includeSelf is true, the parent including the self is found.
name |
type |
description |
predicate
|
(c: cpr.controls.UIControl)=>Boolean |
|
includeSelfoptional
|
Boolean |
defaultfalse
|
Whether you include yourself. |
Assigns focus to the control.
name |
type |
description |
forwardoptional
|
Boolean |
defaulttrue
|
|
Moves focus to the next control.
If there are multiple structural elements that have focus inside a control, focus may transition to the next element.
Moves focus to the previous control.
If there are multiple structural elements that have focus inside a control, focus may transfer to the previous element.
Gets the bounds value of the control relative to the browser's view port.
If the control is not drawn on the screen, an object with all values of 0 is returned.
return
|
Rectangle |
About the position and size of controls in the HTML DOM |
Gets the bounds value of the control relative to the browser's view port.
If the control is not drawn on the screen, an object with all values of 0 is returned.
name |
type |
description |
includeWrap
|
Boolean |
If this value is true, the layout of the parent group gets the area of the node surrounding this control. If false, only get the area of the control node. |
return
|
Rectangle |
About the position and size of controls in the HTML DOM |
Gets the bounds value of the control relative to the browser's view port.
If the control is not drawn on the screen, an object with all values 0 is returned.
name |
type |
description |
options
|
{
includeWrap?: Boolean,
scaled?: Boolean
} |
|
Returns the App to which the control belongs.
Returns the bind context.
Returns the bind property information for the control.
name |
type |
description |
name
|
String |
|
Returns the number of added total or type files within the file upload.
name |
type |
description |
typeoptional
|
"all" | "file" | "uploadedfile" |
default"all"
|
The type to return. If not set, it returns all. |
return
|
Number |
The total number of files added. |
Returns an array of files of all or types added in the file upload.
name |
type |
description |
typeoptional
|
"all" | "file" | "uploadedfile" |
default"all"
|
The type to return. If not set, it returns all. |
return
|
File[] |
An array of all the files added in the file upload. |
Returns all custom DOM DATA attribute names.
return
|
String[] |
An array of all custom DOM DATA attribute names. |
Returns the index of the file in the list.
name |
type |
description |
file
|
File |
|
Returns the control to be moved by Tab Key or by the autoskip property.
The area being displayed is obtained based on the parent container to which it belongs.
name |
type |
description |
includeWrapoptional
|
Boolean |
defaultfalse
|
If this value is true, the layout of the parent group gets the area of the node surrounding this control. If false, only get the area of the control node. |
Shift + Tab Returns the focus to be moved through the key.
Returns an array of files of all or types selected.
name |
type |
description |
typeoptional
|
"all" | "file" | "uploadedfile" |
default"all"
|
The type to return. If not set, it returns all. |
return
|
File[] |
An array of selected files. |
Returns all custom attribute names.
return
|
String[] |
An array of all custom attribute names. |
Gets the closest parent UI control.
Unlike getParent(), it finds nearby parent controls, including external apps.
Specifies custom DOM properties.
name |
type |
description |
key
|
String |
The attribute name to assign |
value
|
String |
The attribute value to specify. |
Returns a custom DOM property.
name |
type |
description |
key
|
String |
The attribute name to get. |
return
|
String |
Custom properties. |
Specify multiple custom DOM properties at once.
name |
type |
description |
values
|
{[key:string]: String} |
A JSON object containing custom attribute keys/values. |
Get all custom DOM properties in the form of a map.
return
|
{[key:string]: String} |
|
Returns whether the queried property is bindable and the binding has been configured to obtain a valid value.
Even if no binding is configured and a simple value is specified, it is treated as configured so that a valid value is obtained.
For example, binding to a row index that does not exist in the DataSet is an invalid binding.
name |
type |
description |
name
|
String |
|
Make sure it is a bindable property.
name |
type |
description |
name
|
String |
|
return
|
Boolean |
Confirmation. |
Returns whether the control is floating through an app instance or a specific container.
Returns the status that the screen is showing. Returns false if the visible state of all parents including itself is false.
Removes all event listeners for the control.
Remove all files.
name |
type |
description |
emitEventoptional
|
Boolean |
defaulttrue
|
Whether to fire events (remove-before-file, remove-file). |
Delete all custom DOM DATA attributes.
Delete all custom attributes.
Remove Listener for each EventType in the control.
control.removeEventListener ('click', listener); code> pre>
name |
type |
description |
type
|
String |
Event type. |
listener
|
(e: cpr.events.CEvent)=>Void |
Event listeners. |
Remove all EventType listeners from the control.
control.removeEventListeners ('click'); code> pre>
name |
type |
description |
type
|
String |
Event type. |
Remove files by their sequence number.
name |
type |
description |
index
|
Number |
The index of the specified file |
emitEventoptional
|
Boolean |
Whether to trigger an event (before-remove-file, remove-file). |
Remove the set file.
name |
type |
description |
file
|
File |
file to remove |
emitEventoptional
|
Boolean |
Whether to trigger an event (before-remove-file, remove-file). |
Removes the user-defined DOM DATA attribute for a specific attribute name.
name |
type |
description |
key
|
String |
The custom DOM DATA attribute name to remove. |
Deselect the file.
name |
type |
description |
file
|
File |
file to remove selection |
emitEventoptional
|
Boolean |
defaulttrue
|
Whether to fire an event (before-selection-change, selection-change). |
Removes user-defined attributes for a specific attribute name.
name |
type |
description |
key
|
String |
The custom attribute name to remove. |
Select the file.
name |
type |
description |
file
|
File |
file to select |
emitEventoptional
|
Boolean |
defaulttrue
|
Whether to fire an event (before-selection-change, selection-change). |
Upload the file.
If there is a control ID as the file parameter of the submission, all files in the file upload are set to ID or "file" and are sent to the submission's action path.
name |
type |
description |
submission
|
Submission |
Submission required for file upload. |
Sets the bind context.
container.setBindContext({dataControl:grid.dataSet,rowIndex:rowIndex})
Sets the control to be moved by Tab Key or by the autoskip property.
name |
type |
description |
nextControl
|
UIControl |
control. |
Shift + Tab Set the focus to be moved through the key.
name |
type |
description |
prevControl
|
UIControl |
control. |
Unbind that property.
name |
type |
description |
name
|
String |
|
Specifies custom properties.
name |
type |
description |
key
|
String |
The attribute name to assign |
value
|
String |
The attribute value to specify. |
Returns a user-defined property.
name |
type |
description |
key
|
String |
The attribute name to get. |
return
|
String |
Custom properties. |
Specify multiple custom properties at once.
name |
type |
description |
values
|
{[key:string]: String} |
A JSON object containing custom attribute keys/values. |
Get all custom properties in the form of a map.
return
|
{[key:string]: String} |
|
Specifies custom data. Unlike user-defined attributes, you can use arbitrary types in addition to strings.
When the control is dispose, all custom data is removed.
name |
type |
description |
key
|
String |
The key of the data to be specified. |
value
|
Object |
Data to specify. |
get custom data
name |
type |
description |
key
|
String |
The key of the data to get. |
Specifies multiple user-defined data.
name |
type |
description |
override
|
{[key:string]: Object} |
A JSON object containing user-defined data. |
Get all your custom data.
return
|
{[key:string]: Object} |
|
Returns a user-defined property.
return
|
Object |
Custom properties. |