Dropzone

Dropzone provides several built-in capabilities for file handling:

• File Previews: Supports image thumbnail previews via the thumbnail(file, data) callback.
• Upload Management: Handles multiple files, synchronous uploads, and progress updates.
• Large File Support: Supports chunked uploads and Amazon S3 Multipart upload.
• Image Processing: Includes browser-side image resizing before upload.
• Customization: Fully themeable by overwriting default event listeners.

You can install the library using npm, yarn, or bun. Note that this repository is a fork of the original Dropzone, and the package name is @deltablot/dropzone.

$ npm install --save @deltablot/dropzone
# or with yarn:
$ yarn add @deltablot/dropzone
# or with bun:
$ bun add @deltablot/dropzone

To use Dropzone in a modern JavaScript environment with ES6 modules, import the Dropzone class. The constructor takes two arguments: the selector for the HTML element to bind to, and an options object. A required option is url, which specifies the endpoint for file uploads via XHR.

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

You can use Dropzone directly in the browser by including the standalone CDN files. When using this method, Dropzone is available as a global variable. You must include both the minified JavaScript and the CSS files.

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

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

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

For Node.js or environments using CommonJS, require the Dropzone class from the package. The constructor takes the element selector and an options object containing the upload url.

const { Dropzone } = require("@deltablot/dropzone");
const dropzone = new Dropzone("#elementId", { url: "/file/post" });

To apply the default styling to your dropzone, import the CSS file in your stylesheet:

@import "@deltablot/dropzone/src/dropzone";

The project uses a cypress.config.js file to define the testing environment. By default, allowCypressEnv is set to false to prevent accidental exposure or usage of Cypress environment variables in tests. The e2e configuration specifies a baseUrl of http://localhost:8888 and defines the patterns for locating end-to-end and unit test specification files.

const { defineConfig } = require('cypress')

module.exports = defineConfig({
  allowCypressEnv: false,
  e2e: {
    baseUrl: 'http://localhost:8888',
     specPattern: [
      "cypress/e2e/**/*.cy.{js,jsx,ts,tsx}",
      "cypress/unit/**/*.cy.{js,jsx,ts,tsx}",
    ],
  },
})