New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

svelte-file-dropzone

Package Overview
Dependencies
Maintainers
1
Versions
42
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

svelte-file-dropzone - npm Package Compare versions

Comparing version

0.0.14
to
0.0.15-dev.0

src/index.svelte

1075

dist/index.js
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global = global || self, global.FileDropzone = factory());
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.FileDropzone = factory());
}(this, (function () { 'use strict';
function noop() { }
function assign(tar, src) {
// @ts-ignore
for (const k in src)
tar[k] = src[k];
return tar;
}
function run(fn) {

@@ -29,42 +23,5 @@ return fn();

}
function create_slot(definition, ctx, $$scope, fn) {
if (definition) {
const slot_ctx = get_slot_context(definition, ctx, $$scope, fn);
return definition[0](slot_ctx);
}
function is_empty(obj) {
return Object.keys(obj).length === 0;
}
function get_slot_context(definition, ctx, $$scope, fn) {
return definition[1] && fn
? assign($$scope.ctx.slice(), definition[1](fn(ctx)))
: $$scope.ctx;
}
function get_slot_changes(definition, $$scope, dirty, fn) {
if (definition[2] && fn) {
const lets = definition[2](fn(dirty));
if ($$scope.dirty === undefined) {
return lets;
}
if (typeof lets === 'object') {
const merged = [];
const len = Math.max($$scope.dirty.length, lets.length);
for (let i = 0; i < len; i += 1) {
merged[i] = $$scope.dirty[i] | lets[i];
}
return merged;
}
return $$scope.dirty | lets;
}
return $$scope.dirty;
}
function update_slot(slot, slot_definition, ctx, $$scope, dirty, get_slot_changes_fn, get_slot_context_fn) {
const slot_changes = get_slot_changes(slot_definition, $$scope, dirty, get_slot_changes_fn);
if (slot_changes) {
const slot_context = get_slot_context(slot_definition, ctx, $$scope, get_slot_context_fn);
slot.p(slot_context, slot_changes);
}
}
function append(target, node) {
target.appendChild(node);
}
function insert(target, node, anchor) {

@@ -76,32 +33,8 @@ target.insertBefore(node, anchor || null);

}
function element(name) {
return document.createElement(name);
}
function text(data) {
return document.createTextNode(data);
}
function space() {
return text(' ');
}
function listen(node, event, handler, options) {
node.addEventListener(event, handler, options);
return () => node.removeEventListener(event, handler, options);
}
function attr(node, attribute, value) {
if (value == null)
node.removeAttribute(attribute);
else if (node.getAttribute(attribute) !== value)
node.setAttribute(attribute, value);
}
function children(element) {
return Array.from(element.childNodes);
}
function set_style(node, key, value, important) {
node.style.setProperty(key, value, important ? 'important' : '');
}
function custom_event(type, detail) {
const e = document.createEvent('CustomEvent');
e.initCustomEvent(type, false, false, detail);
return e;
}

@@ -112,27 +45,2 @@ let current_component;

}
function get_current_component() {
if (!current_component)
throw new Error(`Function called outside component initialization`);
return current_component;
}
function onMount(fn) {
get_current_component().$$.on_mount.push(fn);
}
function onDestroy(fn) {
get_current_component().$$.on_destroy.push(fn);
}
function createEventDispatcher() {
const component = get_current_component();
return (type, detail) => {
const callbacks = component.$$.callbacks[type];
if (callbacks) {
// TODO are there situations where events could be dispatched
// in a server (non-DOM) environment?
const event = custom_event(type, detail);
callbacks.slice().forEach(fn => {
fn.call(component, event);
});
}
};
}

@@ -168,2 +76,3 @@ const dirty_components = [];

}
set_current_component(null);
dirty_components.length = 0;

@@ -203,3 +112,2 @@ while (binding_callbacks.length)

const outroing = new Set();
let outros;
function transition_in(block, local) {

@@ -211,24 +119,2 @@ if (block && block.i) {

}
function transition_out(block, local, detach, callback) {
if (block && block.o) {
if (outroing.has(block))
return;
outroing.add(block);
outros.c.push(() => {
outroing.delete(block);
if (callback) {
if (detach)
block.d(1);
callback();
}
});
block.o(local);
}
}
const globals = (typeof window !== 'undefined'
? window
: typeof globalThis !== 'undefined'
? globalThis
: global);
function mount_component(component, target, anchor) {

@@ -291,3 +177,4 @@ const { fragment, on_mount, on_destroy, after_update } = component.$$;

callbacks: blank_object(),
dirty
dirty,
skip_bound: false
};

@@ -299,3 +186,3 @@ let ready = false;

if ($$.ctx && not_equal($$.ctx[i], $$.ctx[i] = value)) {
if ($$.bound[i])
if (!$$.skip_bound && $$.bound[i])
$$.bound[i](value);

@@ -331,2 +218,5 @@ if (ready)

}
/**
* Base class for Svelte components. Used when dev=false.
*/
class SvelteComponent {

@@ -346,572 +236,28 @@ $destroy() {

}
$set() {
// overridden by instance, if it has props
}
}
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
function __awaiter(thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
}
function __generator(thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (_) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
}
function __read(o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
$set($$props) {
if (this.$$set && !is_empty($$props)) {
this.$$.skip_bound = true;
this.$$set($$props);
this.$$.skip_bound = false;
}
finally { if (e) throw e.error; }
}
return ar;
}
function __spread() {
for (var ar = [], i = 0; i < arguments.length; i++)
ar = ar.concat(__read(arguments[i]));
return ar;
}
/* src/index.svelte generated by Svelte v3.31.0 */
var COMMON_MIME_TYPES = new Map([
['avi', 'video/avi'],
['gif', 'image/gif'],
['ico', 'image/x-icon'],
['jpeg', 'image/jpeg'],
['jpg', 'image/jpeg'],
['mkv', 'video/x-matroska'],
['mov', 'video/quicktime'],
['mp4', 'video/mp4'],
['pdf', 'application/pdf'],
['png', 'image/png'],
['zip', 'application/zip'],
['doc', 'application/msword'],
['docx', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document']
]);
function toFileWithPath(file, path) {
var f = withMimeType(file);
if (typeof f.path !== 'string') { // on electron, path is already set to the absolute path
var webkitRelativePath = file.webkitRelativePath;
Object.defineProperty(f, 'path', {
value: typeof path === 'string'
? path
// If <input webkitdirectory> is set,
// the File will have a {webkitRelativePath} property
// https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory
: typeof webkitRelativePath === 'string' && webkitRelativePath.length > 0
? webkitRelativePath
: file.name,
writable: false,
configurable: false,
enumerable: true
});
}
return f;
}
function withMimeType(file) {
var name = file.name;
var hasExtension = name && name.lastIndexOf('.') !== -1;
if (hasExtension && !file.type) {
var ext = name.split('.')
.pop().toLowerCase();
var type = COMMON_MIME_TYPES.get(ext);
if (type) {
Object.defineProperty(file, 'type', {
value: type,
writable: false,
configurable: false,
enumerable: true
});
}
}
return file;
}
var FILES_TO_IGNORE = [
// Thumbnail cache files for macOS and Windows
'.DS_Store',
'Thumbs.db' // Windows
];
/**
* Convert a DragEvent's DataTrasfer object to a list of File objects
* NOTE: If some of the items are folders,
* everything will be flattened and placed in the same list but the paths will be kept as a {path} property.
* @param evt
*/
function fromEvent(evt) {
return __awaiter(this, void 0, void 0, function () {
return __generator(this, function (_a) {
return [2 /*return*/, isDragEvt(evt) && evt.dataTransfer
? getDataTransferFiles(evt.dataTransfer, evt.type)
: getInputFiles(evt)];
});
});
}
function isDragEvt(value) {
return !!value.dataTransfer;
}
function getInputFiles(evt) {
var files = isInput(evt.target)
? evt.target.files
? fromList(evt.target.files)
: []
: [];
return files.map(function (file) { return toFileWithPath(file); });
}
function isInput(value) {
return value !== null;
}
function getDataTransferFiles(dt, type) {
return __awaiter(this, void 0, void 0, function () {
var items, files;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
if (!dt.items) return [3 /*break*/, 2];
items = fromList(dt.items)
.filter(function (item) { return item.kind === 'file'; });
// According to https://html.spec.whatwg.org/multipage/dnd.html#dndevents,
// only 'dragstart' and 'drop' has access to the data (source node)
if (type !== 'drop') {
return [2 /*return*/, items];
}
return [4 /*yield*/, Promise.all(items.map(toFilePromises))];
case 1:
files = _a.sent();
return [2 /*return*/, noIgnoredFiles(flatten(files))];
case 2: return [2 /*return*/, noIgnoredFiles(fromList(dt.files)
.map(function (file) { return toFileWithPath(file); }))];
}
});
});
}
function noIgnoredFiles(files) {
return files.filter(function (file) { return FILES_TO_IGNORE.indexOf(file.name) === -1; });
}
// IE11 does not support Array.from()
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from#Browser_compatibility
// https://developer.mozilla.org/en-US/docs/Web/API/FileList
// https://developer.mozilla.org/en-US/docs/Web/API/DataTransferItemList
function fromList(items) {
var files = [];
// tslint:disable: prefer-for-of
for (var i = 0; i < items.length; i++) {
var file = items[i];
files.push(file);
}
return files;
}
// https://developer.mozilla.org/en-US/docs/Web/API/DataTransferItem
function toFilePromises(item) {
if (typeof item.webkitGetAsEntry !== 'function') {
return fromDataTransferItem(item);
}
var entry = item.webkitGetAsEntry();
// Safari supports dropping an image node from a different window and can be retrieved using
// the DataTransferItem.getAsFile() API
// NOTE: FileSystemEntry.file() throws if trying to get the file
if (entry && entry.isDirectory) {
return fromDirEntry(entry);
}
return fromDataTransferItem(item);
}
function flatten(items) {
return items.reduce(function (acc, files) { return __spread(acc, (Array.isArray(files) ? flatten(files) : [files])); }, []);
}
function fromDataTransferItem(item) {
var file = item.getAsFile();
if (!file) {
return Promise.reject(item + " is not a File");
}
var fwp = toFileWithPath(file);
return Promise.resolve(fwp);
}
// https://developer.mozilla.org/en-US/docs/Web/API/FileSystemEntry
function fromEntry(entry) {
return __awaiter(this, void 0, void 0, function () {
return __generator(this, function (_a) {
return [2 /*return*/, entry.isDirectory ? fromDirEntry(entry) : fromFileEntry(entry)];
});
});
}
// https://developer.mozilla.org/en-US/docs/Web/API/FileSystemDirectoryEntry
function fromDirEntry(entry) {
var reader = entry.createReader();
return new Promise(function (resolve, reject) {
var entries = [];
function readEntries() {
var _this = this;
// https://developer.mozilla.org/en-US/docs/Web/API/FileSystemDirectoryEntry/createReader
// https://developer.mozilla.org/en-US/docs/Web/API/FileSystemDirectoryReader/readEntries
reader.readEntries(function (batch) { return __awaiter(_this, void 0, void 0, function () {
var files, err_1, items;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
if (!!batch.length) return [3 /*break*/, 5];
_a.label = 1;
case 1:
_a.trys.push([1, 3, , 4]);
return [4 /*yield*/, Promise.all(entries)];
case 2:
files = _a.sent();
resolve(files);
return [3 /*break*/, 4];
case 3:
err_1 = _a.sent();
reject(err_1);
return [3 /*break*/, 4];
case 4: return [3 /*break*/, 6];
case 5:
items = Promise.all(batch.map(fromEntry));
entries.push(items);
// Continue reading
readEntries();
_a.label = 6;
case 6: return [2 /*return*/];
}
});
}); }, function (err) {
reject(err);
});
}
readEntries();
});
}
// https://developer.mozilla.org/en-US/docs/Web/API/FileSystemFileEntry
function fromFileEntry(entry) {
return __awaiter(this, void 0, void 0, function () {
return __generator(this, function (_a) {
return [2 /*return*/, new Promise(function (resolve, reject) {
entry.file(function (file) {
var fwp = toFileWithPath(file, entry.fullPath);
resolve(fwp);
}, function (err) {
reject(err);
});
})];
});
});
}
/**
* Check if the provided file type should be accepted by the input with accept attribute.
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#attr-accept
*
* Inspired by https://github.com/enyo/dropzone
*
* @param file {File} https://developer.mozilla.org/en-US/docs/Web/API/File
* @param acceptedFiles {string}
* @returns {boolean}
*/
function accepts(file, acceptedFiles) {
if (file && acceptedFiles) {
const acceptedFilesArray = Array.isArray(acceptedFiles)
? acceptedFiles
: acceptedFiles.split(",");
const fileName = file.name || "";
const mimeType = (file.type || "").toLowerCase();
const baseMimeType = mimeType.replace(/\/.*$/, "");
return acceptedFilesArray.some((type) => {
const validType = type.trim().toLowerCase();
if (validType.charAt(0) === ".") {
return fileName.toLowerCase().endsWith(validType);
} else if (validType.endsWith("/*")) {
// This is something like a image/* mime type
return baseMimeType === validType.replace(/\/.*$/, "");
}
return mimeType === validType;
});
}
return true;
}
// Error codes
const FILE_INVALID_TYPE = "file-invalid-type";
const FILE_TOO_LARGE = "file-too-large";
const FILE_TOO_SMALL = "file-too-small";
const TOO_MANY_FILES = "too-many-files";
// File Errors
const getInvalidTypeRejectionErr = (accept) => {
accept = Array.isArray(accept) && accept.length === 1 ? accept[0] : accept;
const messageSuffix = Array.isArray(accept)
? `one of ${accept.join(", ")}`
: accept;
return {
code: FILE_INVALID_TYPE,
message: `File type must be ${messageSuffix}`,
};
};
const getTooLargeRejectionErr = (maxSize) => {
return {
code: FILE_TOO_LARGE,
message: `File is larger than ${maxSize} bytes`,
};
};
const getTooSmallRejectionErr = (minSize) => {
return {
code: FILE_TOO_SMALL,
message: `File is smaller than ${minSize} bytes`,
};
};
const TOO_MANY_FILES_REJECTION = {
code: TOO_MANY_FILES,
message: "Too many files",
};
// Firefox versions prior to 53 return a bogus MIME type for every file drag, so dragovers with
// that MIME type will always be accepted
function fileAccepted(file, accept) {
const isAcceptable =
file.type === "application/x-moz-file" || accepts(file, accept);
return [
isAcceptable,
isAcceptable ? null : getInvalidTypeRejectionErr(accept),
];
}
function fileMatchSize(file, minSize, maxSize) {
if (isDefined(file.size)) {
if (isDefined(minSize) && isDefined(maxSize)) {
if (file.size > maxSize) return [false, getTooLargeRejectionErr(maxSize)];
if (file.size < minSize) return [false, getTooSmallRejectionErr(minSize)];
} else if (isDefined(minSize) && file.size < minSize)
return [false, getTooSmallRejectionErr(minSize)];
else if (isDefined(maxSize) && file.size > maxSize)
return [false, getTooLargeRejectionErr(maxSize)];
}
return [true, null];
}
function isDefined(value) {
return value !== undefined && value !== null;
}
// React's synthetic events has event.isPropagationStopped,
// but to remain compatibility with other libs (Preact) fall back
// to check event.cancelBubble
function isPropagationStopped(event) {
if (typeof event.isPropagationStopped === "function") {
return event.isPropagationStopped();
} else if (typeof event.cancelBubble !== "undefined") {
return event.cancelBubble;
}
return false;
}
function isEvtWithFiles(event) {
if (!event.dataTransfer) {
return !!event.target && !!event.target.files;
}
// https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/types
// https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types#file
return Array.prototype.some.call(
event.dataTransfer.types,
(type) => type === "Files" || type === "application/x-moz-file"
);
}
// allow the entire document to be a drag target
function onDocumentDragOver(event) {
event.preventDefault();
}
function isIe(userAgent) {
return (
userAgent.indexOf("MSIE") !== -1 || userAgent.indexOf("Trident/") !== -1
);
}
function isEdge(userAgent) {
return userAgent.indexOf("Edge/") !== -1;
}
function isIeOrEdge(userAgent = window.navigator.userAgent) {
return isIe(userAgent) || isEdge(userAgent);
}
/* src/components/Dropzone.svelte generated by Svelte v3.23.2 */
const { document: document_1 } = globals;
function add_css() {
var style = element("style");
style.id = "svelte-817dg2-style";
style.textContent = ".dropzone.svelte-817dg2{flex:1;display:flex;flex-direction:column;align-items:center;padding:20px;border-width:2px;border-radius:2px;border-color:#eeeeee;border-style:dashed;background-color:#fafafa;color:#bdbdbd;outline:none;transition:border 0.24s ease-in-out}.dropzone.svelte-817dg2:focus{border-color:#2196f3}";
append(document_1.head, style);
}
// (350:8)
function fallback_block(ctx) {
let p;
return {
c() {
p = element("p");
p.textContent = "Drag 'n' drop some files here, or click to select files";
},
m(target, anchor) {
insert(target, p, anchor);
},
d(detaching) {
if (detaching) detach(p);
}
};
}
function create_fragment(ctx) {
let div;
let input;
let t;
let div_class_value;
let current;
let mounted;
let dispose;
const default_slot_template = /*$$slots*/ ctx[28].default;
const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[27], null);
const default_slot_or_fallback = default_slot || fallback_block();
return {
c() {
div = element("div");
input = element("input");
t = space();
if (default_slot_or_fallback) default_slot_or_fallback.c();
attr(input, "accept", /*accept*/ ctx[0]);
input.multiple = /*multiple*/ ctx[1];
attr(input, "type", "file");
attr(input, "autocomplete", "off");
attr(input, "tabindex", "-1");
set_style(input, "display", "none");
attr(div, "tabindex", "0");
attr(div, "class", div_class_value = "" + ((/*disableDefaultStyles*/ ctx[4] ? "" : "dropzone") + "\r\n " + /*containerClasses*/ ctx[2] + " svelte-817dg2"));
attr(div, "style", /*containerStyles*/ ctx[3]);
t = text("import DropZone from \"./components/Dropzone.svelte\";\r\n\r\nexport default DropZone;");
},
m(target, anchor) {
insert(target, div, anchor);
append(div, input);
/*input_binding*/ ctx[29](input);
append(div, t);
if (default_slot_or_fallback) {
default_slot_or_fallback.m(div, null);
}
/*div_binding*/ ctx[30](div);
current = true;
if (!mounted) {
dispose = [
listen(input, "change", /*onDropCb*/ ctx[14]),
listen(input, "click", onInputElementClick),
listen(div, "keydown", /*composeKeyboardHandler*/ ctx[16](/*onKeyDownCb*/ ctx[7])),
listen(div, "focus", /*composeKeyboardHandler*/ ctx[16](/*onFocusCb*/ ctx[8])),
listen(div, "blur", /*composeKeyboardHandler*/ ctx[16](/*onBlurCb*/ ctx[9])),
listen(div, "click", /*composeHandler*/ ctx[15](/*onClickCb*/ ctx[10])),
listen(div, "dragenter", /*composeDragHandler*/ ctx[17](/*onDragEnterCb*/ ctx[11])),
listen(div, "dragover", /*composeDragHandler*/ ctx[17](/*onDragOverCb*/ ctx[12])),
listen(div, "dragleave", /*composeDragHandler*/ ctx[17](/*onDragLeaveCb*/ ctx[13])),
listen(div, "drop", /*composeDragHandler*/ ctx[17](/*onDropCb*/ ctx[14]))
];
mounted = true;
}
insert(target, t, anchor);
},
p(ctx, dirty) {
if (!current || dirty[0] & /*accept*/ 1) {
attr(input, "accept", /*accept*/ ctx[0]);
}
if (!current || dirty[0] & /*multiple*/ 2) {
input.multiple = /*multiple*/ ctx[1];
}
if (default_slot) {
if (default_slot.p && dirty[0] & /*$$scope*/ 134217728) {
update_slot(default_slot, default_slot_template, ctx, /*$$scope*/ ctx[27], dirty, null, null);
}
}
if (!current || dirty[0] & /*disableDefaultStyles, containerClasses*/ 20 && div_class_value !== (div_class_value = "" + ((/*disableDefaultStyles*/ ctx[4] ? "" : "dropzone") + "\r\n " + /*containerClasses*/ ctx[2] + " svelte-817dg2"))) {
attr(div, "class", div_class_value);
}
if (!current || dirty[0] & /*containerStyles*/ 8) {
attr(div, "style", /*containerStyles*/ ctx[3]);
}
},
i(local) {
if (current) return;
transition_in(default_slot_or_fallback, local);
current = true;
},
o(local) {
transition_out(default_slot_or_fallback, local);
current = false;
},
p: noop,
i: noop,
o: noop,
d(detaching) {
if (detaching) detach(div);
/*input_binding*/ ctx[29](null);
if (default_slot_or_fallback) default_slot_or_fallback.d(detaching);
/*div_binding*/ ctx[30](null);
mounted = false;
run_all(dispose);
if (detaching) detach(t);
}

@@ -921,382 +267,11 @@ };

function onInputElementClick(event) {
event.stopPropagation();
}
function instance($$self, $$props, $$invalidate) {
let { accept } = $$props; // string or string[]
let { disabled = false } = $$props;
let { getFilesFromEvent = fromEvent } = $$props;
let { maxSize = Infinity } = $$props;
let { minSize = 0 } = $$props;
let { multiple = true } = $$props;
let { preventDropOnDocument = true } = $$props;
let { noClick = false } = $$props;
let { noKeyboard = false } = $$props;
let { noDrag = false } = $$props;
let { noDragEventsBubbling = false } = $$props;
let { containerClasses = "" } = $$props;
let { containerStyles = "" } = $$props;
let { disableDefaultStyles = false } = $$props;
const dispatch = createEventDispatcher();
//state
let state = {
isFocused: false,
isFileDialogActive: false,
isDragActive: false,
isDragAccept: false,
isDragReject: false,
draggedFiles: [],
acceptedFiles: [],
fileRejections: []
};
let rootRef;
let inputRef;
function resetState() {
state.isFileDialogActive = false;
state.isDragActive = false;
state.draggedFiles = [];
state.acceptedFiles = [];
state.fileRejections = [];
}
// Fn for opening the file dialog programmatically
function openFileDialog() {
if (inputRef) {
$$invalidate(6, inputRef.value = null, inputRef); // TODO check if null needs to be set
state.isFileDialogActive = true;
inputRef.click();
}
}
// Cb to open the file dialog when SPACE/ENTER occurs on the dropzone
function onKeyDownCb(event) {
// Ignore keyboard events bubbling up the DOM tree
if (!rootRef || !rootRef.isEqualNode(event.target)) {
return;
}
if (event.keyCode === 32 || event.keyCode === 13) {
event.preventDefault();
openFileDialog();
}
}
// Update focus state for the dropzone
function onFocusCb() {
state.isFocused = true;
}
function onBlurCb() {
state.isFocused = false;
}
// Cb to open the file dialog when click occurs on the dropzone
function onClickCb() {
if (noClick) {
return;
}
// In IE11/Edge the file-browser dialog is blocking, therefore, use setTimeout()
// to ensure React can handle state changes
// See: https://github.com/react-dropzone/react-dropzone/issues/450
if (isIeOrEdge()) {
setTimeout(openFileDialog, 0);
} else {
openFileDialog();
}
}
function onDragEnterCb(event) {
event.preventDefault();
stopPropagation(event);
dragTargetsRef = [...dragTargetsRef, event.target];
if (isEvtWithFiles(event)) {
Promise.resolve(getFilesFromEvent(event)).then(draggedFiles => {
if (isPropagationStopped(event) && !noDragEventsBubbling) {
return;
}
state.draggedFiles = draggedFiles;
state.isDragActive = true;
dispatch("dragenter", { dragEvent: event });
});
}
}
function onDragOverCb(event) {
event.preventDefault();
stopPropagation(event);
if (event.dataTransfer) {
try {
event.dataTransfer.dropEffect = "copy";
} catch {
} /* eslint-disable-line no-empty */
}
if (isEvtWithFiles(event)) {
dispatch("dragover", { dragEvent: event });
}
return false;
}
function onDragLeaveCb(event) {
event.preventDefault();
stopPropagation(event);
// Only deactivate once the dropzone and all children have been left
const targets = dragTargetsRef.filter(target => rootRef && rootRef.contains(target));
// Make sure to remove a target present multiple times only once
// (Firefox may fire dragenter/dragleave multiple times on the same element)
const targetIdx = targets.indexOf(event.target);
if (targetIdx !== -1) {
targets.splice(targetIdx, 1);
}
dragTargetsRef = targets;
if (targets.length > 0) {
return;
}
state.isDragActive = false;
state.draggedFiles = [];
if (isEvtWithFiles(event)) {
dispatch("dragleave", { dragEvent: event });
}
}
function onDropCb(event) {
event.preventDefault();
stopPropagation(event);
dragTargetsRef = [];
if (isEvtWithFiles(event)) {
Promise.resolve(getFilesFromEvent(event)).then(files => {
if (isPropagationStopped(event) && !noDragEventsBubbling) {
return;
}
const acceptedFiles = [];
const fileRejections = [];
files.forEach(file => {
const [accepted, acceptError] = fileAccepted(file, accept);
const [sizeMatch, sizeError] = fileMatchSize(file, minSize, maxSize);
if (accepted && sizeMatch) {
acceptedFiles.push(file);
} else {
const errors = [acceptError, sizeError].filter(e => e);
fileRejections.push({ file, errors });
}
});
if (!multiple && acceptedFiles.length > 1) {
// Reject everything and empty accepted files
acceptedFiles.forEach(file => {
fileRejections.push({ file, errors: [TOO_MANY_FILES_REJECTION] });
});
acceptedFiles.splice(0);
}
state.acceptedFiles = acceptedFiles;
state.fileRejections = fileRejections;
dispatch("drop", { acceptedFiles, fileRejections, event });
if (fileRejections.length > 0) {
dispatch("droprejected", { fileRejections, event });
}
if (acceptedFiles.length > 0) {
dispatch("dropaccepted", { acceptedFiles, event });
}
});
}
resetState();
}
function composeHandler(fn) {
return disabled ? null : fn;
}
function composeKeyboardHandler(fn) {
return noKeyboard ? null : composeHandler(fn);
}
function composeDragHandler(fn) {
return noDrag ? null : composeHandler(fn);
}
function stopPropagation(event) {
if (noDragEventsBubbling) {
event.stopPropagation();
}
}
let dragTargetsRef = [];
function onDocumentDrop(event) {
if (rootRef && rootRef.contains(event.target)) {
// If we intercepted an event for our instance, let it propagate down to the instance's onDrop handler
return;
}
event.preventDefault();
dragTargetsRef = [];
}
// Update file dialog active state when the window is focused on
function onWindowFocus() {
// Execute the timeout only if the file dialog is opened in the browser
if (state.isFileDialogActive) {
setTimeout(
() => {
if (inputRef) {
const { files } = inputRef;
if (!files.length) {
state.isFileDialogActive = false;
dispatch("filedialogcancel");
}
}
},
300
);
}
}
onMount(() => {
window.addEventListener("focus", onWindowFocus, false);
if (preventDropOnDocument) {
document.addEventListener("dragover", onDocumentDragOver, false);
document.addEventListener("drop", onDocumentDrop, false);
}
});
onDestroy(() => {
window.removeEventListener("focus", onWindowFocus, false);
if (preventDropOnDocument) {
document.removeEventListener("dragover", onDocumentDragOver);
document.removeEventListener("drop", onDocumentDrop);
}
});
let { $$slots = {}, $$scope } = $$props;
function input_binding($$value) {
binding_callbacks[$$value ? "unshift" : "push"](() => {
inputRef = $$value;
$$invalidate(6, inputRef);
});
}
function div_binding($$value) {
binding_callbacks[$$value ? "unshift" : "push"](() => {
rootRef = $$value;
$$invalidate(5, rootRef);
});
}
$$self.$set = $$props => {
if ("accept" in $$props) $$invalidate(0, accept = $$props.accept);
if ("disabled" in $$props) $$invalidate(18, disabled = $$props.disabled);
if ("getFilesFromEvent" in $$props) $$invalidate(19, getFilesFromEvent = $$props.getFilesFromEvent);
if ("maxSize" in $$props) $$invalidate(20, maxSize = $$props.maxSize);
if ("minSize" in $$props) $$invalidate(21, minSize = $$props.minSize);
if ("multiple" in $$props) $$invalidate(1, multiple = $$props.multiple);
if ("preventDropOnDocument" in $$props) $$invalidate(22, preventDropOnDocument = $$props.preventDropOnDocument);
if ("noClick" in $$props) $$invalidate(23, noClick = $$props.noClick);
if ("noKeyboard" in $$props) $$invalidate(24, noKeyboard = $$props.noKeyboard);
if ("noDrag" in $$props) $$invalidate(25, noDrag = $$props.noDrag);
if ("noDragEventsBubbling" in $$props) $$invalidate(26, noDragEventsBubbling = $$props.noDragEventsBubbling);
if ("containerClasses" in $$props) $$invalidate(2, containerClasses = $$props.containerClasses);
if ("containerStyles" in $$props) $$invalidate(3, containerStyles = $$props.containerStyles);
if ("disableDefaultStyles" in $$props) $$invalidate(4, disableDefaultStyles = $$props.disableDefaultStyles);
if ("$$scope" in $$props) $$invalidate(27, $$scope = $$props.$$scope);
};
return [
accept,
multiple,
containerClasses,
containerStyles,
disableDefaultStyles,
rootRef,
inputRef,
onKeyDownCb,
onFocusCb,
onBlurCb,
onClickCb,
onDragEnterCb,
onDragOverCb,
onDragLeaveCb,
onDropCb,
composeHandler,
composeKeyboardHandler,
composeDragHandler,
disabled,
getFilesFromEvent,
maxSize,
minSize,
preventDropOnDocument,
noClick,
noKeyboard,
noDrag,
noDragEventsBubbling,
$$scope,
$$slots,
input_binding,
div_binding
];
}
class Dropzone extends SvelteComponent {
class Src extends SvelteComponent {
constructor(options) {
super();
if (!document_1.getElementById("svelte-817dg2-style")) add_css();
init(
this,
options,
instance,
create_fragment,
safe_not_equal,
{
accept: 0,
disabled: 18,
getFilesFromEvent: 19,
maxSize: 20,
minSize: 21,
multiple: 1,
preventDropOnDocument: 22,
noClick: 23,
noKeyboard: 24,
noDrag: 25,
noDragEventsBubbling: 26,
containerClasses: 2,
containerStyles: 3,
disableDefaultStyles: 4
},
[-1, -1]
);
init(this, options, null, create_fragment, safe_not_equal, {});
}
}
return Dropzone;
return Src;
})));

32

package.json
{
"name": "svelte-file-dropzone",
"version": "0.0.14",
"version": "0.0.15-dev.0",
"description": "Svelte component for fileupload and file dropzone",
"svelte": "src/index.js",
"svelte": "src/components/Dropzone.svelte",
"module": "dist/index.mjs",

@@ -24,16 +24,16 @@ "main": "dist/index.js",

"devDependencies": {
"@babel/core": "^7.10.2",
"@rollup/plugin-commonjs": "^13.0.0",
"@rollup/plugin-node-resolve": "^8.0.1",
"@storybook/addon-actions": "^5.3.19",
"@storybook/addon-links": "^5.3.19",
"@storybook/addon-notes": "^5.3.19",
"@storybook/addon-storysource": "^5.3.19",
"@storybook/addons": "^5.3.19",
"@storybook/svelte": "^5.3.19",
"babel-loader": "^8.1.0",
"rollup": "^2.16.1",
"rollup-plugin-svelte": "^5.2.2",
"svelte": "^3.23.2",
"svelte-loader": "^2.13.6"
"@babel/core": "7.12.10",
"@rollup/plugin-commonjs": "17.0.0",
"@rollup/plugin-node-resolve": "11.0.0",
"@storybook/addon-actions": "6.1.10",
"@storybook/addon-links": "6.1.10",
"@storybook/addon-notes": "5.3.21",
"@storybook/addon-storysource": "6.1.10",
"@storybook/addons": "6.1.10",
"@storybook/svelte": "6.1.10",
"babel-loader": "8.2.2",
"rollup": "2.34.2",
"rollup-plugin-svelte": "7.0.0",
"svelte": "3.31.0",
"svelte-loader": "2.13.6"
},

@@ -40,0 +40,0 @@ "keywords": [

2

src/index.js

@@ -0,3 +1,5 @@

// This file exists for Stories
// TODO remove this file and use index.svelte only
import DropZone from "./components/Dropzone.svelte";
export default DropZone;
dist/index.mjs

Sorry, the diff of this file is not supported yet