파일 업로드 위젯(테마 적용 가능)
파일 업로드 위젯을 사용하면 사용자가 하나 또는 여러 파일을 ThingWorx 저장소에 업로드할 수 있습니다. 다음 방법 중 하나로 파일을 업로드하도록 위젯을 구성할 수 있습니다.
• 찾아보기 버튼을 클릭하여 로컬 시스템에서 파일을 선택합니다. 업로드 버튼을 클릭하면 선택한 파일이 업로드됩니다.
• 로컬 시스템의 파일을 위젯의 드롭 영역으로 끕니다.
또한 파일 유형, 크기, 수량 등에 대한 제한을 적용하도록 유효성 검사 규칙을 구성할 수 있습니다.
위젯 구조
끌어서 놓기
1. 파일 저장소 선택기
2. 파일 드롭 영역
3. 업로드된 파일
4. 저장소 경로
이 모드에서 파일을 끌거나 선택하면 DisableInstantUpload 속성 값에 따라 파일이 즉시 업로드되거나 나열됩니다. 필요한 경우 버튼 또는 위젯 Upload 서비스를 사용하여 AllowInstantUpload 속성을 비활성화하고 파일을 수동으로 업로드할 수 있습니다. 또한 저장소에서 업로드된 파일을 바꿀 수 있는 바꾸기 버튼이 표시됩니다.
찾아보기 버튼만
1. 파일 저장소 선택기
2. 찾아보기 버튼
3. 선택한 파일
4. 저장소 경로
즉시 업로드 비활성화
기본적으로 선택한 파일이 저장소에 자동으로 업로드됩니다. 각 파일의 업로드 진행률을 나타내는 진행률 표시줄이 표시됩니다.
사용자가 선택한 파일을 업로드하기 전에 검토하려면 위젯 DisbaleInstantUpload 및 ShowUploadButton 속성을 true로 설정합니다. 런타임에 사용자는 업로드 버튼을 클릭하여 업로드를 시작할 수 있습니다. 필요한 경우 특정 조건에 따라 업로드를 시작하도록 매쉬업, 함수 또는 위젯 이벤트를 위젯 Upload 서비스에 바인딩합니다.
삭제 버튼 추가
사용자가 업로드를 중지하고 목록에서 선택한 파일을 제거할 수 있도록 삭제 버튼을 추가할 수 있습니다. 업로드된 파일은 목록에서만 제거되고 ThingWorx 저장소에서는 삭제되지 않습니다. 저장소에서 파일을 삭제하려면 사용자 정의 데이터 서비스를 사용합니다.
ThingWorx 저장소에 파일 업로드
기본적으로 사용자는 사용 가능한 컨트롤을 사용하여 파일을 업로드할 저장소 및 폴더를 선택할 수 있습니다. 사용자가 저장소 또는 폴더 경로를 선택하지 못하게 하려면 ShowRepositoryPath 및 ShowRepositorySelector 속성을 false로 설정합니다. 위젯 RepositoryName 및 Path 속성을 사용하여 기본 저장소 이름 및 폴더를 지정할 수 있습니다. 플랫폼의 저장소에 대한 자세한 내용은 파일 저장소 관리를 참조하십시오.
파일 크기 유효성 검사
기본적으로 사용자는 런타임에 어떤 크기의 파일도 업로드할 수 있습니다. 유효성 검사 패널의 위젯 MaxFileSize 속성을 사용하여 업로드 가능한 최대 파일 크기를 제한할 수 있습니다. 파일이 최대 허용보다 더 클 때의 실패 메시지를 사용자 정의하려면 MaxFileSizeFailureMessage 및 MaxFileSizeFailureTitle 속성을 구성합니다.
업로드 크기 유효성 검사
MaxUploadSize 유효성 검사 속성을 사용하여 총 업로드 크기를 제한할 수 있습니다. 총 업로드 크기가 제한을 초과할 때 실패 메시지가 표시됩니다. 오류 메시지를 사용자 정의하려면 MaxUploadSizeFailureMessage 및 MaxUploadSizeFailureTitle 속성을 사용합니다.
최대 파일 수
사용자가 유효성 검사 패널의 위젯 MaxFileSize 속성을 사용하여 업로드 가능한 최대 파일 수를 제한할 수 있습니다. 선택한 파일 수가 최대값보다 크면 실패 메시지가 표시됩니다. 오류 메시지를 사용자 정의하려면 MaxNumberOfFilesFailureMessage 속성을 사용합니다.
파일 유형 제한
AllowedFileTypes 속성을 사용하여 특정 파일 형식을 허용하도록 위젯을 구성할 수 있습니다. 여러 파일 유형을 쉼표로 구분하여 추가할 수 있습니다. 예를 들어, PDF와 PNG 파일만 허용하려면 .pdf, .png를 입력합니다. AllowedFileTypesMessage 및 AllowedFileTypesTitle 속성을 사용하여 지원되지 않는 파일 유형이 추가될 때 표시되는 오류 메시지를 사용자 정의할 수 있습니다.
 |
드롭 영역 레이블에 지원되는 파일 유형을 나열하는 것이 좋습니다.
|
파일 드롭 영역 구성
파일을 드롭 영역으로 끌거나 레이블을 클릭하여 파일 선택 대화 상자를 열 수 있습니다. 영역 색상이 자동으로 변경되어 파일 드롭이 가능함을 알려줍니다.
다음 속성을 사용하여 드롭 영역을 구성할 수 있습니다.
• DropZoneHeight - 드롭 영역의 특정 높이를 설정합니다.
• DropZoneIcon - 미디어 엔티티를 아이콘으로 표시합니다.
• DropZoneLabel - 표시할 레이블을 설정합니다. 이 속성을 사용하여 지원되는 파일 유형 및 크기에 대한 정보를 제공할 수 있습니다.
위젯 속성
다음 표에는 속성 패널에서 사용할 수 있는 속성이 나와 있습니다.
|
속성 이름
|
설명
|
기본 유형
|
기본값
|
바인딩 가능 여부(Y/N)
|
로컬리제이션 가능 여부(Y/N)
|
|---|---|---|---|---|---|
|
BrowseButtonLabel
|
찾아보기 버튼의 레이블을 설정합니다.
|
STRING
|
찾아보기
|
Y
|
Y
|
|
BrowseButtonType
|
찾아보기 버튼 유형을 설정합니다. 옵션: 기본, 보조, 3차
|
STRING
|
기본
|
N
|
N
|
|
ClearList
|
선택한 파일의 목록을 지우는 바인딩 가능한 서비스입니다.
|
Service
|
해당 없음
|
Y
|
N
|
|
CustomClass
|
위젯의 최상위 div 요소에 적용할 CSS 클래스를 설정합니다. 여러 개의 클래스를 공백으로 구분하여 입력할 수 있습니다.
|
STRING
|
해당 없음
|
Y
|
N
|
|
DisableInstantUpload
|
파일이 선택될 때 즉시 업로드를 비활성화합니다.
|
BOOLEAN
|
False
|
||
|
DropZoneHeight
|
파일 드롭 영역의 높이를 설정합니다.
|
NUMBER
|
96
|
||
|
DropZoneIcon
|
드롭 영역 내 표시할 아이콘을 설정합니다.
|
IMAGELINK
|
해당 없음
|
||
|
DropZoneLabel
|
드롭 영역의 레이블을 설정합니다.
|
STRING
|
여기로 파일을 끌거나 클릭하여 찾아보기
|
||
|
FileNames
|
선택한 파일의 이름을 포함합니다.
|
STRING
|
해당 없음
|
Y
|
N
|
|
FileUploadMode
|
런타임에 파일을 선택하는 방법을 지정합니다. 끌어서 놓기를 수행하거나 찾아보기 버튼을 표시할 수 있습니다.
|
STRING
|
끌어서 놓기
|
N
|
N
|
|
RepositoryName
|
위젯에서 사용하는 파일 저장소의 이름입니다.
|
THINGNAME
|
SystemRepository
|
Y
|
N
|
|
ShowRespositorySelector
|
대상 파일 저장소를 편집할 수 있는지 여부를 표시합니다.
|
BOOLEAN
|
True
|
N
|
N
|
|
Path
|
저장소에서 파일을 업로드할 폴더 경로입니다.
|
STRING
|
해당 없음
|
Y
|
N
|
|
MultiFilesSelect
|
여러 파일을 선택할 수 있습니다.
|
BOOLEAN
|
False
|
N
|
N
|
|
ShowDataLoading
|
데이터를 로드할 때 회전하는 아이콘을 표시합니다.
|
BOOLEAN
|
True
|
N
|
N
|
|
Width
|
위젯의 너비입니다.
|
NUMBER
|
302
|
N
|
|
|
Height
|
위젯의 높이입니다.
|
NUMBER
|
95
|
N
|
N
|
|
Visible
|
런타임에 위젯의 표시 유형을 설정합니다.
|
True
|
True
|
N
|
N
|
|
ClearList
|
위젯에 추가된 파일 목록을 지웁니다.
|
해당 없음
|
해당 없음
|
Y
|
N
|
|
DisbaleInstantUpload
|
파일을 선택한 후 즉시 업로드를 비활성화합니다. false로 설정하면 업로드 버튼을 클릭한 후에만 파일이 업로드됩니다.
|
False
|
False
|
Y
|
N
|
|
ResetToDefaultValue
|
위젯에 대한 입력을 기본값으로 재설정합니다.
|
해당 없음
|
해당 없음
|
Y
|
N
|
|
ShowDeleteAllButton
|
모두 삭제 버튼을 표시하고 사용자가 업로드를 취소하고 업로드된 모든 파일을 삭제할 수 있습니다.
|
BOOLEAN
|
False
|
N
|
N
|
|
ShowRepositoryPath
|
사용자가 텍스트 필드를 사용하여 저장소 내 경로를 지정할 수 있습니다.
|
BOOLEAN
|
True
|
N
|
N
|
|
ShowRepositorySelector
|
사용자가 파일을 업로드할 ThingWorx 저장소를 선택할 수 있는 드롭다운 목록을 표시합니다.
|
BOOLEAN
|
True
|
N
|
N
|
|
ShowUploadButton
|
선택한 파일을 업로드하는 업로드 버튼을 표시합니다. 이 속성은 InstantUpload가 false로 설정된 경우에만 사용할 수 있습니다.
|
BOOLEAN
|
False
|
N
|
N
|
|
UploadComplete
|
파일 업로드가 완료되면 트리거되는 바인딩 가능한 이벤트입니다.
|
해당 없음
|
해당 없음
|
Y
|
N
|
|
Upload
|
선택한 파일을 업로드하는 바인딩 가능한 서비스입니다.
|
Service
|
|||
|
UploadDescription
|
사용자에게 업로드할 파일에 대해 안내하는 데 사용되는 설명 텍스트를 설정합니다.
|
해당 없음
|
해당 없음
|
Y
|
N
|
|
UploadDescriptionType
|
설명 텍스트를 표시하는 데 사용되는 레이블 유형입니다.
|
본문
|
본문
|
N
|
N
|
|
UploadStarted
|
업로드가 시작될 때 트리거되는 바인딩 가능한 이벤트입니다.
|
해당 없음
|
해당 없음
|
Y
|
N
|
|
UploadFailed
|
파일 업로드에 실패할 때 트리거되는 바인딩 가능한 이벤트입니다.
|
해당 없음
|
해당 없음
|
Y
|
N
|
파일 업로드 위젯 데이터 유효성 검사
파일 업로드는 유효성 검사를 지원하는 다른 위젯과 달리 유효성 검사 및 조건 메시지를 지원하지 않습니다. 조건 메시지를 정의하고 ValidationState가 Invalid인 경우 ShowFailureMessage에서 실패 메시지를 표시하도록 설정할 수 있습니다.
 |
스타일 속성 패널에서 실패 메시지의 스타일을 지정하는 경우에만 Invalid 상태를 사용할 수 있습니다.
|
공통 유효성 검사 속성 사용에 대한 자세한 내용은 텍스트 필드 위젯(테마 적용 가능)을 참조하십시오.
다음 표에는 유효성 검사 패널에서 사용할 수 있는 유효성 검사 속성이 나와 있습니다.
|
이름
|
설명
|
기본 유형
|
기본값
|
바인딩 가능 여부
|
로컬리제이션 가능 여부
|
|---|---|---|---|---|---|
|
AllowedFileTypes
|
사용자가 선택할 수 있는 허용된 파일 유형을 쉼표로 구분하여 설정합니다. 예를 들어, .png, .pdf, .txt입니다.
|
STRING
|
해당 없음
|
Y
|
N
|
|
AllowedFileTypesMessage
|
지원되지 않는 파일 유형이 추가될 때 표시할 메시지입니다.
|
STRING
|
Y
|
Y
|
|
|
AllowedFileTypesMessageDetails
|
허용되는 파일 유형을 나열하는 메시지 아래에 표시할 세부 정보입니다.
|
STRING
|
Y
|
Y
|
|
|
CriteriaMessage
|
유효성 검사 조건 및 유효성 검사 실패 시 표시할 메시지입니다.
|
STRING
|
Y
|
Y
|
|
|
CriteriaMessageDetails
|
유효성 검사 조건 및 실패 메시지에 대해 표시할 세부 정보입니다.
|
STRING
|
Y
|
Y
|
|
|
FileRequired
|
업로드할 파일이 필요합니다.
|
BOOLEAN
|
False
|
Y
|
N
|
|
FileRequiredMessage
|
필수 파일이 없을 때 표시할 메시지입니다.
|
STRING
|
Y
|
Y
|
|
|
FileUploadErrorDetails
|
업로드에 실패한 파일에 대한 추가 세부 정보를 표시하는 메시지입니다.
|
STRING
|
Y
|
Y
|
|
|
FileUploadErrorMessage
|
파일 업로드에 실패할 때 표시할 메시지입니다.
|
STRING
|
Y
|
Y
|
|
|
MaxFileSize
|
각 개별 파일의 최대 크기 제한을 메가바이트 단위로 설정합니다.
|
NUMBER
|
해당 없음
|
Y
|
N
|
|
MaxFileSizeFailureMessage
|
파일이 최대 허용 파일 크기를 초과할 때 표시할 메시지입니다.
|
STRING
|
Y
|
Y
|
|
|
MaxFileSizeFailureTitle
|
파일 크기가 최대 허용 파일 크기를 초과할 때 표시되는 대화 상자의 제목입니다.
|
STRING
|
Y
|
Y
|
|
|
MaxNumberOfFiles
|
업로드 목록에 추가할 수 있는 최대 파일 수를 설정합니다.
|
NUMBER
|
해당 없음
|
Y
|
Y
|
|
MaxNumberOfFilesFailureMessage
|
추가된 파일 수가 최대값을 초과할 때 표시할 메시지입니다.
|
STRING
|
Y
|
Y
|
|
|
MaxUploadSize
|
여러 파일을 선택할 때 업로드할 최대 크기 제한을 메가바이트 단위로 설정합니다.
|
NUMBER
|
해당 없음
|
Y
|
N
|
|
MaxUploadSizeFailureMessage
|
총 파일 크기가 최대 허용 파일 크기를 초과할 때 표시할 메시지입니다.
|
STRING
|
Y
|
Y
|
|
|
MaxUploadSizeFailureTitle
|
총 파일 크기가 최대 허용 값을 초과할 때 표시되는 대화 상자의 제목입니다.
|
STRING
|
Y
|
Y
|
|
|
ShowValidationFailure
|
유효성 검사에 실패할 때 실패 메시지를 표시합니다.
|
BOOLEAN
|
False
|
Y
|
N
|
|
ShowValidationState
|
사용자가 런타임에 위젯과 상호 작용하기 전에 유효성 검사 상태를 표시할 수 있는 바인딩 가능한 서비스입니다. 기본적으로 유효성 검사 상태는 사용자 상호 작용 후에만 표시됩니다.
|
서비스
|
해당 없음
|
내부
|
N
|
|
Validate
|
위젯 값이 변경될 때 트리거되는 이벤트입니다. 이 이벤트를 서비스 또는 함수에 바인딩하여 유효성 검사 패턴 또는 식을 적용합니다.
|
이벤트
|
해당 없음
|
Y
|
N
|
|
ValidationFailureIcon
|
유효성 검사에 실패했을 때 상태 메시지 내에 표시할 SVG 아이콘을 설정합니다.
|
IMAGELINK
|
cds:icon_error
|
N
|
N
|
|
ValidationOutput
|
위젯 유효성 검사의 출력을 검색합니다. 반환된 값은 Undefined, Unvalidated, Valid 또는 Invalid입니다.
|
STRING
|
해당 없음
|
Y
|
N
|
|
ValidationState
|
유효성 검사 상태를 설정하는 바인딩 가능한 속성입니다. 이 속성을 Undefined, Unvalidated, Valid 또는 Invalid로 설정할 수 있습니다.
|
STRING
|
Undefined
|
Y
|
N
|