File upload

A control that can upload nultiple files at the same time.

You can verify the file name, extension, size, and the number of files while uploading.
You can perform the actions of adding, deleting, and saving through buttons.

※ Caution for Microsoft Edge browser users
The version verified for file drag and drop is 44.19041(EdgeHTML 18.19041), and its release date is May 27th, 2020.
If you have to use file drag and drop function of the file upload control, we recommend the user to use Chromium version of Microsoft Edge.

Control component

Description on composition of file-upload screen

Control component

Component

Component	Type	Description
file	File[]	The overall files that have been added within the file upload. File object can be verified through the getFiles() method.
buttons	string[]	Buttons, such as add, delete, send, can be either hidden or displayed.
extension	string	The file extension names that can be uploaded.
fileCount	number	Number of files that has been added. You can check the number of files through getFileCount().

Example: using the component

var fileUpload = app.lookup("fileupload1");

/* Display add or send button */
fileUpload.buttons = ["add", "send"];

/* Selecting the file extension */
fileUpload.extensions = ".png"; //extension: png, jpg, gif, doc ..

/* Files that have been added through file upload */
console.log(fileUpload.getFiles());

/* Added files that has been uploaded */
console.log(fileUpload.getFileCount());

Related API : buttons ,extensions , getFiles , getFileCount , FileUpload API overview

Style component

Theme file: file-upload.part.less

CSS style composition

Component

Component	Description
cl-fileupload	File upload style.
cl-text	Style of the file upload text.
cl-button	Style of the file upload button.
cl-fileupload-header	Style of the file upload header.
cl-fileupload-detail	Style of the file upload detail.
cl-fileupload-footer	Style of the file upload footer.
cl-fileupload-checkbox	Style of the file upload checkbox.
cl-fileupload-uploadedfile	Style that displays the uploaded file from the file list.
cl-fileupload-download	Style that displays the download button from the uploaded file.

State element

Component	State element	Description
cl-fileupload-detail	cl-hover	Style when hovering over a file in the file upload details..
cl-fileupload-footer	cl-hover	Style when hovering over the footer buttons in the file upload.

Changing the style property by using the CSS file

@CHARSET "UTF-8";

/* File upload style */
.cl-fileupload {
  	border: 1px solid green;
  	background-color: red;
}

/* Style of the file upload header */
.cl-fileupload .cl-fileupload-header {
  	background-image: linear-gradient(to bottom, #FFFFFF, #F3F3F3);
}

/* Style of the file upload checkbox*/
.cl-fileupload .cl-fileupload-header .cl-fileupload-checkheader {
  	border-right: 1px solid gray;
}

/* Style when the Checkbox of the file upload has been checked */
.cl-fileupload .cl-fileupload-checkbox.cl-checked {
  	background-image: url(icons/checkbox-selected.png);
}

Styler composition

Component

Component	Description
header	Styler of the file upload header.
footer	Styler of the file upload footer.
button	Styler of the file upload button.

Changing the style property by using the styler

// UI Configuration
var fileUpload_1 = new cpr.controls.FileUpload("fileupload1");

/* File upload default style */
/* You can use json data for multiple configuration. */
fileUpload_1.style.css({
	"border" : "2px solid red",
	"background-color": "gray"
});

/* File upload default style (For single configuration)*/
fileUpload_1.style.css("border" : "2px solid red");

/* Style of the file upload header */
fileUpload_1.style.header.css("border" : "2px solid red");

/* Style of the file upload footer */
fileUpload_1.style.footer.css("border" : "2px solid red");

/* Style of the file upload button */
fileUpload_1.style.button.css("border" : "2px solid red");

Example

Creating a file upload

Description on example of file upload configuration. You can configure the extension name and the maximum file number.

var fileUpload_1 = new cpr.controls.FileUpload("fileupload1");

/* Maximum upload file number */
fileUpload_1.maxFileCount = 5;

/* List of extensions */
/* The extension list is written as a single sentence, with each extension listed in a string. */
fileUpload_1.extensions = ".gif, .jpg, .png";

/* Setting the maximum data size of the uploaded file */
fileUpload_1.limitFileSize = "10kb";

Adding a file / Verify

An example description of file upload.

var fileUpload = new cpr.controls.FileUpload("fileupload1");

/* Added file for file upload */
console.log(fileUpload.getFiles());

/* Selected file for file upload */
console.log(fileUpload.getSelection());

/* Number of files added for file upload */
console.log(fileUpload.getFileCount());

/* File upload */
fileUpload_1.send(app.lookup("submission_ID")); //Submission required for file upload

Download the files that are uploaded

Example description of downloading files that are uploaded.

var fileUpload = new cpr.controls.FileUpload("fileupload1");

/* Add files that are uploaded */
fileUpload.addUploadedFile({name: "tomato.png", size: 1500, properties: {url:"http://tomatosystem.co.kr/download/tomato.png"});

/*
 * Call when download-click event occur from the file upload.
 * An event that occurs when the download button gets clicked. Implementation of the download button is required through submission.
 */
function onFud1DownloadClick(/* cpr.events.CItemEvent */ e){
	/** 
	 * @type cpr.controls.FileUpload
	 */
	var fud1 = e.control;
	var uploadedFile = e.uploadedFile; // Files to be downloaded
	var url = uploadedFile.getProperty("url"); // Url information of the files that would be downloaded
	var downloadSub = app.lookup("download_sub"); // Submission required for downloading files
	
	downloadSub.action = url; // download url
	downloadSub.send(); 
}