1.2.11 • Published 1 year ago
file-attacher v1.2.11
※ markdown으로 작성되었습니다. md viewer plugin을 사용하거나 https://github.com/eonnine/file-attacher#fileattacher 에서 확인하세요
FileAttacher
Demo
Install
$ npm i --save-dev file-attacher
Usage
import FileAttacher from 'file-attacher';
Not use a package manager
<script src="./src/file-attacher.js"></script>
<link href="./src/file-attacher.css" rel="stylesheet" type="text/css"/>
<div id="app"></div>
<script>
const attacher = FileAttacher.create('app');
</script>
Configuration
// global
const baseOption = {...};
FileAttacher.config(baseOption);
// local
const localOption = {...};
const attacher = FileAttacher.create('element id', {...});
- 전역 설정은 모든 'FileAttacher'을 사용할 때 적용되며 각 인스턴스 생성 시 option객체를 통해 '재정의'할 수 있습니다.
- 단, 'Hook'은 Global Hook이 호출된 후 Local Hook이 실행되는 것에 주의합니다.
Option
prop | type | description | default |
---|---|---|---|
fileIds | Array<String> | 파일의 식별자를 지정합니다. 예를 들어, DataBase의 기본키가 있습니다.getRemovedIds로 삭제한 파일 식별자를 가져올 때, 이 속성에 정의한 필드에 매핑된 식별자 정보가 반환됩니다. | [] |
readonly | Boolean | 읽기 전용 모드를 사용합니다. 다운로드만 가능합니다. | false |
xhr.configure | Function | header등 xhr 통신에 관한 옵션을 설정합니다. | null |
url.fetch | String | 파일 목록을 가져올 URL | null |
layout.scroll | Boolean | 파일 목록이 줄바꿈될 때 영역을 고정하고 스크롤을 생성할 지 여부입니다. 'false'일 때 스크롤이 생성되는 대신 영역이 확장됩니다. | true |
layout.noti.use | Boolean | 알림 메세지가 상황에 맞게 자동 출력될 지 여부를 지정합니다. Hook을 이용하여 메세지를 직접 핸들링 할 수 있습니다. | true |
layout.noti.type | String | 알림 메세지가 출력되는 방식을 지정합니다. type: ['line','box'] | 'box' |
hook.allowGlobal | Boolean | config로 정의한 Global Hook을 LifeCycle에 포함할 지 결정합니다. | true |
validate.size | Number | 허용할 파일의 최대 크기(byte)를 정의합니다. | 52428800 |
validate.maxCount | Number | 등록할 수 있는 파일의 최대 개수를 정의합니다. | 20 |
validate.includes | Array<String> | 허용할 파일의 확장자를 정의합니다. | [] |
validate.excludes | Array<String> | 제외할 파일의 확장자를 정의합니다. | [] |
message.info.introduce | String | 생성된 'FileAttacher'영역에 노출되는 기본 메세지를 지정합니다. | '첨부할 파일들 드래그하세요' |
message.info.download | String | 파일 다운로드가 완료되었을 때 보여지는 메세지입니다. | '다운로드가 완료되었습니다' |
message.error.size_overflow | String | 'validator.file.size'보다 큰 파일을 등록하려 할 경우 보여지는 메세지입니다. | '허용된 크기보다 용량이 큰 파일이 포함되어 있습니다' |
message.error.count_overflow | String | 'validator.file.maxCount'보다 많은 파일을 등록하려 할 경우 보여지는 메세지입니다. | '허용된 개수를 초과하였습니다' |
message.error.invalid_extension | String | 확장자가 'validator.file.includes'에 포함되지 않거나 'validator.fiel.excludes'에 포함되는 파일을 등록하려 할 경우 보여지는 메세지입니다. | '허용되지 않은 파일 확장자가 포함되어 있습니다' |
message.error.download | String | 파일 다운로드 도중 예외가 발생했을 때 보여지는 메세지입니다. | '다운로드 중 오류가 발생했습니다' |
message.error.file_add | String | 파일 추가 도중 예외가 발생했을 때 보여지는 메세지입니다. | '파일 추가 중 오류가 발생했습니다' |
message.error.same_name | String | 동일한 이름의 파일을 추가하려고 할 때 보여지는 메세지입니다. 기존에 저장된 파일을 가져오거나 addFiles를 통해 파일을 추가할 때 적용됩니다. 새로운 파일을 추가할 때는 동일한 이름의 파일이 존재할 경우, 파일명에 넘버링이 자동으로 부여됩니다. | '동일한 이름의 파일이 존재합니다' |
Hook | 'this'를 통해 자신의 인스턴스에 접근할 수 있습니다. | ||
onError | Function | 에러 발생 시 실행됩니다. 인자 객체에 에러 관련 정보가 전달됩니다. type: ['validator', 'download'] | ({ type: 에러 타입, message: 에러 메시지, }) => null |
API
생성된 FileAttacher 인스턴스에서 제공되는 API입니다.
name | type | descrption | parameter |
---|---|---|---|
id | String | Element Id | |
fetch | Function | 파라미터 객체에 url이 없을 시 url.fetch에 등록된 URL에서 파일 목록을 가져옵니다. | { url: String, param: Object } |
getAddedCount | Function | 현재 새로 추가된 파일의 개수를 가져옵니다. | |
containsAdded | Function | 새로 추가된 파일이 존재하는지 여부를 반환합니다. | |
containsRemoved | Function | 삭제한 파일이 존재하는지 여부를 반환합니다. 새로 추가한 파일은 대상에 포함되지 않습니다. | |
getAddedFiles | Function | 새로 추가한 파일들을 Array로 가져옵니다. | |
getRemovedIds | Function | 삭제된 파일들의 id값들을 Array로 가져옵니다. 각 요소는 fileIds에서 정의한 필드에 따라 생성됩니다. | |
addFiles | Function | 알맞은 구조를 가진 파일 객체들을 목록에 추가합니다. 이 메서드를 통해 추가된 파일은 새 파일이 아닌 기존에 저장된 파일로 취급됩니다. | Array[File](https://github.com/eonnine/file-attacher#file) |
clear | Function | FilAttacher를 초기화합니다. | |
destroy | Function | FilAttacher를 제거합니다. | |
readonly | Function | 읽기 전용 모드로 변경합니다. | |
enable | Function | 모든 기능을 사용할 수 있도록 변경합니다. |
File
- FileAttacher에서 사용되는 File객체의 구조입니다.
File {
name: String,
type: String, // ex) image/png
size: Number,
src: String, // file path | file Data URIs
fileIds...
}
1.2.10
1 year ago
1.2.11
1 year ago
1.2.9
2 years ago
1.2.8
2 years ago
1.2.7
2 years ago
1.2.6
2 years ago
1.2.5
2 years ago
1.2.4
2 years ago
1.2.3
2 years ago
1.2.2
2 years ago
1.2.1
2 years ago
1.2.0
2 years ago
1.1.3
2 years ago
1.1.2
2 years ago
1.1.1
2 years ago
1.0.9
2 years ago
1.0.8
2 years ago
1.0.7
2 years ago
1.0.6
2 years ago
1.0.5
2 years ago
1.0.4
2 years ago
1.0.3
2 years ago
1.0.2
2 years ago
1.0.1
2 years ago
1.0.0
2 years ago