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 上它以 monorepo 的形式存在：包括 npm 包 'dropzone'、文档（Docusaurus）和 www.dropzone.dev 网站（SvelteKit）。
怎么把它加到项目里？从 npm 安装后，可以作为 ES6 模块（推荐）或 CommonJS 模块导入；如果没有包管理器或打包工具，可以使用独立文件。这个仓库还提供了针对不同打包工具的示例实现链接。
运行它还需要别的东西吗，比如后端或框架？运行本身什么都不需要——它是纯客户端 JavaScript。构建这个仓库本身需要 Node >= 20.19.0 和 pnpm，但那只是开发用的。
浏览器方面有什么需要留意的地方吗？Dropzone 6 不支持 Internet Explorer——如果你还需要 IE，请使用 5.9.3 版本。
可以在商业项目里使用吗？可以——Dropzone 采用 MIT 许可证，你可以自由使用和修改，包括商业用途。
文件拖进来之后，它能帮我处理什么？图片缩略图预览（支持高分辨率屏幕）、多文件和同步上传，以及进度更新。它甚至可以在图片上传到你的服务器之前，直接在浏览器里调整图片尺寸。
它能处理特别大的文件吗？可以——它通过分块上传（把文件拆成小块发送）和 Amazon S3 Multipart 上传来支持大文件。
我可以重新设计拖放区的样式来配合我的网站吗？完全可以。自带的样式只是默认主题，你可以通过覆盖默认的事件监听器来自定义一切。
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