dropzone README

The project's README from github.com/enyo/dropzone. As one markdown file: README.md.

Dropzone.js

CI

Dropzone is a JavaScript library that turns any HTML element into a dropzone. This means that a user can drag and drop a file onto it, and Dropzone will display file previews and upload progress, and handle the upload for you via XHR.

It's fully configurable, can be styled according to your needs and is trusted by thousands.

Dropzone Screenshot

Quickstart

Install:

$ npm install dropzone
# or with pnpm:
$ pnpm add dropzone

Use as ES6 module (recommended):

import { Dropzone } from "dropzone";
const dropzone = new Dropzone("div#myId", { url: "/file/post" });

or use as CommonJS module:

const { Dropzone } = require("dropzone");
const dropzone = new Dropzone("div#myId", { url: "/file/post" });

👉 Checkout our example implementations for different bundlers

Not using a package manager or bundler?

Use the standalone files like this:

<script src="https://unpkg.com/dropzone@6/dist/dropzone-min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/dropzone@6/dist/dropzone.css" type="text/css" />

<div class="my-dropzone"></div>

<script>
  // Dropzone has been added as a global variable.
  const dropzone = new Dropzone("div.my-dropzone", { url: "/file/post" });
</script>

⚠️ NOTE: Dropzone 6 does not support Internet Explorer. If you still need it, use 5.9.3. See the CHANGELOG for everything that changed in 6.0.0.

Repository layout

This is a monorepo. It holds the library, the documentation and the website:
packages/dropzone the library published to npm as dropzone
apps/docs the documentation, built with Docusaurus
apps/website www.dropzone.dev, built with SvelteKit 
pnpm install

pnpm build          # the library and the docs
pnpm test           # the library's unit tests
pnpm test:e2e       # the library's browser tests
pnpm dev:docs       # the documentation, locally
pnpm dev:website    # the website, locally

Building the deployable site

The website and the documentation are published together as one GitHub Pages site: the website at the root, the documentation under /docs. One command produces exactly what gets deployed, in _site/:

pnpm build:site

CI runs the same script, so what you get locally is what ships. It builds each half with its own toolchain and combines them, which means there is no manual copying step to remember or get wrong.

Community

If you need support please use the discussions section or stackoverflow with the dropzone.js tag and not the GitHub issues tracker. Only post an issue here if you think you discovered a bug.

If you have a feature request or want to discuss something, please use the discussions as well.

⚠️ Please read the contributing guidelines before you start working on Dropzone!

Main features ✅

MIT License

See the LICENSE file

dropzone (enyo/dropzone)

Searching Database…

18.4K ·GitHub
Dropzone
Что это такое?Dropzone — это JavaScript-библиотека, которая превращает любой HTML-элемент в зону перетаскивания: пользователь перетаскивает на него файлы, а библиотека показывает миниатюры и индикаторы загрузки и сама отправляет файлы через XHR.
То есть это не приложение, которое я устанавливаю — я встраиваю его в свою страницу?Именно так — это библиотека, которую вы добавляете на свою веб-страницу. На GitHub она живёт как монорепозиторий: npm-пакет 'dropzone', документация (Docusaurus) и сайт www.dropzone.dev (SvelteKit).
Как добавить его в проект?Установите его из npm и импортируйте как ES6-модуль (рекомендуется) или как CommonJS-модуль; без пакетного менеджера и сборщика можно использовать standalone-файлы. В репозитории есть ссылки на примеры подключения для разных сборщиков.
Для работы нужно что-то ещё, например бэкенд или фреймворк?Для работы — ничего, это обычный клиентский JavaScript. Для сборки самого репозитория нужны Node >= 20.19.0 и pnpm, но это нужно только при разработке.
Есть ли нюансы с браузерами, о которых стоит знать?Dropzone 6 не поддерживает Internet Explorer — если IE всё ещё нужен, используйте версию 5.9.3.
Могу ли я использовать его в коммерческих проектах?Да — Dropzone распространяется по лицензии MIT, так что вы можете свободно использовать и изменять его, в том числе в коммерческих целях.
Что он делает за меня после того, как файл перетащен?Показывает миниатюры изображений (с поддержкой High-DPI экранов), умеет загружать несколько файлов и синхронные загрузки, обновляет прогресс. Он может даже уменьшать изображения прямо в браузере перед отправкой на ваш сервер.
А очень большие файлы он потянет?Да — большие файлы поддерживаются через chunked-загрузку (отправку частями) и Amazon S3 Multipart upload.
Могу ли я оформить зону перетаскивания в стиле своего сайта?Полностью. Встроенный внешний вид — это просто тема по умолчанию, а всё остальное вы можете задать сами, переопределив обработчики событий по умолчанию.
What are similar projects?Sortable, trix, react-dropzone, pragmatic-drag-and-drop, pell, tui.calendar, draggable, PhotoSwipe
Which topics is it in?amazon-s3, file-upload, website, es6, drag-and-drop, image, javascript-library, ui-components, browser, html, ui, free
Creator
enyo
Size
11.5 MB
Stars
18.4K
Updated
CommitSep 27Release[email protected]Sep 27
Age
14y
Commits · 90 Days