Themes
Advanced
Utils
Components

File Upload

파일 업로더

View sourceReport an issueView in Playground
<FileUpload
	label={'파일을 놓아주세요'}
/>

API Reference

PropTypeDefault
name
string
No default value
label
string | ReactNode
No default value
activeLabel
string | ReactNode
No default value
disabled
boolean
No default value
onChangeFiles
func
No default value
onMaxFileError
func
No default value
renderItem
func
No default value
accept
string[]
No default value
autoFocus
boolean
false
children
func
No default value
disabled
boolean
false
getFilesFromEvent
func
fromEvent
maxFiles
number
0
maxSize
number
Infinity
minSize
number
0
multiple
boolean
true
noClick
boolean
false
noDrag
boolean
false
noDragEventsBubbling
boolean
false
noKeyboard
boolean
false
onDragEnter
func
No default value
onDragLeave
func
No default value
onDragOver
func
No default value
onDrop
func
No default value
onDropAccepted
func
No default value
onDropRejected
func
No default value
onError
func
No default value
onFileDialogCancel
func
No default value
onFileDialogOpen
func
No default value
preventDropOnDocument
boolean
true
useFsAccessApi
boolean
false
validator
func
null

Exmaple

Default

기본적인 drag and drop 파읿업로드 형태

<FileUpload
	label={'파일을 놓아주세요'}
/>

Dialog

Dialog 컴포넌트와 조합해 사용하여 업로드 팝업을 제작

<Dialog.Root>

	<Dialog.Trigger>

		<Button>Open Upload</Button>

	</Dialog.Trigger>

	<Dialog.Content maxWidth='450px'>

		<Dialog.Title>File Upload</Dialog.Title>

		<Dialog.Description></Dialog.Description>

		<FileUpload
			multiple={true}
			label={'파일을 놓아주세요'}
			maxFiles={5}
		/>

		<Flex gap='3' mt='4' justify='end'>

			<Dialog.Close>

				<Button variant='soft' color='gray'>

					Cancel

				</Button>

			</Dialog.Close>

			<Dialog.Close>

				<Button>Save</Button>

			</Dialog.Close>

		</Flex>

	</Dialog.Content>

</Dialog.Root>

List Custom

<FileUpload
	label={'파일을 놓아주세요'}
  renderItem={({type, name, size})=>{
    return (
      <div>{name}, {(size/1027).toFixed(2)} KB</div>
    )
  }}
/>
PreviousDropdown Menu
NextHover Card
Edit this page on GitHub.