filepond - GitLite

KO | EN

gitlite — search

#python #react #llm #android #machine-learning #deep-learning #java #nodejs #windows #kubernetes #vue #awesome-list #ios #openai

filepond

(★ 16,390)

🌊 유연하고 재미있는 JavaScript 파일 업로드 라이브러리

파일 탐색기

최종 버전 다운로드 (.zip)

- - bug_report.yml
  - config.yml
  - feature_request.yml
- FUNDING.yml
- filepond.css
- filepond.esm.js
- filepond.esm.min.js
- filepond.js
- filepond.min.css
- filepond.min.js
- am-et.js
- ar-ar.js
- az-az.js
- ca-ca.js
- cs-cz.js
- cy-cy.js
- da-dk.js
- de-de.js
- el-el.js
- en-en.js
- es-es.js
- et-ee.js
- fa_ir.js
- fi-fi.js
- fr-fr.js
- he-he.js
- hr-hr.js
- hu-hu.js
- id-id.js
- it-it.js
- ja-ja.js
- km-km.js
- ko-kr.js
- ku-ckb.js
- kur-ckb.js
- lt-lt.js
- lus-lus.js
- lv-lv.js
- ms-ms.js
- nl-nl.js
- no_nb.js
- no_nn.js
- pl-pl.js
- pt-br.js
- pt-pt.js
- ro-ro.js
- ru-ru.js
- sk-sk.js
- sl-si.js
- sr-rs.js
- sv_se.js
- tr-tr.js
- uk-ua.js
- ur-ur.js
- vi-vi.js
- zh-cn.js
- zh-hk.js
- zh-tw.js
- - assistant.css
  - browser.css
  - data.css
  - drip.css
  - drop-label.css
  - file-action-button.css
  - file-info.css
  - file-status.css
  - file-wrapper.css
  - file.css
  - hopper.css
  - item-order.css
  - item.css
  - list-scroller.css
  - list.css
  - modifiers.css
  - panel-root.css
  - panel.css
  - progress-indicator.css
  - root-order.css
  - root.css
  - styles.css
- - createApp.js
  - createAppAPI.js
  - createAppAtElement.js
  - createAppObject.js
  - createAppPlugin.js
  - filter.js
  - index.js
- index.d.ts
- tsconfig.json
.babelrc
.gitattributes
.gitignore
.nvmrc
.prettierignore
.prettierrc
banner-cli.js
banner.js
CHANGELOG.md
index.html
jest.config.js
jest.stubs.js
LICENSE
package-lock.json
package.json
README.md
rollup.config.js
rollup.scripts.js

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# [![FilePond](https://github.com/pqina/filepond-github-assets/blob/master/logo.svg)](https://pqina.nl/filepond/)
무엇이든 업로드할 수 있고, 더 빠른 업로드를 위해 이미지를 최적화하며, 훌륭하고 접근성이 뛰어나며 부드러운 사용자 경험을 제공하는 JavaScript 라이브러리입니다.
[![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/pqina/filepond/blob/master/LICENSE)
[![npm version](https://badge.fury.io/js/filepond.svg)](https://www.npmjs.com/package/filepond)
![npm](https://img.shields.io/npm/dt/filepond)
[![minzipped size](https://img.shields.io/bundlephobia/minzip/filepond)](https://bundlephobia.com/package/filepond)
[![Discord](https://img.shields.io/discord/1422126182924554291?label=discord)](https://discord.gg/KTyymsrTrX)
FilePond 어댑터는 \*\*[React](https://github.com/pqina/react-filepond)\*\*, \*\*[Vue](https://github.com/pqina/vue-filepond)\*\*, \*\*[Angular](https://github.com/pqina/ngx-filepond)\*\*, \*\*[Svelte](https://github.com/pqina/svelte-filepond)\*\*, \*\*[jQuery](https://github.com/pqina/jquery-filepond)\*\*에서 사용할 수 있습니다.
[FilePond v5 알파 버전 테스트 이용 가능](https://github.com/pqina/filepond/tree/v5)
[문서](https://pqina.nl/filepond/docs) • [Discord](https://discord.gg/KTyymsrTrX) • [예제](#live-demos)
---
[![FilePond](https://github.com/pqina/filepond-github-assets/blob/master/header.svg)](https://www.buymeacoffee.com/rikschennink/)
[커피 사주기](https://www.buymeacoffee.com/rikschennink/) • [Pintura와 함께 FilePond 사용하기](https://pqina.nl/pintura/?ref=github-filepond) • [개발 업데이트](https://rik.schenn.ink)
---
### 핵심 기능
- \*\*디렉토리\*\*, \*\*파일\*\*, blob, 로컬 URL, \*\*원격 URL\*\*, Data URI를 허용합니다.
- \*\*파일 드롭\*\*, 파일 시스템에서 선택, \*\*파일 복사 및 붙여넣기\*\* 또는 API를 사용한 파일 추가가 가능합니다.
- AJAX를 이용한 \*\*비동기 업로드\*\*, \*\*청크 업로드\*\* 지원, 파일을 base64 데이터로 인코딩하여 폼 포스트와 함께 전송할 수 있습니다.
- \*\*접근성 지원\*\*, VoiceOver 및 JAWS 같은 보조공학(AT) 소프트웨어 테스트 완료, \*\*키보드 탐색\*\* 가능.
- \*\*이미지 최적화\*\*, 자동 이미지 크기 조절, \*\*자르기(Cropping)\*\*, 필터링, \*\*EXIF 방향 수정\*\*.
- \*\*반응형\*\*, 사용 가능한 공간에 맞춰 자동으로 크기가 조절되며, \*\*모바일과 데스크톱 기기\*\* 모두에서 작동합니다.
[FilePond에 대해 더 알아보기](https://pqina.nl/filepond/)
[![](https://github.com/pqina/filepond-github-assets/blob/master/filepond-animation-01.gif?raw=true)](https://pqina.nl/filepond/)
---
### 이미지 편집 기능도 필요하신가요?
\*\*모던 JavaScript 이미지 편집기 Pintura\*\*가 바로 찾으시는 제품입니다. Pintura는 이미지의 \*\*자르기 종횡비 설정\*\*, \*\*크기 조절\*\*, \*\*회전\*\*, \*\*자르기\*\*, \*\*대칭 이동\*\*을 지원합니다. 무엇보다도 FilePond와 완벽하게 통합됩니다.
[Pintura에 대해 더 알아보기](https://pqina.nl/pintura/?ref=github-filepond)
[![](https://github.com/pqina/filepond-github-assets/blob/master/filepond_pintura.gif?raw=true)](https://pqina.nl/pintura/?ref=github-filepond)
---
### 라이브 데모
- [React](https://stackblitz.com/github/pqina/pintura-example-react?file=src%2FExampleFilePond.js)
- [Angular](https://stackblitz.com/github/pqina/pintura-example-angular?file=src%2Fapp%2Ffilepond-example%2Ffilepond-example.component.ts)
- [Svelte](https://stackblitz.com/github/pqina/pintura-example-svelte?file=src%2FApp.svelte%3AL152)
- [Vue](https://stackblitz.com/github/pqina/pintura-example-vue-3?file=src%2FExampleFilePond.vue)
### 플러그인
- [File encode](https://github.com/pqina/filepond-plugin-file-encode)
- [File rename](https://github.com/pqina/filepond-plugin-file-rename)
- [File size validation](https://github.com/pqina/filepond-plugin-file-validate-size)
- [File type validation](https://github.com/pqina/filepond-plugin-file-validate-type)
- [File metadata](https://github.com/pqina/filepond-plugin-file-metadata)
- [File poster](https://github.com/pqina/filepond-plugin-file-poster)
- [Image editor](https://github.com/pqina/filepond-plug

in-image-edit)
- [Image size validation](https://github.com/pqina/filepond-plugin-image-validate-size)
- [Image preview](https://github.com/pqina/filepond-plugin-image-preview)
- [Image crop](https://github.com/pqina/filepond-plugin-image-crop)
- [Image filter](https://github.com/pqina/filepond-plugin-image-filter)
- [Image resize](https://github.com/pqina/filepond-plugin-image-resize)
- [Image transform](https://github.com/pqina/filepond-plugin-image-transform)
- [Image EXIF orientation](https://github.com/pqina/filepond-plugin-image-exif-orientation)
- [Image overlay](https://github.com/nielsboogaard/filepond-plugin-image-overlay) ([nielsboogaard/filepond-plugin-image-overlay](https://github.com/nielsboogaard/filepond-plugin-image-overlay))
- [Media preview](https://github.com/nielsboogaard/filepond-plugin-media-preview) ([nielsboogaard/filepond-plugin-media-preview](https://github.com/nielsboogaard/filepond-plugin-media-preview))
- [Media preview + PDF preview](https://github.com/ErnestBrandi/filepond-plugin-media-preview) ([ErnestBrandi/filepond-plugin-media-preview](https://github.com/ErnestBrandi/filepond-plugin-media-preview))
- [Get file](https://github.com/nielsboogaard/filepond-plugin-get-file) ([nielsboogaard/filepond-plugin-get-file](https://github.com/nielsboogaard/filepond-plugin-get-file))
- [Zip Directory Uploads](https://github.com/tzsk/filepond-plugin-zipper) ([tzsk/filepond-plugin-zipper](https://github.com/tzsk/filepond-plugin-zipper))
- [PDF Preview](https://github.com/Adri-Glez/filepond-plugin-pdf-preview) ([Adri-Glez/filepond-plugin-pdf-preview](https://github.com/Adri-Glez/filepond-plugin-pdf-preview))
- [PDF Convert](https://github.com/alexandreDavid/filepond-plugin-pdf-convert) ([alexandreDavid/filepond-plugin-pdf-convert](https://github.com/alexandreDavid/filepond-plugin-pdf-convert))
### Adapters
- [React](https://github.com/pqina/react-filepond)
- [Vue](https://github.com/pqina/vue-filepond)
- [Svelte](https://github.com/pqina/svelte-filepond)
- [jQuery](https://github.com/pqina/jquery-filepond)
- [Angular](https://github.com/pqina/ngx-filepond)
- [Angular 1](https://github.com/johnnyasantoss/angularjs-filepond) ([johnnyasantoss/angularjs-filepond](https://github.com/johnnyasantoss/angularjs-filepond))
- [Blazor](https://github.com/soenneker/soenneker.blazor.filepond) ([soenneker/soenneker.blazor.filepond](https://github.com/soenneker/soenneker.blazor.filepond))
- [Ember](https://github.com/alexdiliberto/ember-filepond) ([alexdiliberto/ember-filepond](https://github.com/alexdiliberto/ember-filepond))
### Backend
- [PHP](https://github.com/pqina/filepond-boilerplate-php)
- [Django](https://github.com/ImperialCollegeLondon/django-drf-filepond) ([ImperialCollegeLondon/django-drf-filepond](https://github.com/ImperialCollegeLondon/django-drf-filepond))
- [Laravel](https://github.com/Sopamo/laravel-filepond) ([Sopamo/laravel-filepond](https://github.com/Sopamo/laravel-filepond))
- [Laravel](https://github.com/Albert221/laravel-filepond) ([Albert221/laravel-filepond](https://github.com/Albert221/laravel-filepond))
- [SilverStripe](https://github.com/lekoala/silverstripe-filepond) ([lekoala/silverstripe-filepond](https://github.com/lekoala/silverstripe-filepond))
- [Ruby on Rails](https://github.com/Code-With-Rails/filepond-rails) ([Code-With-Rails/filepond-rails](https://github.com/Code-With-Rails/filepond-rails))
## Quick Start
npm을 사용하여 설치:
```bash
npm install filepond
```
그런 다음 프로젝트에서 임포트합니다:
```js
import \* as FilePond from 'filepond';
// Create a multi file upload component
const pond = FilePond.create({
multiple: true,
name: 'filepond',
});
// Add it to the DOM
document.body.appendChild(pond.element);
```
또는 CDN을 통해 가져옵니다:
```html

CDN을 통한 FilePond 사용

```
[Getting started with FilePond](https://pqina.nl/filepond/docs/patterns/getting-started/)
## Internationalization
The [locale folder](./locale/) contains different language files, PR's are welcome, you can use locale files like this:
```js
import pt\_BR from 'filepond/locale/pt-br.js';
FilePond.setOptions(pt\_BR);
```
## Contributing
현재 테스트 커버리지는 아주 좋지는 않으며, 약 65% 정도입니다. 풀 리퀘스트(pull request)를 수락하려면 테스트가 더 개선되어야 하므로, 테스트 개선을 위한 어떠한 도움이라도 대단히 환영합니다.
테스트는 Jest를 기반으로 하며 `npm run test`로 실행할 수 있습니다.
라이브러리를 빌드하려면 `npm run build`를 실행하세요.
## Publications
- [Using FilePond with NodeJS](https://www.infoworld.com/article/3627248/how-to-use-filepond-with-nodejs.html)
- [Applying Watermarks to Images with FilePond](https://pqina.nl/blog/applying-watermarks-to-images-with-filepond/)
- [Generating Image Thumbnails in the Browser using JavaScript and FilePond](https://dev.to/pqina/generating-image-thumbnails-in-the-browser-using-javascript-and-filepond-10b8)
- [How to upload files with Vue and FilePond](https://dev.to/pqina/how-to-upload-files-with-vue-and-filepond-1m02)
- [Smooth file uploading with React and FilePond](https://itnext.io/uploading-files-with-react-and-filepond-f8a798308557)
- [5 interesting technical challenges I faced while building FilePond](https://itnext.io/filepond-frontend-trickery-a3073c934c77)
- [Image uploads with Laravel and FilePond](https://devdojo.com/episode/image-uploads-with-laravel-and-filepond)
- [Integrating FilePond with Ember](https://alexdiliberto.com/ember-filepond/)
- [FilePond launch day post-mortem](https://pqina.nl/blog/filepond-launch-day-post-mortem)
- [FilePond on ProductHunt](https://www.producthunt.com/posts/filepond-js)
### Browser Compatibility
FilePond는 다양한 데스크톱 및 모바일 브라우저와 호환되며, 명시적으로 지원하는 가장 오래된 브라우저는 IE11입니다. 최적의 크로스 브라우저 지원을 위해 프로젝트에 [FilePond Polyfill](https://github.com/pqina/filepond-polyfill)과 [Babel polyfill](https://babeljs.io/docs/en/babel-polyfill)을 추가하세요.
FilePond는 호환성 테스트를 위해 [BrowserStack](https://www.browserstack.com/)을 사용합니다.
[![BrowserStack](https://github.com/pqina/filepond-github-assets/blob/master/browserstack-logo.svg)](https://www.browserstack.com/)
## License
\*\*소스 파일의 면책 조항을 제거하거나 변경하지 마세요\*\*
MIT License
Copyright (c) 2020 PQINA | Rik Schennink
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.