매쉬업 작성기 > 위젯 > 표준 위젯 > 파일 업로드 위젯(테마 적용 가능)
파일 업로드 위젯(테마 적용 가능)
파일 업로드 위젯을 사용하면 사용자가 하나 또는 여러 파일을 ThingWorx 저장소에 업로드할 수 있습니다. 다음 방법 중 하나로 파일을 업로드하도록 위젯을 구성할 수 있습니다.
찾아보기 버튼을 클릭하여 로컬 시스템에서 파일을 선택합니다. 업로드 버튼을 클릭하면 선택한 파일이 업로드됩니다.
로컬 시스템의 파일을 위젯의 드롭 영역으로 끕니다.
또한 파일 유형, 크기, 수량 등에 대한 제한을 적용하도록 유효성 검사 규칙을 구성할 수 있습니다.
위젯 구조
끌어서 놓기
1. 파일 저장소 선택기
2. 파일 드롭 영역
3. 업로드된 파일
4. 저장소 경로
이 모드에서 파일을 끌거나 선택하면 DisableInstantUpload 속성 값에 따라 파일이 즉시 업로드되거나 나열됩니다. 필요한 경우 버튼 또는 위젯 Upload 서비스를 사용하여 AllowInstantUpload 속성을 비활성화하고 파일을 수동으로 업로드할 수 있습니다. 또한 저장소에서 업로드된 파일을 바꿀 수 있는 바꾸기 버튼이 표시됩니다.
찾아보기 버튼만
1. 파일 저장소 선택기
2. 찾아보기 버튼
3. 선택한 파일
4. 저장소 경로
즉시 업로드 비활성화
기본적으로 선택한 파일이 저장소에 자동으로 업로드됩니다. 각 파일의 업로드 진행률을 나타내는 진행률 표시줄이 표시됩니다.
사용자가 선택한 파일을 업로드하기 전에 검토하려면 위젯 DisbaleInstantUploadShowUploadButton 속성을 true로 설정합니다. 런타임에 사용자는 업로드 버튼을 클릭하여 업로드를 시작할 수 있습니다. 필요한 경우 특정 조건에 따라 업로드를 시작하도록 매쉬업, 함수 또는 위젯 이벤트를 위젯 Upload 서비스에 바인딩합니다.
삭제 버튼 추가
사용자가 업로드를 중지하고 목록에서 선택한 파일을 제거할 수 있도록 삭제 버튼을 추가할 수 있습니다. 업로드된 파일은 목록에서만 제거되고 ThingWorx 저장소에서는 삭제되지 않습니다. 저장소에서 파일을 삭제하려면 사용자 정의 데이터 서비스를 사용합니다.
ThingWorx 저장소에 파일 업로드
기본적으로 사용자는 사용 가능한 컨트롤을 사용하여 파일을 업로드할 저장소 및 폴더를 선택할 수 있습니다. 사용자가 저장소 또는 폴더 경로를 선택하지 못하게 하려면 ShowRepositoryPathShowRepositorySelector 속성을 false로 설정합니다. 위젯 RepositoryNamePath 속성을 사용하여 기본 저장소 이름 및 폴더를 지정할 수 있습니다. 플랫폼의 저장소에 대한 자세한 내용은 파일 저장소 관리를 참조하십시오.
파일 크기 유효성 검사
기본적으로 사용자는 런타임에 어떤 크기의 파일도 업로드할 수 있습니다. 유효성 검사 패널의 위젯 MaxFileSize 속성을 사용하여 업로드 가능한 최대 파일 크기를 제한할 수 있습니다. 파일이 최대 허용보다 더 클 때의 실패 메시지를 사용자 정의하려면 MaxFileSizeFailureMessageMaxFileSizeFailureTitle 속성을 구성합니다.
업로드 크기 유효성 검사
MaxUploadSize 유효성 검사 속성을 사용하여 총 업로드 크기를 제한할 수 있습니다. 총 업로드 크기가 제한을 초과할 때 실패 메시지가 표시됩니다. 오류 메시지를 사용자 정의하려면 MaxUploadSizeFailureMessageMaxUploadSizeFailureTitle 속성을 사용합니다.
최대 파일 수
사용자가 유효성 검사 패널의 위젯 MaxFileSize 속성을 사용하여 업로드 가능한 최대 파일 수를 제한할 수 있습니다. 선택한 파일 수가 최대값보다 크면 실패 메시지가 표시됩니다. 오류 메시지를 사용자 정의하려면 MaxNumberOfFilesFailureMessage 속성을 사용합니다.
파일 유형 제한
AllowedFileTypes 속성을 사용하여 특정 파일 형식을 허용하도록 위젯을 구성할 수 있습니다. 여러 파일 유형을 쉼표로 구분하여 추가할 수 있습니다. 예를 들어, PDF와 PNG 파일만 허용하려면 .pdf, .png를 입력합니다. AllowedFileTypesMessageAllowedFileTypesTitle 속성을 사용하여 지원되지 않는 파일 유형이 추가될 때 표시되는 오류 메시지를 사용자 정의할 수 있습니다.
* 
드롭 영역 레이블에 지원되는 파일 유형을 나열하는 것이 좋습니다.
파일 드롭 영역 구성
파일을 드롭 영역으로 끌거나 레이블을 클릭하여 파일 선택 대화 상자를 열 수 있습니다. 영역 색상이 자동으로 변경되어 파일 드롭이 가능함을 알려줍니다.
다음 속성을 사용하여 드롭 영역을 구성할 수 있습니다.
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
파일 업로드 위젯 데이터 유효성 검사
파일 업로드는 유효성 검사를 지원하는 다른 위젯과 달리 유효성 검사 및 조건 메시지를 지원하지 않습니다. 조건 메시지를 정의하고 ValidationStateInvalid인 경우 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
도움이 되셨나요?