File Upload
파일 업로드 · 목록 · 삭제 · 순서 변경을 한 번에 제공하는 컴포넌트입니다. 내부적으로 Firo 를 사용하며, 파일 선택 시 즉시 임시 업로드하고 폼 저장 시점에 확정됩니다.
전체 가이드
동작 원리(temp 2단계 커밋), 백엔드 연동(@FiroRef / @FiroUpload), 디렉티브 방식(v-firo-upload) 등 전체 내용은 Firo 문서 를 참고하세요. 이 페이지는 컴포넌트 props 레퍼런스입니다.
Props
참조 지정 (필수)
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
v-model | object | — | (필수) 폼 모델. attachContainer 속성을 자동 생성해 파일 정보를 담습니다. 저장 시 이 객체를 그대로 전송해야 합니다 |
ref-domain | string | — | (필수) 첨부가 연결될 대상(refDomain). 엔터티의 @FiroRef("...") 값 |
ref-category | string | 'default' | 도메인 내 용도 구분 (예: main / list) |
ref-key | string | number | — | 대상의 고유 키(PK). 값이 있으면 수정 모드 — 기존 첨부를 불러옵니다 |
개수 · 형식 · 크기
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
multiple | boolean | false | 다중 선택 허용 |
max-count | number | 0 | 최대 첨부 개수 (0 = 무제한) |
accept | string | — | 허용 형식 (예: image/*, .pdf,.docx) |
image-only | boolean | false | accept 를 image/* 로 강제 |
max-file-size-mb | number | 10 | 파일당 최대 크기(MB). 브라우저에서 먼저 검사. 0 = 무제한 |
filters | object | null | 요청별 서버 필터. 등록된 키만 동작 (기본 size, dimension) |
표시 · UI
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
cols | string[] | ['THUMB','NAME','DESCRIPTION','SIZE','ACTION'] | 표시할 컬럼. UPLOADER, UPLOAD_DATE 추가 가능 |
preview-max-size | number | 100 | 썸네일 최대 변 길이(px) |
sortable | boolean | false | 순서 변경 버튼 표시. 저장 시 배열 순서가 attach_sort 로 확정 |
reverse-order | boolean | false | 화면 표시 순서만 반전 |
modify-disabled | boolean | false | 업로드/삭제/정렬 비활성화 |
upload-btn-text | string | 'Upload' | 업로드 버튼 문구 |
upload-btn-class | string | 'btn btn-default btn-file' | 업로드 버튼 클래스 |
delete-btn-text | string | '삭제' | 삭제 버튼 문구 |
show-upload-icon | boolean | true | 업로드 아이콘 표시 |
CDN URL
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
use-direct-url | boolean | false | 기존 첨부 로드 시 CDN direct URL 조회 (없으면 서버 뷰 URL 폴백) |
enable-copy-direct-url | boolean | false | "프론트 URL 복사" 버튼 표시 |
disable-url-copy-message | string | '저장 후에 URL을 복사 할 수 있습니다.' | 신규(미저장) 상태에서 표시할 안내 |
고급
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
interceptor | (bag) => void | null | 기존 첨부 로드 직후 목록을 가공하는 훅 |
컬럼 (cols)
| 값 | 내용 |
|---|---|
THUMB | 썸네일 (이미지는 클릭 시 원본 뷰어, 동영상/오디오는 플레이어) |
NAME | 파일명 + 다운로드 링크 |
DESCRIPTION | 설명 입력칸 — 입력값은 첨부의 ext 필드로 저장됩니다 |
SIZE | 파일 크기(MB) |
UPLOADER | 업로더 |
UPLOAD_DATE | 업로드 일시 |
ACTION | 삭제 버튼 |
Events
| 이벤트 | 페이로드 | 설명 |
|---|---|---|
@change | 첨부 배열 | 목록 변경 시 |
@uploaded | 성공 항목 배열 | 임시 업로드 완료 시 |
@error | { code, message, file? } | 개수/용량 초과(max-count/max-file-size), 서버 필터 거부, 통신 실패 |
폐기된 props
show-header, created-dt, use-temp-file-extension, display-action, delete-btn-class, delete-btn-without-table, use-custom-sort, order-by 와 @input / @remove-calc-time 이벤트는 제거되었습니다. display-action 은 cols 에서 ACTION 을 빼는 방식으로, use-custom-sort/order-by 는 서버가 attach_sort 순으로 반환하므로 불필요합니다.
예제1. 이미지 파일 1개만 업로드
이미지 1개 업로드
html
<nv-file-upload
v-model="model"
ref-domain="unvus"
:ref-key="model.id"
:max-count="1"
accept="image/*"
/>예제2. 여러 장 + 순서 변경
html
<nv-file-upload
v-model="model"
ref-domain="product"
ref-category="list"
:ref-key="model.id"
multiple
sortable
:max-count="10"
:max-file-size-mb="20"
accept="image/*"
/>예제3. 문서 첨부 (썸네일 없이)
html
<nv-file-upload
v-model="model"
ref-domain="board"
:ref-key="model.id"
multiple
accept=".pdf,.doc,.docx,.xlsx"
:cols="['NAME', 'SIZE', 'UPLOAD_DATE', 'ACTION']"
@error="err => $q.notify({ type: 'negative', message: err.message })"
/>