🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

@uppy/drag-drop

Package Overview
Dependencies
Maintainers
8
Versions
90
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@uppy/drag-drop - npm Package Compare versions

Comparing version

2.0.6
to
2.0.7

lib/DragDrop.js
lib/DragDrop.js.map
lib/package.json
src/DragDrop.jsx

7

CHANGELOG.md
# @uppy/drag-drop
## 2.0.7
Released: 2022-04-27
Included in: Uppy v2.9.4
- @uppy/drag-drop: refactor to ESM (Antoine du Hamel / #3647)
## 2.0.6

@@ -4,0 +11,0 @@

263

lib/index.js
"use strict";
var _class, _temp;
const {
UIPlugin
} = require('@uppy/core');
const toArray = require('@uppy/utils/lib/toArray');
const isDragDropSupported = require('@uppy/utils/lib/isDragDropSupported');
const getDroppedFiles = require('@uppy/utils/lib/getDroppedFiles');
const {
h
} = require('preact');
const locale = require('./locale.js');
/**
* Drag & Drop plugin
*
*/
module.exports = (_temp = _class = class DragDrop extends UIPlugin {
// eslint-disable-next-line global-require
constructor(uppy, opts) {
super(uppy, opts);
this.handleDrop = async event => {
var _this$opts$onDrop, _this$opts;
event.preventDefault();
event.stopPropagation();
clearTimeout(this.removeDragOverClassTimeout); // Remove dragover class
this.setPluginState({
isDraggingOver: false
});
const logDropError = error => {
this.uppy.log(error, 'error');
}; // Add all dropped files
const files = await getDroppedFiles(event.dataTransfer, {
logDropError
});
if (files.length > 0) {
this.uppy.log('[DragDrop] Files dropped');
this.addFiles(files);
}
(_this$opts$onDrop = (_this$opts = this.opts).onDrop) == null ? void 0 : _this$opts$onDrop.call(_this$opts, event);
};
this.type = 'acquirer';
this.id = this.opts.id || 'DragDrop';
this.title = 'Drag & Drop';
this.defaultLocale = locale; // Default options
const defaultOpts = {
target: null,
inputName: 'files[]',
width: '100%',
height: '100%',
note: null
}; // Merge default options with the ones set by user
this.opts = { ...defaultOpts,
...opts
};
this.i18nInit(); // Check for browser dragDrop support
this.isDragDropSupported = isDragDropSupported();
this.removeDragOverClassTimeout = null; // Bind `this` to class methods
this.onInputChange = this.onInputChange.bind(this);
this.handleDragOver = this.handleDragOver.bind(this);
this.handleDragLeave = this.handleDragLeave.bind(this);
this.handleDrop = this.handleDrop.bind(this);
this.addFiles = this.addFiles.bind(this);
this.render = this.render.bind(this);
}
addFiles(files) {
const descriptors = files.map(file => ({
source: this.id,
name: file.name,
type: file.type,
data: file,
meta: {
// path of the file relative to the ancestor directory the user selected.
// e.g. 'docs/Old Prague/airbnb.pdf'
relativePath: file.relativePath || null
}
}));
try {
this.uppy.addFiles(descriptors);
} catch (err) {
this.uppy.log(err);
}
}
onInputChange(event) {
const files = toArray(event.target.files);
if (files.length > 0) {
this.uppy.log('[DragDrop] Files selected through input');
this.addFiles(files);
} // We clear the input after a file is selected, because otherwise
// change event is not fired in Chrome and Safari when a file
// with the same name is selected.
// ___Why not use value="" on <input/> instead?
// Because if we use that method of clearing the input,
// Chrome will not trigger change if we drop the same file twice (Issue #768).
// eslint-disable-next-line no-param-reassign
event.target.value = null;
}
handleDragOver(event) {
var _this$opts$onDragOver, _this$opts2;
event.preventDefault();
event.stopPropagation(); // Check if the "type" of the datatransfer object includes files. If not, deny drop.
const {
types
} = event.dataTransfer;
const hasFiles = types.some(type => type === 'Files');
const {
allowNewUpload
} = this.uppy.getState();
if (!hasFiles || !allowNewUpload) {
event.dataTransfer.dropEffect = 'none';
clearTimeout(this.removeDragOverClassTimeout);
return;
} // Add a small (+) icon on drop
// (and prevent browsers from interpreting this as files being _moved_ into the browser
// https://github.com/transloadit/uppy/issues/1978)
//
// eslint-disable-next-line no-param-reassign
event.dataTransfer.dropEffect = 'copy';
clearTimeout(this.removeDragOverClassTimeout);
this.setPluginState({
isDraggingOver: true
});
(_this$opts$onDragOver = (_this$opts2 = this.opts).onDragOver) == null ? void 0 : _this$opts$onDragOver.call(_this$opts2, event);
}
handleDragLeave(event) {
var _this$opts$onDragLeav, _this$opts3;
event.preventDefault();
event.stopPropagation();
clearTimeout(this.removeDragOverClassTimeout); // Timeout against flickering, this solution is taken from drag-drop library.
// Solution with 'pointer-events: none' didn't work across browsers.
this.removeDragOverClassTimeout = setTimeout(() => {
this.setPluginState({
isDraggingOver: false
});
}, 50);
(_this$opts$onDragLeav = (_this$opts3 = this.opts).onDragLeave) == null ? void 0 : _this$opts$onDragLeav.call(_this$opts3, event);
}
renderHiddenFileInput() {
const {
restrictions
} = this.uppy.opts;
return h("input", {
className: "uppy-DragDrop-input",
type: "file",
hidden: true,
ref: ref => {
this.fileInputRef = ref;
},
name: this.opts.inputName,
multiple: restrictions.maxNumberOfFiles !== 1,
accept: restrictions.allowedFileTypes,
onChange: this.onInputChange
});
}
static renderArrowSvg() {
return h("svg", {
"aria-hidden": "true",
focusable: "false",
className: "uppy-c-icon uppy-DragDrop-arrow",
width: "16",
height: "16",
viewBox: "0 0 16 16"
}, h("path", {
d: "M11 10V0H5v10H2l6 6 6-6h-3zm0 0",
fillRule: "evenodd"
}));
}
renderLabel() {
return h("div", {
className: "uppy-DragDrop-label"
}, this.i18nArray('dropHereOr', {
browse: h("span", {
className: "uppy-DragDrop-browse"
}, this.i18n('browse'))
}));
}
renderNote() {
return h("span", {
className: "uppy-DragDrop-note"
}, this.opts.note);
}
render() {
const dragDropClass = `uppy-Root
uppy-u-reset
uppy-DragDrop-container
${this.isDragDropSupported ? 'uppy-DragDrop--isDragDropSupported' : ''}
${this.getPluginState().isDraggingOver ? 'uppy-DragDrop--isDraggingOver' : ''}
`;
const dragDropStyle = {
width: this.opts.width,
height: this.opts.height
};
return h("button", {
type: "button",
className: dragDropClass,
style: dragDropStyle,
onClick: () => this.fileInputRef.click(),
onDragOver: this.handleDragOver,
onDragLeave: this.handleDragLeave,
onDrop: this.handleDrop
}, this.renderHiddenFileInput(), h("div", {
className: "uppy-DragDrop-inner"
}, DragDrop.renderArrowSvg(), this.renderLabel(), this.renderNote()));
}
install() {
const {
target
} = this.opts;
this.setPluginState({
isDraggingOver: false
});
if (target) {
this.mount(target, this);
}
}
uninstall() {
this.unmount();
}
}, _class.VERSION = "2.0.6", _temp);
module.exports = require("./DragDrop.js");

7

package.json
{
"name": "@uppy/drag-drop",
"description": "Droppable zone UI for Uppy. Drag and drop files into it to upload.",
"version": "2.0.6",
"version": "2.0.7",
"license": "MIT",
"main": "lib/index.js",
"style": "dist/style.min.css",
"type": "module",
"types": "types/index.d.ts",

@@ -28,8 +29,8 @@ "keywords": [

"dependencies": {
"@uppy/utils": "^4.0.5",
"@uppy/utils": "^4.0.7",
"preact": "^10.5.13"
},
"peerDependencies": {
"@uppy/core": "^2.1.4"
"@uppy/core": "^2.1.9"
}
}

241

src/index.js

@@ -1,240 +0,1 @@

const { UIPlugin } = require('@uppy/core')
const toArray = require('@uppy/utils/lib/toArray')
const isDragDropSupported = require('@uppy/utils/lib/isDragDropSupported')
const getDroppedFiles = require('@uppy/utils/lib/getDroppedFiles')
const { h } = require('preact')
const locale = require('./locale.js')
/**
* Drag & Drop plugin
*
*/
module.exports = class DragDrop extends UIPlugin {
// eslint-disable-next-line global-require
static VERSION = require('../package.json').version
constructor (uppy, opts) {
super(uppy, opts)
this.type = 'acquirer'
this.id = this.opts.id || 'DragDrop'
this.title = 'Drag & Drop'
this.defaultLocale = locale
// Default options
const defaultOpts = {
target: null,
inputName: 'files[]',
width: '100%',
height: '100%',
note: null,
}
// Merge default options with the ones set by user
this.opts = { ...defaultOpts, ...opts }
this.i18nInit()
// Check for browser dragDrop support
this.isDragDropSupported = isDragDropSupported()
this.removeDragOverClassTimeout = null
// Bind `this` to class methods
this.onInputChange = this.onInputChange.bind(this)
this.handleDragOver = this.handleDragOver.bind(this)
this.handleDragLeave = this.handleDragLeave.bind(this)
this.handleDrop = this.handleDrop.bind(this)
this.addFiles = this.addFiles.bind(this)
this.render = this.render.bind(this)
}
addFiles (files) {
const descriptors = files.map((file) => ({
source: this.id,
name: file.name,
type: file.type,
data: file,
meta: {
// path of the file relative to the ancestor directory the user selected.
// e.g. 'docs/Old Prague/airbnb.pdf'
relativePath: file.relativePath || null,
},
}))
try {
this.uppy.addFiles(descriptors)
} catch (err) {
this.uppy.log(err)
}
}
onInputChange (event) {
const files = toArray(event.target.files)
if (files.length > 0) {
this.uppy.log('[DragDrop] Files selected through input')
this.addFiles(files)
}
// We clear the input after a file is selected, because otherwise
// change event is not fired in Chrome and Safari when a file
// with the same name is selected.
// ___Why not use value="" on <input/> instead?
// Because if we use that method of clearing the input,
// Chrome will not trigger change if we drop the same file twice (Issue #768).
// eslint-disable-next-line no-param-reassign
event.target.value = null
}
handleDragOver (event) {
event.preventDefault()
event.stopPropagation()
// Check if the "type" of the datatransfer object includes files. If not, deny drop.
const { types } = event.dataTransfer
const hasFiles = types.some(type => type === 'Files')
const { allowNewUpload } = this.uppy.getState()
if (!hasFiles || !allowNewUpload) {
event.dataTransfer.dropEffect = 'none'
clearTimeout(this.removeDragOverClassTimeout)
return
}
// Add a small (+) icon on drop
// (and prevent browsers from interpreting this as files being _moved_ into the browser
// https://github.com/transloadit/uppy/issues/1978)
//
// eslint-disable-next-line no-param-reassign
event.dataTransfer.dropEffect = 'copy'
clearTimeout(this.removeDragOverClassTimeout)
this.setPluginState({ isDraggingOver: true })
this.opts.onDragOver?.(event)
}
handleDragLeave (event) {
event.preventDefault()
event.stopPropagation()
clearTimeout(this.removeDragOverClassTimeout)
// Timeout against flickering, this solution is taken from drag-drop library.
// Solution with 'pointer-events: none' didn't work across browsers.
this.removeDragOverClassTimeout = setTimeout(() => {
this.setPluginState({ isDraggingOver: false })
}, 50)
this.opts.onDragLeave?.(event)
}
handleDrop = async (event) => {
event.preventDefault()
event.stopPropagation()
clearTimeout(this.removeDragOverClassTimeout)
// Remove dragover class
this.setPluginState({ isDraggingOver: false })
const logDropError = (error) => {
this.uppy.log(error, 'error')
}
// Add all dropped files
const files = await getDroppedFiles(event.dataTransfer, { logDropError })
if (files.length > 0) {
this.uppy.log('[DragDrop] Files dropped')
this.addFiles(files)
}
this.opts.onDrop?.(event)
}
renderHiddenFileInput () {
const { restrictions } = this.uppy.opts
return (
<input
className="uppy-DragDrop-input"
type="file"
hidden
ref={(ref) => { this.fileInputRef = ref }}
name={this.opts.inputName}
multiple={restrictions.maxNumberOfFiles !== 1}
accept={restrictions.allowedFileTypes}
onChange={this.onInputChange}
/>
)
}
static renderArrowSvg () {
return (
<svg aria-hidden="true" focusable="false" className="uppy-c-icon uppy-DragDrop-arrow" width="16" height="16" viewBox="0 0 16 16">
<path d="M11 10V0H5v10H2l6 6 6-6h-3zm0 0" fillRule="evenodd" />
</svg>
)
}
renderLabel () {
return (
<div className="uppy-DragDrop-label">
{this.i18nArray('dropHereOr', {
browse: <span className="uppy-DragDrop-browse">{this.i18n('browse')}</span>,
})}
</div>
)
}
renderNote () {
return (
<span className="uppy-DragDrop-note">{this.opts.note}</span>
)
}
render () {
const dragDropClass = `uppy-Root
uppy-u-reset
uppy-DragDrop-container
${this.isDragDropSupported ? 'uppy-DragDrop--isDragDropSupported' : ''}
${this.getPluginState().isDraggingOver ? 'uppy-DragDrop--isDraggingOver' : ''}
`
const dragDropStyle = {
width: this.opts.width,
height: this.opts.height,
}
return (
<button
type="button"
className={dragDropClass}
style={dragDropStyle}
onClick={() => this.fileInputRef.click()}
onDragOver={this.handleDragOver}
onDragLeave={this.handleDragLeave}
onDrop={this.handleDrop}
>
{this.renderHiddenFileInput()}
<div className="uppy-DragDrop-inner">
{DragDrop.renderArrowSvg()}
{this.renderLabel()}
{this.renderNote()}
</div>
</button>
)
}
install () {
const { target } = this.opts
this.setPluginState({
isDraggingOver: false,
})
if (target) {
this.mount(target, this)
}
}
uninstall () {
this.unmount()
}
}
export { default } from './DragDrop.jsx'

2

src/locale.js

@@ -1,2 +0,2 @@

module.exports = {
export default {
strings: {

@@ -3,0 +3,0 @@ // Text to show on the droppable area.

lib/index.js.map

Sorry, the diff of this file is not supported yet

lib/locale.js.map

Sorry, the diff of this file is not supported yet