1.2.11 • Published 1 year ago

file-attacher v1.2.11

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year ago

※ 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

proptypedescriptiondefault
fileIdsArray<String>파일의 식별자를 지정합니다. 예를 들어, DataBase의 기본키가 있습니다.getRemovedIds로 삭제한 파일 식별자를 가져올 때, 이 속성에 정의한 필드에 매핑된 식별자 정보가 반환됩니다.[]
readonlyBoolean읽기 전용 모드를 사용합니다. 다운로드만 가능합니다.false
xhr.configureFunctionheader등 xhr 통신에 관한 옵션을 설정합니다.null
url.fetchString파일 목록을 가져올 URLnull
layout.scrollBoolean파일 목록이 줄바꿈될 때 영역을 고정하고 스크롤을 생성할 지 여부입니다. 'false'일 때 스크롤이 생성되는 대신 영역이 확장됩니다.true
layout.noti.useBoolean알림 메세지가 상황에 맞게 자동 출력될 지 여부를 지정합니다. Hook을 이용하여 메세지를 직접 핸들링 할 수 있습니다.true
layout.noti.typeString알림 메세지가 출력되는 방식을 지정합니다. type: ['line','box']'box'
hook.allowGlobalBooleanconfig로 정의한 Global Hook을 LifeCycle에 포함할 지 결정합니다.true
validate.sizeNumber허용할 파일의 최대 크기(byte)를 정의합니다.52428800
validate.maxCountNumber등록할 수 있는 파일의 최대 개수를 정의합니다.20
validate.includesArray<String>허용할 파일의 확장자를 정의합니다.[]
validate.excludesArray<String>제외할 파일의 확장자를 정의합니다.[]
message.info.introduceString생성된 'FileAttacher'영역에 노출되는 기본 메세지를 지정합니다.'첨부할 파일들 드래그하세요'
message.info.downloadString파일 다운로드가 완료되었을 때 보여지는 메세지입니다.'다운로드가 완료되었습니다'
message.error.size_overflowString'validator.file.size'보다 큰 파일을 등록하려 할 경우 보여지는 메세지입니다.'허용된 크기보다 용량이 큰 파일이 포함되어 있습니다'
message.error.count_overflowString'validator.file.maxCount'보다 많은 파일을 등록하려 할 경우 보여지는 메세지입니다.'허용된 개수를 초과하였습니다'
message.error.invalid_extensionString확장자가 'validator.file.includes'에 포함되지 않거나 'validator.fiel.excludes'에 포함되는 파일을 등록하려 할 경우 보여지는 메세지입니다.'허용되지 않은 파일 확장자가 포함되어 있습니다'
message.error.downloadString파일 다운로드 도중 예외가 발생했을 때 보여지는 메세지입니다.'다운로드 중 오류가 발생했습니다'
message.error.file_addString파일 추가 도중 예외가 발생했을 때 보여지는 메세지입니다.'파일 추가 중 오류가 발생했습니다'
message.error.same_nameString동일한 이름의 파일을 추가하려고 할 때 보여지는 메세지입니다. 기존에 저장된 파일을 가져오거나 addFiles를 통해 파일을 추가할 때 적용됩니다. 새로운 파일을 추가할 때는 동일한 이름의 파일이 존재할 경우, 파일명에 넘버링이 자동으로 부여됩니다.'동일한 이름의 파일이 존재합니다'
Hook'this'를 통해 자신의 인스턴스에 접근할 수 있습니다.
onErrorFunction에러 발생 시 실행됩니다. 인자 객체에 에러 관련 정보가 전달됩니다. type: ['validator', 'download']({   type: 에러 타입,   message: 에러 메시지, }) => null

API

  • 생성된 FileAttacher 인스턴스에서 제공되는 API입니다.

nametypedescrptionparameter
idStringElement Id
fetchFunction파라미터 객체에 url이 없을 시 url.fetch에 등록된 URL에서 파일 목록을 가져옵니다.{ url: String, param: Object }
getAddedCountFunction현재 새로 추가된 파일의 개수를 가져옵니다.
containsAddedFunction새로 추가된 파일이 존재하는지 여부를 반환합니다.
containsRemovedFunction삭제한 파일이 존재하는지 여부를 반환합니다. 새로 추가한 파일은 대상에 포함되지 않습니다.
getAddedFilesFunction새로 추가한 파일들을 Array로 가져옵니다.
getRemovedIdsFunction삭제된 파일들의 id값들을 Array로 가져옵니다. 각 요소는 fileIds에서 정의한 필드에 따라 생성됩니다.
addFilesFunction알맞은 구조를 가진 파일 객체들을 목록에 추가합니다. 이 메서드를 통해 추가된 파일은 새 파일이 아닌 기존에 저장된 파일로 취급됩니다.Array[File](https://github.com/eonnine/file-attacher#file)
clearFunctionFilAttacher를 초기화합니다.
destroyFunctionFilAttacher를 제거합니다.
readonlyFunction읽기 전용 모드로 변경합니다.
enableFunction모든 기능을 사용할 수 있도록 변경합니다.

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