파일 업로드 위젯(테마 적용 가능)
파일 업로드 위젯을 사용하면 사용자가 하나 또는 여러 파일을 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 | 사용자가 런타임에 위젯과 상호 작용하기 전에 유효성 검사 상태를 표시할 수 있는 바인딩 가능한 서비스입니다. 기본적으로 유효성 검사 상태는 사용자 상호 작용 후에만 표시됩니다. | Service | 해당 없음 | 내부 | 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 |