filepond
Version:
FilePond, Where files go to stretch their bits.
8,776 lines • 224 kB
JavaScript
/*!
* FilePond 4.6.0
* Licensed under MIT, https://opensource.org/licenses/MIT/
* Please visit https://pqina.nl/filepond/ for details.
*/
/* eslint-disable */
const isNode = value => value instanceof HTMLElement;
const createStore = (initialState, queries = [], actions = []) => {
// internal state
const state = {
...initialState
};
// contains all actions for next frame, is clear when actions are requested
const actionQueue = [];
const dispatchQueue = [];
// returns a duplicate of the current state
const getState = () => ({ ...state });
// returns a duplicate of the actions array and clears the actions array
const processActionQueue = () => {
// create copy of actions queue
const queue = [...actionQueue];
// clear actions queue (we don't want no double actions)
actionQueue.length = 0;
return queue;
};
// processes actions that might block the main UI thread
const processDispatchQueue = () => {
// create copy of actions queue
const queue = [...dispatchQueue];
// clear actions queue (we don't want no double actions)
dispatchQueue.length = 0;
// now dispatch these actions
queue.forEach(({ type, data }) => {
dispatch(type, data);
});
};
// adds a new action, calls its handler and
const dispatch = (type, data, isBlocking) => {
// is blocking action
if (isBlocking) {
dispatchQueue.push({
type,
data
});
return;
}
// if this action has a handler, handle the action
if (actionHandlers[type]) {
actionHandlers[type](data);
}
// now add action
actionQueue.push({
type,
data
});
};
const query = (str, ...args) =>
queryHandles[str] ? queryHandles[str](...args) : null;
const api = {
getState,
processActionQueue,
processDispatchQueue,
dispatch,
query
};
let queryHandles = {};
queries.forEach(query => {
queryHandles = {
...query(state),
...queryHandles
};
});
let actionHandlers = {};
actions.forEach(action => {
actionHandlers = {
...action(dispatch, query, state),
...actionHandlers
};
});
return api;
};
const defineProperty = (obj, property, definition) => {
if (typeof definition === 'function') {
obj[property] = definition;
return;
}
Object.defineProperty(obj, property, { ...definition });
};
const forin = (obj, cb) => {
for (const key in obj) {
if (!obj.hasOwnProperty(key)) {
continue;
}
cb(key, obj[key]);
}
};
const createObject = definition => {
const obj = {};
forin(definition, property => {
defineProperty(obj, property, definition[property]);
});
return obj;
};
const attr = (node, name, value = null) => {
if (value === null) {
return node.getAttribute(name) || node.hasAttribute(name);
}
node.setAttribute(name, value);
};
const ns = 'http://www.w3.org/2000/svg';
const svgElements = ['svg', 'path']; // only svg elements used
const isSVGElement = tag => svgElements.includes(tag);
const createElement = (tag, className, attributes = {}) => {
if (typeof className === 'object') {
attributes = className;
className = null;
}
const element = isSVGElement(tag)
? document.createElementNS(ns, tag)
: document.createElement(tag);
if (className) {
if (isSVGElement(tag)) {
attr(element, 'class', className);
} else {
element.className = className;
}
}
forin(attributes, (name, value) => {
attr(element, name, value);
});
return element;
};
const appendChild = parent => (child, index) => {
if (typeof index !== 'undefined' && parent.children[index]) {
parent.insertBefore(child, parent.children[index]);
} else {
parent.appendChild(child);
}
};
const appendChildView = (parent, childViews) => (view, index) => {
if (typeof index !== 'undefined') {
childViews.splice(index, 0, view);
} else {
childViews.push(view);
}
return view;
};
const removeChildView = (parent, childViews) => view => {
// remove from child views
childViews.splice(childViews.indexOf(view), 1);
// remove the element
if (view.element.parentNode) {
parent.removeChild(view.element);
}
return view;
};
const getViewRect = (elementRect, childViews, offset, scale) => {
const left = offset[0] || elementRect.left;
const top = offset[1] || elementRect.top;
const right = left + elementRect.width;
const bottom = top + elementRect.height * (scale[1] || 1);
const rect = {
// the rectangle of the element itself
element: {
...elementRect
},
// the rectangle of the element expanded to contain its children, does not include any margins
inner: {
left: elementRect.left,
top: elementRect.top,
right: elementRect.right,
bottom: elementRect.bottom
},
// the rectangle of the element expanded to contain its children including own margin and child margins
// margins will be added after we've recalculated the size
outer: {
left,
top,
right,
bottom
}
};
// expand rect to fit all child rectangles
childViews
.filter(childView => !childView.isRectIgnored())
.map(childView => childView.rect)
.forEach(childViewRect => {
expandRect(rect.inner, { ...childViewRect.inner });
expandRect(rect.outer, { ...childViewRect.outer });
});
// calculate inner width and height
calculateRectSize(rect.inner);
// append additional margin (top and left margins are included in top and left automatically)
rect.outer.bottom += rect.element.marginBottom;
rect.outer.right += rect.element.marginRight;
// calculate outer width and height
calculateRectSize(rect.outer);
return rect;
};
const expandRect = (parent, child) => {
// adjust for parent offset
child.top += parent.top;
child.right += parent.left;
child.bottom += parent.top;
child.left += parent.left;
if (child.bottom > parent.bottom) {
parent.bottom = child.bottom;
}
if (child.right > parent.right) {
parent.right = child.right;
}
};
const calculateRectSize = rect => {
rect.width = rect.right - rect.left;
rect.height = rect.bottom - rect.top;
};
const isNumber = value => typeof value === 'number';
/**
* Determines if position is at destination
* @param position
* @param destination
* @param velocity
* @param errorMargin
* @returns {boolean}
*/
const thereYet = (position, destination, velocity, errorMargin = 0.001) => {
return (
Math.abs(position - destination) < errorMargin &&
Math.abs(velocity) < errorMargin
);
};
/**
* Spring animation
*/
const spring =
// default options
({ stiffness = 0.5, damping = 0.75, mass = 10 } = {}) =>
// method definition
{
let target = null;
let position = null;
let velocity = 0;
let resting = false;
// updates spring state
const interpolate = () => {
// in rest, don't animate
if (resting) {
return;
}
// need at least a target or position to do springy things
if (!(isNumber(target) && isNumber(position))) {
resting = true;
velocity = 0;
return;
}
// calculate spring force
const f = -(position - target) * stiffness;
// update velocity by adding force based on mass
velocity += f / mass;
// update position by adding velocity
position += velocity;
// slow down based on amount of damping
velocity *= damping;
// we've arrived if we're near target and our velocity is near zero
if (thereYet(position, target, velocity)) {
position = target;
velocity = 0;
resting = true;
// we done
api.onupdate(position);
api.oncomplete(position);
} else {
// progress update
api.onupdate(position);
}
};
/**
* Set new target value
* @param value
*/
const setTarget = value => {
// if currently has no position, set target and position to this value
if (isNumber(value) && !isNumber(position)) {
position = value;
}
// next target value will not be animated to
if (target === null) {
target = value;
position = value;
}
// let start moving to target
target = value;
// already at target
if (position === target || typeof target === 'undefined') {
// now resting as target is current position, stop moving
resting = true;
velocity = 0;
// done!
api.onupdate(position);
api.oncomplete(position);
return;
}
resting = false;
};
// need 'api' to call onupdate callback
const api = createObject({
interpolate,
target: {
set: setTarget,
get: () => target
},
resting: {
get: () => resting
},
onupdate: value => {},
oncomplete: value => {}
});
return api;
};
const easeLinear = t => t;
const easeInOutQuad = t => (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t);
const tween =
// default values
({ duration = 500, easing = easeInOutQuad, delay = 0 } = {}) =>
// method definition
{
let start = null;
let t;
let p;
let resting = true;
let reverse = false;
let target = null;
const interpolate = ts => {
if (resting || target === null) {
return;
}
if (start === null) {
start = ts;
}
if (ts - start < delay) {
return;
}
t = ts - start - delay;
if (t < duration) {
p = t / duration;
api.onupdate((t >= 0 ? easing(reverse ? 1 - p : p) : 0) * target);
} else {
t = 1;
p = reverse ? 0 : 1;
api.onupdate(p * target);
api.oncomplete(p * target);
resting = true;
}
};
// need 'api' to call onupdate callback
const api = createObject({
interpolate,
target: {
get: () => (reverse ? 0 : target),
set: value => {
// is initial value
if (target === null) {
target = value;
api.onupdate(value);
api.oncomplete(value);
return;
}
// want to tween to a smaller value and have a current value
if (value < target) {
target = 1;
reverse = true;
} else {
// not tweening to a smaller value
reverse = false;
target = value;
}
// let's go!
resting = false;
start = null;
}
},
resting: {
get: () => resting
},
onupdate: value => {},
oncomplete: value => {}
});
return api;
};
const animator = {
spring,
tween
};
/*
{ type: 'spring', stiffness: .5, damping: .75, mass: 10 };
{ translation: { type: 'spring', ... }, ... }
{ translation: { x: { type: 'spring', ... } } }
*/
const createAnimator = (definition, category, property) => {
// default is single definition
// we check if transform is set, if so, we check if property is set
const def =
definition[category] && typeof definition[category][property] === 'object'
? definition[category][property]
: definition[category] || definition;
const type = typeof def === 'string' ? def : def.type;
const props = typeof def === 'object' ? { ...def } : {};
return animator[type] ? animator[type](props) : null;
};
const addGetSet = (keys, obj, props, overwrite = false) => {
obj = Array.isArray(obj) ? obj : [obj];
obj.forEach(o => {
keys.forEach(key => {
let name = key;
let getter = () => props[key];
let setter = value => (props[key] = value);
if (typeof key === 'object') {
name = key.key;
getter = key.getter || getter;
setter = key.setter || setter;
}
if (o[name] && !overwrite) {
return;
}
o[name] = {
get: getter,
set: setter
};
});
});
};
const isDefined = value => value != null;
// add to state,
// add getters and setters to internal and external api (if not set)
// setup animators
const animations = ({
mixinConfig,
viewProps,
viewInternalAPI,
viewExternalAPI,
viewState
}) => {
// initial properties
const initialProps = { ...viewProps };
// list of all active animations
const animations = [];
// setup animators
forin(mixinConfig, (property, animation) => {
const animator = createAnimator(animation);
if (!animator) {
return;
}
// when the animator updates, update the view state value
animator.onupdate = value => {
viewProps[property] = value;
};
// set animator target
animator.target = initialProps[property];
// when value is set, set the animator target value
const prop = {
key: property,
setter: value => {
// if already at target, we done!
if (animator.target === value) {
return;
}
animator.target = value;
},
getter: () => viewProps[property]
};
// add getters and setters
addGetSet([prop], [viewInternalAPI, viewExternalAPI], viewProps, true);
// add it to the list for easy updating from the _write method
animations.push(animator);
});
// expose internal write api
return {
write: ts => {
let resting = true;
animations.forEach(animation => {
if (!animation.resting) {
resting = false;
}
animation.interpolate(ts);
});
return resting;
},
destroy: () => {}
};
};
const addEvent = element => (type, fn) => {
element.addEventListener(type, fn);
};
const removeEvent = element => (type, fn) => {
element.removeEventListener(type, fn);
};
// mixin
const listeners = ({
mixinConfig,
viewProps,
viewInternalAPI,
viewExternalAPI,
viewState,
view
}) => {
const events = [];
const add = addEvent(view.element);
const remove = removeEvent(view.element);
viewExternalAPI.on = (type, fn) => {
events.push({
type,
fn
});
add(type, fn);
};
viewExternalAPI.off = (type, fn) => {
events.splice(
events.findIndex(event => event.type === type && event.fn === fn),
1
);
remove(type, fn);
};
return {
write: () => {
// not busy
return true;
},
destroy: () => {
events.forEach(event => {
remove(event.type, event.fn);
});
}
};
};
// add to external api and link to props
const apis = ({ mixinConfig, viewProps, viewExternalAPI }) => {
addGetSet(mixinConfig, viewExternalAPI, viewProps);
};
// add to state,
// add getters and setters to internal and external api (if not set)
// set initial state based on props in viewProps
// apply as transforms each frame
const defaults = {
opacity: 1,
scaleX: 1,
scaleY: 1,
translateX: 0,
translateY: 0,
rotateX: 0,
rotateY: 0,
rotateZ: 0,
originX: 0,
originY: 0
};
const styles = ({
mixinConfig,
viewProps,
viewInternalAPI,
viewExternalAPI,
view
}) => {
// initial props
const initialProps = { ...viewProps };
// current props
const currentProps = {};
// we will add those properties to the external API and link them to the viewState
addGetSet(mixinConfig, [viewInternalAPI, viewExternalAPI], viewProps);
// override rect on internal and external rect getter so it takes in account transforms
const getOffset = () => [
viewProps['translateX'] || 0,
viewProps['translateY'] || 0
];
const getScale = () => [viewProps['scaleX'] || 0, viewProps['scaleY'] || 0];
const getRect = () =>
view.rect
? getViewRect(view.rect, view.childViews, getOffset(), getScale())
: null;
viewInternalAPI.rect = { get: getRect };
viewExternalAPI.rect = { get: getRect };
// apply view props
mixinConfig.forEach(key => {
viewProps[key] =
typeof initialProps[key] === 'undefined'
? defaults[key]
: initialProps[key];
});
// expose api
return {
write: () => {
// see if props have changed
if (!propsHaveChanged(currentProps, viewProps)) {
return;
}
// moves element to correct position on screen
applyStyles(view.element, viewProps);
// store new transforms
Object.assign(currentProps, { ...viewProps });
// no longer busy
return true;
},
destroy: () => {}
};
};
const propsHaveChanged = (currentProps, newProps) => {
// different amount of keys
if (Object.keys(currentProps).length !== Object.keys(newProps).length) {
return true;
}
// lets analyze the individual props
for (const prop in newProps) {
if (newProps[prop] !== currentProps[prop]) {
return true;
}
}
return false;
};
const applyStyles = (
element,
{
opacity,
perspective,
translateX,
translateY,
scaleX,
scaleY,
rotateX,
rotateY,
rotateZ,
originX,
originY,
width,
height
}
) => {
let transforms = '';
let styles = '';
// handle transform origin
if (isDefined(originX) || isDefined(originY)) {
styles += `transform-origin: ${originX || 0}px ${originY || 0}px;`;
}
// transform order is relevant
// 0. perspective
if (isDefined(perspective)) {
transforms += `perspective(${perspective}px) `;
}
// 1. translate
if (isDefined(translateX) || isDefined(translateY)) {
transforms += `translate3d(${translateX || 0}px, ${translateY || 0}px, 0) `;
}
// 2. scale
if (isDefined(scaleX) || isDefined(scaleY)) {
transforms += `scale3d(${isDefined(scaleX) ? scaleX : 1}, ${
isDefined(scaleY) ? scaleY : 1
}, 1) `;
}
// 3. rotate
if (isDefined(rotateZ)) {
transforms += `rotateZ(${rotateZ}rad) `;
}
if (isDefined(rotateX)) {
transforms += `rotateX(${rotateX}rad) `;
}
if (isDefined(rotateY)) {
transforms += `rotateY(${rotateY}rad) `;
}
// add transforms
if (transforms.length) {
styles += `transform:${transforms};`;
}
// add opacity
if (isDefined(opacity)) {
styles += `opacity:${opacity};`;
// if we reach zero, we make the element inaccessible
if (opacity === 0) {
styles += `visibility:hidden;`;
}
// if we're below 100% opacity this element can't be clicked
if (opacity < 1) {
styles += `pointer-events:none;`;
}
}
// add height
if (isDefined(height)) {
styles += `height:${height}px;`;
}
// add width
if (isDefined(width)) {
styles += `width:${width}px;`;
}
// apply styles
const elementCurrentStyle = element.elementCurrentStyle || '';
// if new styles does not match current styles, lets update!
if (
styles.length !== elementCurrentStyle.length ||
styles !== elementCurrentStyle
) {
element.setAttribute('style', styles);
// store current styles so we can compare them to new styles later on
// _not_ getting the style attribute is faster
element.elementCurrentStyle = styles;
}
};
const Mixins = {
styles,
listeners,
animations,
apis
};
const updateRect = (rect = {}, element = {}, style = {}) => {
if (!element.layoutCalculated) {
rect.paddingTop = parseInt(style.paddingTop, 10) || 0;
rect.marginTop = parseInt(style.marginTop, 10) || 0;
rect.marginRight = parseInt(style.marginRight, 10) || 0;
rect.marginBottom = parseInt(style.marginBottom, 10) || 0;
rect.marginLeft = parseInt(style.marginLeft, 10) || 0;
element.layoutCalculated = true;
}
rect.left = element.offsetLeft || 0;
rect.top = element.offsetTop || 0;
rect.width = element.offsetWidth || 0;
rect.height = element.offsetHeight || 0;
rect.right = rect.left + rect.width;
rect.bottom = rect.top + rect.height;
rect.scrollTop = element.scrollTop;
rect.hidden = element.offsetParent === null;
return rect;
};
const createView =
// default view definition
({
// element definition
tag = 'div',
name = null,
attributes = {},
// view interaction
read = () => {},
write = () => {},
create = () => {},
destroy = () => {},
// hooks
filterFrameActionsForChild = (child, actions) => actions,
didCreateView = () => {},
didWriteView = () => {},
// rect related
ignoreRect = false,
ignoreRectUpdate = false,
// mixins
mixins = []
} = {}) => (
// each view requires reference to store
store,
// specific properties for this view
props = {}
) => {
// root element should not be changed
const element = createElement(tag, `filepond--${name}`, attributes);
// style reference should also not be changed
const style = window.getComputedStyle(element, null);
// element rectangle
const rect = updateRect();
let frameRect = null;
// rest state
let isResting = false;
// pretty self explanatory
const childViews = [];
// loaded mixins
const activeMixins = [];
// references to created children
const ref = {};
// state used for each instance
const state = {};
// list of writers that will be called to update this view
const writers = [
write // default writer
];
const readers = [
read // default reader
];
const destroyers = [
destroy // default destroy
];
// core view methods
const getElement = () => element;
const getChildViews = () => childViews.concat();
const getReference = () => ref;
const createChildView = store => (view, props) => view(store, props);
const getRect = () => {
if (frameRect) {
return frameRect;
}
frameRect = getViewRect(rect, childViews, [0, 0], [1, 1]);
return frameRect;
};
const getStyle = () => style;
/**
* Read data from DOM
* @private
*/
const _read = () => {
frameRect = null;
// read child views
childViews.forEach(child => child._read());
const shouldUpdate = !(ignoreRectUpdate && rect.width && rect.height);
if (shouldUpdate) {
updateRect(rect, element, style);
}
// readers
const api = { root: internalAPI, props, rect };
readers.forEach(reader => reader(api));
};
/**
* Write data to DOM
* @private
*/
const _write = (ts, frameActions, shouldOptimize) => {
// if no actions, we assume that the view is resting
let resting = frameActions.length === 0;
// writers
writers.forEach(writer => {
const writerResting = writer({
props,
root: internalAPI,
actions: frameActions,
timestamp: ts,
shouldOptimize
});
if (writerResting === false) {
resting = false;
}
});
// run mixins
activeMixins.forEach(mixin => {
// if one of the mixins is still busy after write operation, we are not resting
const mixinResting = mixin.write(ts);
if (mixinResting === false) {
resting = false;
}
});
// updates child views that are currently attached to the DOM
childViews
.filter(child => !!child.element.parentNode)
.forEach(child => {
// if a child view is not resting, we are not resting
const childResting = child._write(
ts,
filterFrameActionsForChild(child, frameActions),
shouldOptimize
);
if (!childResting) {
resting = false;
}
});
// append new elements to DOM and update those
childViews
//.filter(child => !child.element.parentNode)
.forEach((child, index) => {
// skip
if (child.element.parentNode) {
return;
}
// append to DOM
internalAPI.appendChild(child.element, index);
// call read (need to know the size of these elements)
child._read();
// re-call write
child._write(
ts,
filterFrameActionsForChild(child, frameActions),
shouldOptimize
);
// we just added somthing to the dom, no rest
resting = false;
});
// update resting state
isResting = resting;
didWriteView({
props,
root: internalAPI,
actions: frameActions,
timestamp: ts
});
// let parent know if we are resting
return resting;
};
const _destroy = () => {
activeMixins.forEach(mixin => mixin.destroy());
destroyers.forEach(destroyer => {
destroyer({ root: internalAPI, props });
});
childViews.forEach(child => child._destroy());
};
// sharedAPI
const sharedAPIDefinition = {
element: {
get: getElement
},
style: {
get: getStyle
},
childViews: {
get: getChildViews
}
};
// private API definition
const internalAPIDefinition = {
...sharedAPIDefinition,
rect: {
get: getRect
},
// access to custom children references
ref: {
get: getReference
},
// dom modifiers
is: needle => name === needle,
appendChild: appendChild(element),
createChildView: createChildView(store),
linkView: view => {
childViews.push(view);
return view;
},
unlinkView: view => {
childViews.splice(childViews.indexOf(view), 1);
},
appendChildView: appendChildView(element, childViews),
removeChildView: removeChildView(element, childViews),
registerWriter: writer => writers.push(writer),
registerReader: reader => readers.push(reader),
registerDestroyer: destroyer => destroyers.push(destroyer),
invalidateLayout: () => (element.layoutCalculated = false),
// access to data store
dispatch: store.dispatch,
query: store.query
};
// public view API methods
const externalAPIDefinition = {
element: {
get: getElement
},
childViews: {
get: getChildViews
},
rect: {
get: getRect
},
resting: {
get: () => isResting
},
isRectIgnored: () => ignoreRect,
_read,
_write,
_destroy
};
// mixin API methods
const mixinAPIDefinition = {
...sharedAPIDefinition,
rect: {
get: () => rect
}
};
// add mixin functionality
Object.keys(mixins)
.sort((a, b) => {
// move styles to the back of the mixin list (so adjustments of other mixins are applied to the props correctly)
if (a === 'styles') {
return 1;
} else if (b === 'styles') {
return -1;
}
return 0;
})
.forEach(key => {
const mixinAPI = Mixins[key]({
mixinConfig: mixins[key],
viewProps: props,
viewState: state,
viewInternalAPI: internalAPIDefinition,
viewExternalAPI: externalAPIDefinition,
view: createObject(mixinAPIDefinition)
});
if (mixinAPI) {
activeMixins.push(mixinAPI);
}
});
// construct private api
const internalAPI = createObject(internalAPIDefinition);
// create the view
create({
root: internalAPI,
props
});
// append created child views to root node
const childCount = element.children.length; // need to know the current child count so appending happens in correct order
childViews.forEach((child, index) => {
internalAPI.appendChild(child.element, childCount + index);
});
// call did create
didCreateView(internalAPI);
// expose public api
return createObject(externalAPIDefinition, props);
};
const createPainter = (read, write, fps = 60) => {
const name = '__framePainter';
// set global painter
if (window[name]) {
window[name].readers.push(read);
window[name].writers.push(write);
return;
}
window[name] = {
readers: [read],
writers: [write]
};
const painter = window[name];
const interval = 1000 / fps;
let last = null;
let id = null;
let requestTick = null;
let cancelTick = null;
const setTimerType = () => {
if (document.hidden) {
requestTick = () =>
window.setTimeout(() => tick(performance.now()), interval);
cancelTick = () => window.clearTimeout(id);
} else {
requestTick = () => window.requestAnimationFrame(tick);
cancelTick = () => window.cancelAnimationFrame(id);
}
};
document.addEventListener('visibilitychange', () => {
if (cancelTick) cancelTick();
setTimerType();
tick(performance.now());
});
const tick = ts => {
// queue next tick
id = requestTick(tick);
// limit fps
if (!last) {
last = ts;
}
const delta = ts - last;
if (delta <= interval) {
// skip frame
return;
}
// align next frame
last = ts - (delta % interval);
// update view
painter.readers.forEach(read => read());
painter.writers.forEach(write => write(ts));
};
setTimerType();
tick(performance.now());
return {
pause: () => {
cancelTick(id);
}
};
};
const createRoute = (routes, fn) => ({
root,
props,
actions = [],
timestamp,
shouldOptimize
}) => {
actions
.filter(action => routes[action.type])
.forEach(action =>
routes[action.type]({
root,
props,
action: action.data,
timestamp,
shouldOptimize
})
);
if (fn) {
fn({ root, props, actions, timestamp, shouldOptimize });
}
};
const insertBefore = (newNode, referenceNode) =>
referenceNode.parentNode.insertBefore(newNode, referenceNode);
const insertAfter = (newNode, referenceNode) => {
return referenceNode.parentNode.insertBefore(
newNode,
referenceNode.nextSibling
);
};
const isArray = value => Array.isArray(value);
const isEmpty = value => value == null;
const trim = str => str.trim();
const toString = value => '' + value;
const toArray = (value, splitter = ',') => {
if (isEmpty(value)) {
return [];
}
if (isArray(value)) {
return value;
}
return toString(value)
.split(splitter)
.map(trim)
.filter(str => str.length);
};
const isBoolean = value => typeof value === 'boolean';
const toBoolean = value => (isBoolean(value) ? value : value === 'true');
const isString = value => typeof value === 'string';
const toNumber = value =>
isNumber(value)
? value
: isString(value)
? toString(value).replace(/[a-z]+/gi, '')
: 0;
const toInt = value => parseInt(toNumber(value), 10);
const toFloat = value => parseFloat(toNumber(value));
const isInt = value =>
isNumber(value) && isFinite(value) && Math.floor(value) === value;
const toBytes = value => {
// is in bytes
if (isInt(value)) {
return value;
}
// is natural file size
let naturalFileSize = toString(value).trim();
// if is value in megabytes
if (/MB$/i.test(naturalFileSize)) {
naturalFileSize = naturalFileSize.replace(/MB$i/, '').trim();
return toInt(naturalFileSize) * 1000 * 1000;
}
// if is value in kilobytes
if (/KB/i.test(naturalFileSize)) {
naturalFileSize = naturalFileSize.replace(/KB$i/, '').trim();
return toInt(naturalFileSize) * 1000;
}
return toInt(naturalFileSize);
};
const isFunction = value => typeof value === 'function';
const toFunctionReference = string => {
let ref = self;
let levels = string.split('.');
let level = null;
while ((level = levels.shift())) {
ref = ref[level];
if (!ref) {
return null;
}
}
return ref;
};
const methods = {
process: 'POST',
revert: 'DELETE',
fetch: 'GET',
restore: 'GET',
load: 'GET'
};
const createServerAPI = outline => {
const api = {};
api.url = isString(outline) ? outline : outline.url || '';
api.timeout = outline.timeout ? parseInt(outline.timeout, 10) : 0;
api.headers = outline.headers ? outline.headers : {};
forin(methods, key => {
api[key] = createAction(
key,
outline[key],
methods[key],
api.timeout,
api.headers
);
});
// special treatment for remove
api.remove = outline.remove || null;
// remove generic headers from api object
delete api.headers;
return api;
};
const createAction = (name, outline, method, timeout, headers) => {
// is explicitely set to null so disable
if (outline === null) {
return null;
}
// if is custom function, done! Dev handles everything.
if (typeof outline === 'function') {
return outline;
}
// build action object
const action = {
url: method === 'GET' ? `?${name}=` : '',
method,
headers,
withCredentials: false,
timeout,
onload: null,
ondata: null,
onerror: null
};
// is a single url
if (isString(outline)) {
action.url = outline;
return action;
}
// overwrite
Object.assign(action, outline);
// see if should reformat headers;
if (isString(action.headers)) {
const parts = action.headers.split(/:(.+)/);
action.headers = {
header: parts[0],
value: parts[1]
};
}
// if is bool withCredentials
action.withCredentials = toBoolean(action.withCredentials);
return action;
};
const toServerAPI = value => createServerAPI(value);
const isNull = value => value === null;
const isObject = value => typeof value === 'object' && value !== null;
const isAPI = value => {
return (
isObject(value) &&
isString(value.url) &&
isObject(value.process) &&
isObject(value.revert) &&
isObject(value.restore) &&
isObject(value.fetch)
);
};
const getType = value => {
if (isArray(value)) {
return 'array';
}
if (isNull(value)) {
return 'null';
}
if (isInt(value)) {
return 'int';
}
if (/^[0-9]+ ?(?:GB|MB|KB)$/gi.test(value)) {
return 'bytes';
}
if (isAPI(value)) {
return 'api';
}
return typeof value;
};
const replaceSingleQuotes = str =>
str
.replace(/{\s*'/g, '{"')
.replace(/'\s*}/g, '"}')
.replace(/'\s*:/g, '":')
.replace(/:\s*'/g, ':"')
.replace(/,\s*'/g, ',"')
.replace(/'\s*,/g, '",');
const conversionTable = {
array: toArray,
boolean: toBoolean,
int: value => (getType(value) === 'bytes' ? toBytes(value) : toInt(value)),
number: toFloat,
float: toFloat,
bytes: toBytes,
string: value => (isFunction(value) ? value : toString(value)),
function: value => toFunctionReference(value),
serverapi: toServerAPI,
object: value => {
try {
return JSON.parse(replaceSingleQuotes(value));
} catch (e) {
return null;
}
}
};
const convertTo = (value, type) => conversionTable[type](value);
const getValueByType = (newValue, defaultValue, valueType) => {
// can always assign default value
if (newValue === defaultValue) {
return newValue;
}
// get the type of the new value
let newValueType = getType(newValue);
// is valid type?
if (newValueType !== valueType) {
// is string input, let's attempt to convert
const convertedValue = convertTo(newValue, valueType);
// what is the type now
newValueType = getType(convertedValue);
// no valid conversions found
if (convertedValue === null) {
throw `Trying to assign value with incorrect type to "${option}", allowed type: "${valueType}"`;
} else {
newValue = convertedValue;
}
}
// assign new value
return newValue;
};
const createOption = (defaultValue, valueType) => {
let currentValue = defaultValue;
return {
enumerable: true,
get: () => currentValue,
set: newValue => {
currentValue = getValueByType(newValue, defaultValue, valueType);
}
};
};
const createOptions = options => {
const obj = {};
forin(options, prop => {
const optionDefinition = options[prop];
obj[prop] = createOption(optionDefinition[0], optionDefinition[1]);
});
return createObject(obj);
};
const createInitialState = options => ({
// model
items: [],
// timeout used for calling update items
listUpdateTimeout: null,
// timeout used for stacking metadata updates
itemUpdateTimeout: null,
// queue of items waiting to be processed
processingQueue: [],
// options
options: createOptions(options)
});
const fromCamels = (string, separator = '-') =>
string
.split(/(?=[A-Z])/)
.map(part => part.toLowerCase())
.join(separator);
const createOptionAPI = (store, options) => {
const obj = {};
forin(options, key => {
obj[key] = {
get: () => store.getState().options[key],
set: value => {
store.dispatch(`SET_${fromCamels(key, '_').toUpperCase()}`, {
value
});
}
};
});
return obj;
};
const createOptionActions = options => (dispatch, query, state) => {
const obj = {};
forin(options, key => {
const name = fromCamels(key, '_').toUpperCase();
obj[`SET_${name}`] = action => {
try {
state.options[key] = action.value;
} catch (e) {
// nope, failed
}
// we successfully set the value of this option
dispatch(`DID_SET_${name}`, { value: state.options[key] });
};
});
return obj;
};
const createOptionQueries = options => state => {
const obj = {};
forin(options, key => {
obj[`GET_${fromCamels(key, '_').toUpperCase()}`] = action =>
state.options[key];
});
return obj;
};
const InteractionMethod = {
API: 1,
DROP: 2,
BROWSE: 3,
PASTE: 4,
NONE: 5
};
const getUniqueId = () =>
Math.random()
.toString(36)
.substr(2, 9);
const arrayRemove = (arr, index) => arr.splice(index, 1);
const on = () => {
const listeners = [];
const off = (event, cb) => {
arrayRemove(
listeners,
listeners.findIndex(
listener => listener.event === event && (listener.cb === cb || !cb)
)
);
};
return {
fire: (event, ...args) => {
listeners
.filter(listener => listener.event === event)
.map(listener => listener.cb)
.forEach(cb => {
setTimeout(() => {
cb(...args);
}, 0);
});
},
on: (event, cb) => {
listeners.push({ event, cb });
},
onOnce: (event, cb) => {
listeners.push({
event,
cb: (...args) => {
off(event, cb);
cb(...args);
}
});
},
off
};
};
const copyObjectPropertiesToObject = (src, target, excluded) => {
Object.getOwnPropertyNames(src)
.filter(property => !excluded.includes(property))
.forEach(key =>
Object.defineProperty(
target,
key,
Object.getOwnPropertyDescriptor(src, key)
)
);
};
const PRIVATE = [
'fire',
'process',
'revert',
'load',
'on',
'off',
'onOnce',
'retryLoad',
'extend',
'archive',
'archived',
'release',
'released',
'requestProcessing',
'freeze'
];
const createItemAPI = item => {
const api = {};
copyObjectPropertiesToObject(item, api, PRIVATE);
return api;
};
const removeReleasedItems = items => {
items.forEach((item, index) => {
if (item.released) {
arrayRemove(items, index);
}
});
};
const ItemStatus = {
INIT: 1,
IDLE: 2,
PROCESSING_QUEUED: 9,
PROCESSING: 3,
PROCESSING_COMPLETE: 5,
PROCESSING_ERROR: 6,
PROCESSING_REVERT_ERROR: 10,
LOADING: 7,
LOAD_ERROR: 8
};
const FileOrigin = {
INPUT: 1,
LIMBO: 2,
LOCAL: 3
};
const getNonNumeric = str => /[^0-9]+/.exec(str);
const getDecimalSeparator = () => getNonNumeric((1.1).toLocaleString())[0];
const getThousandsSeparator = () => {
// Added for browsers that do not return the thousands separator (happend on native browser Android 4.4.4)
// We check against the normal toString output and if they're the same return a comma when decimal separator is a dot
const decimalSeparator = getDecimalSeparator();
const thousandsStringWithSeparator = (1000.0).toLocaleString();
const thousandsStringWithoutSeparator = (1000.0).toString();
if (thousandsStringWithSeparator !== thousandsStringWithoutSeparator) {
return getNonNumeric(thousandsStringWithSeparator)[0];
}
return decimalSeparator === '.' ? ',' : '.';
};
const Type = {
BOOLEAN: 'boolean',
INT: 'int',
NUMBER: 'number',
STRING: 'string',
ARRAY: 'array',
OBJECT: 'object',
FUNCTION: 'function',
ACTION: 'action',
SERVER_API: 'serverapi',
REGEX: 'regex'
};
// all registered filters
const filters = [];
// loops over matching filters and passes options to each filter, returning the mapped results
const applyFilterChain = (key, value, utils) =>
new Promise((resolve, reject) => {
// find matching filters for this key
const matchingFilters = filters.filter(f => f.key === key).map(f => f.cb);
// resolve now
if (matchingFilters.length === 0) {
resolve(value);
return;
}
// first filter to kick things of
const initialFilter = matchingFilters.shift();
// chain filters
matchingFilters
.reduce(
// loop over promises passing value to next promise
(current, next) => current.then(value => next(value, utils)),
// call initial filter, will return a promise
initialFilter(value, utils)
// all executed
)
.then(value => resolve(value))
.catch(error => reject(error));
});
const applyFilters = (key, value, utils) =>
filters.filter(f => f.key === key).map(f => f.cb(value, utils));
// adds a new filter to the list
const addFilter = (key, cb) => filters.push({ key, cb });
const extendDefaultOptions = additionalOptions =>
Object.assign(defaultOptions, additionalOptions);
const getOptions = () => ({ ...defaultOptions });
const setOptions = opts => {
forin(opts, (key, value) => {
// key does not exist, so this option cannot be set
if (!defaultOptions[key]) {
return;
}
defaultOptions[key][0] = getValueByType(
value,
defaultOptions[key][0],
defaultOptions[key][1]
);
});
};
// default options on app
const defaultOptions = {
// the id to add to the root element
id: [null, Type.STRING],
// input field name to use
name: ['filepond', Type.STRING],
// disable the field
disabled: [false, Type.BOOLEAN],
// classname to put on wrapper
className: [null, Type.STRING],
// is the field required
required: [false, Type.BOOLEAN],
// Allow media capture when value is set
captureMethod: [null, Type.STRING],
// - "camera", "microphone" or "camcorder",
// - Does not work with multiple on apple devices
// - If set, acceptedFileTypes must be made to match with media wildcard "image/*", "audio/*" or "video/*"
// Feature toggles
allowDrop: [true, Type.BOOLEAN], // Allow dropping of files
allowBrowse: [true, Type.BOOLEAN], // Allow browsing the file system
allowPaste: [true, Type.BOOLEAN], // Allow pasting files
allowMultiple: [false, Type.BOOLEAN], // Allow multiple files (disabled by default, as multiple attribute is also required on input to allow multiple)
allowReplace: [true, Type.BOOLEAN], // Allow dropping a file on other file to replace it (only works when multiple is set to false)
allowRevert: [true, Type.BOOLEAN], // Allows user to revert file upload
// Revert mode
forceRevert: [false, Type.BOOLEAN], // Set to 'force' to require the file to be reverted before removal
// Input requirements
maxFiles: [null, Type.INT], // Max number of files
checkValidity: [false, Type.BOOLEAN], // Enables custom validity messages
// Where to put file
itemInsertLocationFreedom: [true, Type.BOOLEAN], // Set to false to always add items to begin or end of list
itemInsertLocation: ['before', Type.STRING], // Default index in list to add items that have been dropped at the top of the list
itemInsertInterval: [75, Type.INT],
// Drag 'n Drop related
dropOnPage: [false, Type.BOOLEAN], // Allow dropping of files anywhere on page (prevents browser from opening file if dropped outside of Up)
dropOnElement: [true, Type.BOOLEAN], // Drop needs to happen on element (set to false to also load drops outside of Up)
dropValidation: [false, Type.BOOLEAN], // Enable or disable validating files on drop
ignoredFiles: [['.ds_store', 'thumbs.db', 'desktop.ini'], Type.ARRAY],
// Upload related
instantUpload: [true, Type.BOOLEAN], // Should upload files immidiately on drop
maxParallelUploads: [2, Type.INT], // Maximum files to upload in parallel
// The server api end points to use for uploading (see docs)
server: [null, Type.SERVER_API],
// Labels and status messages
labelDecimalSeparator: [getDecimalSeparator(), Type.STRING], // Default is locale separator
labelThousandsSeparator: [getThousandsSeparator(), Type.STRING], // Default is locale separator
labelIdle: [
'Drag & Drop your files or <span class="filepond--label-action">Browse</span>',
Type.STRING
],
labelInvalidField: ['Field contains invalid files', Type.STRING],
labelFileWaitingForSize: ['Waiting for size', Type.STRING],
labelFileSizeNotAvailable: ['Size not available', Type.STRING],
labelFileCountSingular: ['file in list', Type.STRING],
labelFileCountPlural: ['files in list', Type.STRING],
labelFileLoading: ['Loading', Type.STRING],
labelFileAdded: ['Added', Type.STRING], // assistive only
labelFileLoadError: ['Error during load', Type.STRING],
labelFileRemoved: ['Removed', Type.STRING], // assistive only
labelFileRemoveError: ['Error during remove', Type.STRING],
labelFileProcessing: ['Uploading', Type.STRING],
labelFileProcessingComplete: ['Upload complete', Type.STRING],
labelFileProcessingAborted: ['Upload cancelled', Type.STRING],
labelFileProcessingError: ['Error during upload', Type.STRING],
labelFileProcessingRevertError: ['Error during revert', Type.STRING],
labelTapToCancel: ['tap to cancel', Type.STRING],
labelTapToRetry: ['tap to retry', Type.STRING],
labelTapToUndo: ['tap to undo', Type.STRING],
labelButtonRemoveItem: ['Remove', Type.STRING],
labelButtonAbortItemLoad: ['Abort', Type.STRING],
labelButtonRetryItemLoad: ['Retry', Type.STRING],
labelButtonAbortItemProcessing: ['Cancel', Type.STRING],
labelButtonUndoItemProcessing: ['Undo', Type.STRING],
labelButtonRetryItemProcessing: ['Retry', Type.STRING],
labelButtonProcessItem: ['Upload', Type.STRING],
// make sure width and height plus viewpox are even numbers so icons are nicely centered
iconRemove: [
'<svg width="26" height="26" viewBox="0 0 26 26" xmlns="http://www.w3.org/2000/svg"><path d="M11.586 13l-2.293 2.293a1 1 0 0 0 1.414 1.414L13 14.414l2.293 2.293a1 1 0 0 0 1.414-1.414L14.414 13l2.293-2.293a1 1 0 0 0-1.414-1.414L13 11.586l-2.293-2.293a1 1 0 0 0-1.414 1.414L11.586 13z" fill="currentColor" fill-rule="nonzero"/></svg>',
Type.STRING
],
iconProcess: [
'<svg width="26" height="26" viewBox="0 0 26 26" xmlns="http://www.w3.org/2000/svg"><path d="M14 10.414v3.585a1 1 0 0 1-2 0v-3.585l-1.293 1.293a1 1 0 0 1-1.414-1.415l3-3a1 1 0 0 1 1.414 0l3 3a1 1 0 0 1-1.414 1.415L14 10.414zM9 18a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2H9z" fill="currentColor" fill-rule="evenodd"/></svg>',
Type.STRING
],
iconRetry: [
'<svg width="26" height="26" viewBox="0 0 26 26" xmlns="http://www.w3.org/2000/svg"><path d="M10.81 9.185l-.038.02A4.997 4.997 0 0 0 8 13.683a5 5 0 0 0 5 5 5 5 0 0 0 5-5 1 1 0 0 1 2 0A7 7 0 1 1 9.722 7.496l-.842-.21a.999.999 0 1 1 .484-1.94l3.23.806c.535.133.86.675.73 1.21l-.804 3.233a.997.997 0 0 1-1.21.73.997.997 0 0 1-.73-1.21l.23-.928v-.002z" fill="currentColor" fill-rule="nonzero"/></svg>',
Type.STRING
],
iconUndo: [
'<svg width="26" height="26" viewBox="0 0 26 26" xmlns="http://www.w3.org/2000/svg"><path d="M9.185 10.81l.02-.038A4.997 4.997 0 0 1 13.683 8a5 5 0 0 1 5 5 5 5 0 0 1-5 5 1 1 0 0 0 0 2A7 7 0 1 0 7.496 9.722l-.21-.842a.999.999 0 1 0-1.94.484l.806 3.23c.133.535.675.86 1.21.73l3.233-.803a.997.997 0 0 0 .73-1.21.997.997 0 0 0-1.21-.73l-.928.23-.002-.001z" fill="currentColor" fill-rule="nonzero"/></svg>',
Type.STRING
],
iconDone: [
'<svg width="26" height="26" viewBox="0 0 26 26" xmlns="http://www.w3.org/2000/svg"><path d="M18.293 9.293a1 1 0 0 1 1.414 1.414l-7.002 7a1 1 0 0 1-1.414 0l-3.998-4a1 1 0 1 1 1.414-1.414L12 15.586l6.294-6.293z" fill="currentColor" fill-rule="nonzero"/></svg>',
Type.STRING
],
// event handlers
oninit: [null, Type.FUNCTION],
onwarning: [null, Type.FUNCTION],
onerror: [null, Type.FUNCTION],
onactivatefile: [null, Type.FUNCTION],
onaddfilestart: [null, Type.FUNCTION],
onaddfileprogress: [null, Type.FUNCTION],
onaddfile: [null, Type.FUNCTION],
onprocessfilestart: [null, Type.FUNCTION],
onprocessfileprogress: [null, Type.FUNCTION],
onprocessfileabort: [null, Type.FUNCTION],
onprocessfilerevert: [null, Type.FUNCTION],
onprocessfile: [null, Type.FUNCTION],
onprocessfiles: [null, Type.FUNCTION],
onremovefile: [null, Type.FUNCTION],
onpreparefile: [null, Type.FUNCTION],
onupdatefiles: [null, Type.FUNCTION],
// hooks
beforeDropFile: [null, Type.FUNCTION],
beforeAddFile: [null, Type.FUNCTION],
beforeRemoveFile: [null, Type.FUNCTION],
// styles
stylePanelLayout: [null, Type.STRING], // null 'integrated', 'compact', 'circle'
stylePanelAspectRatio: [null, Type.STRING], // null or '3:2' or 1
styleItemPanelAspectRatio: [null, Type.STRING],
styleButtonRemoveItemPosition: ['left', Type.STRING],
styleButtonProcessItemPosition: ['right', Type.STRING],
styleLoadIndicatorPosition: ['right', Type.STRING],
styleProgressIndicatorPosition: ['right', Type.STRING],
// custom initial files array
files: [[], Type.ARRAY]
};
const getItemByQuery = (items, query) => {
// just return first index
if (isEmpty(query)) {
return items[0] || null;
}
// query is index
if (isInt(query)) {
return items[query] || null;
}
// if query is item, get the id
if (typeof query === 'object') {
query = query.id;
}
// assume query is a string and return item by id
return items.find(item => item.id === query) || null;
};
const getNumericAspectRatioFromString = aspectRatio => {
if (isEmpty(aspectRatio)) {
return aspectRatio;
}
if (/:/.test(aspectRatio)) {
const parts = aspectRatio.split(':');
return parts[1] / parts[0];
}
return parseFloat(aspectRatio);
};
const getActiveItems = items => items.filter(item => !item.archived);
const Status = {
EMPTY: 0,
IDLE: 1, // waiting
ERROR: 2, // a file is in error state
BUSY: 3, // busy processing or loading
READY: 4 // all files uploaded
};
const ITEM_ERROR = [
ItemStatus.LOAD_ERROR,
ItemStatus.PROCESSING_ERROR,
ItemStatus.PROCESSING_REVERT_ERROR
];
const ITEM_BUSY = [
ItemStatus.LOADING,
ItemStatus.PROCESSING,
ItemStatus.PROCESSING_QUEUED,
ItemStatus.INIT
];
const ITEM_READY = [ItemStatus.PROCESSING_COMPLETE];
const isItemInErrorState = item => ITEM_ERROR.includes(item.status);
const isItemInBusyState = item => ITEM_BUSY.includes(item.status);
const isItemInReadyState = item => ITEM_READY.includes(item.status);
const queries = state => ({
GET_STATUS: () => {
const items = getActiveItems(state.items);
const { EMPTY, ERROR, BUSY, IDLE, READY } = Status;
if (items.length === 0) return EMPTY;
if (items.some(isItemInErrorState)) return ERROR;
if (items.some(isItemInBusyState)) return BUSY;
if (items.some(isItemInReadyState)) return READY;
return IDLE;
},
GET_ITEM: query => getItemByQuery(state.items, query),
GET_ACTIVE_ITEM: query => getItemByQuery(getActiveItems(state.items), query),
GET_ACTIVE_ITEMS: query => getActiveItems(state.items),
GET_ITEMS: query => state.items,
GET_ITEM_NAME: query => {
const item = getItemByQuery(state.items, query);
return item ? item.filename : null;
},
GET_ITEM_SIZE: query => {
const item = getItemByQuery(state.items, query);
return item ? item.fileSize : null;
},
GET_STYLES: () =>
Object.keys(state.options)
.filter(key => /^style/.test(key))
.map(option => ({
name: option,
value: state.options[option]
})),
GET_PANEL_ASPECT_RATIO: () => {
const isShapeCircle = /circle/.test(state.options.stylePanelLayout);
const aspectRatio = isShapeCircle
? 1
: getNumericAspectRatioFromString(state.options.stylePanelAspectRatio);
return aspectRatio;
},
GET_ITEM_PANEL_ASPECT_RATIO: () => state.options.styleItemPanelAspectRatio,
GET_ITEMS_BY_STATUS: status =>
getActiveItems(state.items).filter(item => item.status === status),
GET_TOTAL_ITEMS: () => getActiveItems(state.items).length,
IS_ASYNC: () =>
isObject(state.options.server) &&
(isObject(state.options.server.process) ||
isFunction(state.options.server.process))
});
const hasRoomForItem = state => {
const count = getActiveItems(state.items).length;
// if cannot have multiple items, to add one item it should currently not contain items
if (!state.options.allowMultiple) {
return count === 0;
}
// if allows multiple items, we check if a max item count has been set, if not, there's no limit
const maxFileCount = state.options.maxFiles;
if (maxFileCount === null) {
return true;
}
// we check if the current count is smaller than the max count, if so, another file can still be added
if (count < maxFileCount) {
return true;
}
// no more room for another file
return false;
};
const limit = (value, min, max) => Math.max(Math.min(max, value), min);
const arrayInsert = (arr, index, item) => arr.splice(index, 0, item);
const insertItem = (items, item, index) => {
if (isEmpty(item)) {
return null;
}
// if index is undefined, append
if (typeof index === 'undefined') {
items.push(item);
return item;
}
// limit the index to the size of the items array
index = limit(index, 0, items.length);
// add item to array
arrayInsert(items, index, item);
// expose
return item;
};
const isBase64DataURI = str =>
/^\s*data:([a-z]+\/[a-z0-9-+.]+(;[a-z-]+=[a-z0-9-]+)?)?(;base64)?,([a-z0-9!$&',()*+;=\-._~:@\/?%\s]*)\s*$/i.test(
str
);
const getFilenameFromURL = url =>
url
.split('/')
.pop()
.split('?')
.shift();
const getExtensionFromFilename = name => name.split('.').pop();
const guesstimateExtension = type => {
// if no extension supplied, exit here
if (typeof type !== 'string') {
return '';
}
// get subtype
const subtype = type.split('/').pop();
// is svg subtype
if (/svg/.test(subtype)) {
return 'svg';
}
if (/zip|compressed/.test(subtype)) {
return 'zip';
}
if (/plain/.test(subtype)) {
return 'txt';
}
if (/msword/.test(subtype)) {
return 'doc';
}
// if is valid subtype
if (/[a-z]+/.test(subtype)) {
// always use jpg extension
if (subtype === 'jpeg') {
return 'jpg';
}
// return subtype
return subtype;
}
return '';
};
const leftPad = (value, padding = '') =>
(padding + value).slice(-padding.length);
const getDateString = (date = new Date()) =>
`${date.getFullYear()}-${leftPad(date.getMonth() + 1, '00')}-${leftPad(
date.getDate(),
'00'
)}_${leftPad(date.getHours(), '00')}-${leftPad(
date.getMinutes(),
'00'
)}-${leftPad(date.getSeconds(), '00')}`;
const getFileFromBlob = (blob, filename, type = null, extension = null) => {
const file =
typeof type === 'string'
? blob.slice(0, blob.size, type)
: blob.slice(0, blob.size, blob.type);
file.lastModifiedDate = new Date();
// if blob has name property, use as filename if no filename supplied
if (!isString(filename)) {
filename = getDateString();
}
// if filename supplied but no extension and filename has extension
if (filename && extension === null && getExtensionFromFilename(filename)) {
file.name = filename;
} else {
extension = extension || guesstimateExtension(file.type);
file.name = filename + (extension ? '.' + extension : '');
}
return file;
};
const getBlobBuilder = () => {
return (window.BlobBuilder =
window.BlobBuilder ||
window.WebKitBlobBuilder ||
window.MozBlobBuilder ||
window.MSBlobBuilder);
};
const createBlob = (arrayBuffer, mimeType) => {
const BB = getBlobBuilder();
if (BB) {
const bb = new BB();
bb.append(arrayBuffer);
return bb.getBlob(mimeType);
}
return new Blob([arrayBuffer], {
type: mimeType
});
};
const getBlobFromByteStringWithMimeType = (byteString, mimeType) => {
const ab = new ArrayBuffer(byteString.length);
const ia = new Uint8Array(ab);
for (let i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return createBlob(ab, mimeType);
};
const getMimeTypeFromBase64DataURI = dataURI => {
return (/^data:(.+);/.exec(dataURI) || [])[1] || null;
};
const getBase64DataFromBase64DataURI = dataURI => {
// get data part of string (remove data:image/jpeg...,)
const data = dataURI.split(',')[1];
// remove any whitespace as that causes InvalidCharacterError in IE
return data.replace(/\s/g, '');
};
const getByteStringFromBase64DataURI = dataURI => {
return atob(getBase64DataFromBase64DataURI(dataURI));
};
const getBlobFromBase64DataURI = dataURI => {
const mimeType = getMimeTypeFromBase64DataURI(dataURI);
const byteString = getByteStringFromBase64DataURI(dataURI);
return getBlobFromByteStringWithMimeType(byteString, mimeType);
};
const getFileFromBase64DataURI = (dataURI, filename, extension) => {
return getFileFromBlob(
getBlobFromBase64DataURI(dataURI),
filename,
null,
extension
);
};
const getFileNameFromHeader = header => {
// test if is content disposition header, if not exit
if (!/^content-disposition:/i.test(header)) return null;
// get filename parts
const matches = header
.split(/filename=|filename\*=.+''/)
.splice(1)
.map(name => name.trim().replace(/^["']|[;"']{0,2}$/g, ''))
.filter(name => name.length);
return matches.length ? decodeURI(matches[matches.length - 1]) : null;
};
const getFileSizeFromHeader = header => {
if (/content-length:/i.test(header)) {
const size = header.match(/[0-9]+/)[0];
return size ? parseInt(size, 10) : null;
}
return null;
};
const getTranfserIdFromHeader = header => {
if (/x-content-transfer-id:/i.test(header)) {
const id = (header.split(':')[1] || '').trim();
return id || null;
}
return null;
};
const getFileInfoFromHeaders = headers => {
const info = {
source: null,
name: null,
size: null
};
const rows = headers.split('\n');
for (let header of rows) {
const name = getFileNameFromHeader(header);
if (name) {
info.name = name;
continue;
}
const size = getFileSizeFromHeader(header);
if (size) {
info.size = size;
continue;
}
const source = getTranfserIdFromHeader(header);
if (source) {
info.source = source;
continue;
}
}
return info;
};
const createFileLoader = fetchFn => {
const state = {
source: null,
complete: false,
progress: 0,
size: null,
timestamp: null,
duration: 0,
request: null
};
const getProgress = () => state.progress;
const abort = () => {
if (state.request && state.request.abort) {
state.request.abort();
}
};
// load source
const load = () => {
// get quick reference
const source = state.source;
api.fire('init', source);
// Load Files
if (source instanceof File) {
api.fire('load', source);
} else if (source instanceof Blob) {
// Load blobs, set default name to current date
api.fire('load', getFileFromBlob(source, source.name));
} else if (isBase64DataURI(source)) {
// Load base 64, set default name to current date
api.fire('load', getFileFromBase64DataURI(source));
} else {
// Deal as if is external URL, let's load it!
loadURL(source);
}
};
// loads a url
const loadURL = url => {
// is remote url and no fetch method supplied
if (!fetchFn) {
api.fire('error', {
type: 'error',
body: "Can't load URL",
code: 400
});
return;
}
// set request start
state.timestamp = Date.now();
// load file
state.request = fetchFn(
url,
response => {
// update duration
state.duration = Date.now() - state.timestamp;
// done!
state.complete = true;
// turn blob response into a file
if (response instanceof Blob) {
response = getFileFromBlob(
response,
response.name || getFilenameFromURL(url)
);
}
api.fire('load', response instanceof Blob ? response : response.body);
},
error => {
api.fire(
'error',
typeof error === 'string'
? {
type: 'error',
code: 0,
body: error
}
: error
);
},
(computable, current, total) => {
// collected some meta data already
if (total) {
state.size = total;
}
// update duration
state.duration = Date.now() - state.timestamp;
// if we can't compute progress, we're not going to fire progress events
if (!computable) {
state.progress = null;
return;
}
// update progress percentage
state.progress = current / total;
// expose
api.fire('progress', state.progress);
},
() => {
api.fire('abort');
},
response => {
const fileinfo = getFileInfoFromHeaders(
typeof response === 'string' ? response : response.headers
);
api.fire('meta', {
size: state.size || fileinfo.size,
filename: fileinfo.name,
source: fileinfo.source
});
}
);
};
const api = {
...on(),
setSource: source => (state.source = source),
getProgress, // file load progress
abort, // abort file load
load // start load
};
return api;
};
const isGet = method => /GET|HEAD/.test(method);
const sendRequest = (data, url, options) => {
const api = {
onheaders: () => {},
onprogress: () => {},
onload: () => {},
ontimeout: () => {},
onerror: () => {},
onabort: () => {},
abort: () => {
aborted = true;
xhr.abort();
}
};
// timeout identifier, only used when timeout is defined
let aborted = false;
let headersReceived = false;
// set default options
options = {
method: 'POST',
headers: {},
withCredentials: false,
...options
};
// encode url
url = encodeURI(url);
// if method is GET, add any received data to url
if (isGet(options.method) && data) {
url = `${url}${encodeURIComponent(
typeof data === 'string' ? data : JSON.stringify(data)
)}`;
}
// create request
const xhr = new XMLHttpRequest();
// progress of load
const process = isGet(options.method) ? xhr : xhr.upload;
process.onprogress = e => {
// no progress event when aborted ( onprogress is called once after abort() )
if (aborted) {
return;
}
api.onprogress(e.lengthComputable, e.loaded, e.total);
};
// tries to get header info to the app as fast as possible
xhr.onreadystatechange = () => {
// not interesting in these states ('unsent' and 'openend' as they don't give us any additional info)
if (xhr.readyState < 2) {
return;
}
// no server response
if (xhr.readyState === 4 && xhr.status === 0) {
return;
}
if (headersReceived) {
return;
}
headersReceived = true;
// we've probably received some useful data in response headers
api.onheaders(xhr);
};
// load successful
xhr.onload = () => {
// is classified as valid response
if (xhr.status >= 200 && xhr.status < 300) {
api.onload(xhr);
} else {
api.onerror(xhr);
}
};
// error during load
xhr.onerror = () => api.onerror(xhr);
// request aborted
xhr.onabort = () => {
aborted = true;
api.onabort();
};
// request timeout
xhr.ontimeout = () => api.ontimeout(xhr);
// open up open up!
xhr.open(options.method, url, true);
// set timeout if defined (do it after open so IE11 plays ball)
if (isInt(options.timeout)) {
xhr.timeout = options.timeout;
}
// add headers
Object.keys(options.headers).forEach(key => {
xhr.setRequestHeader(key, options.headers[key]);
});
// set type of response
if (options.responseType) {
xhr.responseType = options.responseType;
}
// set credentials
if (options.withCredentials) {
xhr.withCredentials = true;
}
// let's send our data
xhr.send(data);
return api;
};
const createResponse = (type, code, body, headers) => ({
type,
code,
body,
headers
});
const createTimeoutResponse = cb => xhr => {
cb(createResponse('error', 0, 'Timeout', xhr.getAllResponseHeaders()));
};
const createFetchFunction = (apiUrl = '', action) => {
// custom handler (should also handle file, load, error, progress and abort)
if (typeof action === 'function') {
return action;
}
// no action supplied
if (!action || !isString(action.url)) {
return null;
}
// set onload hanlder
const onload = action.onload || (res => res);
const onerror = action.onerror || (res => null);
// internal handler
return (url, load, error, progress, abort, headers) => {
// do local or remote request based on if the url is external
const request = sendRequest(url, apiUrl + action.url, {
...action,
responseType: 'blob'
});
request.onload = xhr => {
// get headers
const headers = xhr.getAllResponseHeaders();
// get filename
const filename =
getFileInfoFromHeaders(headers).name || getFilenameFromURL(url);
// create response
load(
createResponse(
'load',
xhr.status,
getFileFromBlob(onload(xhr.response), filename),
headers
)
);
};
request.onerror = xhr => {
error(
createResponse(
'error',
xhr.status,
onerror(xhr.response) || xhr.statusText,
xhr.getAllResponseHeaders()
)
);
};
request.onheaders = xhr => {
headers(
createResponse('headers', xhr.status, null, xhr.getAllResponseHeaders())
);
};
request.ontimeout = createTimeoutResponse(error);
request.onprogress = progress;
request.onabort = abort;
// should return request
return request;
};
};
/*
function signature:
(file, metadata, load, error, progress, abort) => {
return {
abort:() => {}
}
}
*/
const createProcessorFunction = (apiUrl = '', action, name) => {
// custom handler (should also handle file, load, error, progress and abort)
if (typeof action === 'function') {
return (...params) => action(name, ...params);
}
// no action supplied
if (!action || !isString(action.url)) {
return null;
}
// internal handler
return (file, metadata, load, error, progress, abort) => {
// set onload hanlder
const ondata = action.ondata || (fd => fd);
const onload = action.onload || (res => res);
const onerror = action.onerror || (res => null);
// no file received
if (!file) return;
// create formdata object
var formData = new FormData();
// add metadata under same name
if (isObject(metadata)) {
formData.append(name, JSON.stringify(metadata));
}
// Turn into an array of objects so no matter what the input, we can handle it the same way
(file instanceof Blob ? [{ name: null, file }] : file).forEach(item => {
formData.append(
name,
item.file,
item.name === null ? item.file.name : `${item.name}${item.file.name}`
);
});
// send request object
const request = sendRequest(ondata(formData), apiUrl + action.url, action);
request.onload = xhr => {
load(
createResponse(
'load',
xhr.status,
onload(xhr.response),
xhr.getAllResponseHeaders()
)
);
};
request.onerror = xhr => {
error(
createResponse(
'error',
xhr.status,
onerror(xhr.response) || xhr.statusText,
xhr.getAllResponseHeaders()
)
);
};
request.ontimeout = createTimeoutResponse(error);
request.onprogress = progress;
request.onabort = abort;
// should return request
return request;
};
};
/*
function signature:
(uniqueFileId, load, error) => { }
*/
const createRevertFunction = (apiUrl = '', action) => {
// is custom implementation
if (typeof action === 'function') {
return action;
}
// no action supplied, return stub function, interface will work, but file won't be removed
if (!action || !isString(action.url)) {
return (uniqueFileId, load) => load();
}
// set onload hanlder
const onload = action.onload || (res => res);
const onerror = action.onerror || (res => null);
// internal implementation
return (uniqueFileId, load, error) => {
const request = sendRequest(
uniqueFileId,
apiUrl + action.url,
action // contains method, headers and withCredentials properties
);
request.onload = xhr => {
load(
createResponse(
'load',
xhr.status,
onload(xhr.response),
xhr.getAllResponseHeaders()
)
);
};
request.onerror = xhr => {
error(
createResponse(
'error',
xhr.status,
onerror(xhr.response) || xhr.statusText,
xhr.getAllResponseHeaders()
)
);
};
request.ontimeout = createTimeoutResponse(error);
return request;
};
};
const getRandomNumber = (min = 0, max = 1) => min + Math.random() * (max - min);
const createPerceivedPerformanceUpdater = (
cb,
duration = 1000,
offset = 0,
tickMin = 25,
tickMax = 250
) => {
let timeout = null;
const start = Date.now();
const tick = () => {
let runtime = Date.now() - start;
let delay = getRandomNumber(tickMin, tickMax);
if (runtime + delay > duration) {
delay = runtime + delay - duration;
}
let progress = runtime / duration;
if (progress >= 1) {
cb(1);
return;
}
cb(progress);
timeout = setTimeout(tick, delay);
};
tick();
return {
clear: () => {
clearTimeout(timeout);
}
};
};
const createFileProcessor = processFn => {
const state = {
complete: false,
perceivedProgress: 0,
perceivedPerformanceUpdater: null,
progress: null,
timestamp: null,
perceivedDuration: 0,
duration: 0,
request: null,
response: null
};
const process = (file, metadata) => {
const progressFn = () => {
// we've not yet started the real download, stop here
// the request might not go through, for instance, there might be some server trouble
// if state.progress is null, the server does not allow computing progress and we show the spinner instead
if (state.duration === 0 || state.progress === null) {
return;
}
// as we're now processing, fire the progress event
api.fire('progress', api.getProgress());
};
const completeFn = () => {
state.complete = true;
api.fire('load-perceived', state.response.body);
};
// let's start processing
api.fire('start');
// set request start
state.timestamp = Date.now();
// create perceived performance progress indicator
state.perceivedPerformanceUpdater = createPerceivedPerformanceUpdater(
progress => {
state.perceivedProgress = progress;
state.perceivedDuration = Date.now() - state.timestamp;
progressFn();
// if fake progress is done, and a response has been received,
// and we've not yet called the complete method
if (
state.response &&
state.perceivedProgress === 1 &&
!state.complete
) {
// we done!
completeFn();
}
},
// random delay as in a list of files you start noticing
// files uploading at the exact same speed
getRandomNumber(750, 1500)
);
// remember request so we can abort it later
state.request = processFn(
// the file to process
file,
// the metadata to send along
metadata,
// callbacks (load, error, progress, abort)
// load expects the body to be a server id if
// you want to make use of revert
response => {
// we put the response in state so we can access
// it outside of this method
state.response = isObject(response)
? response
: {
type: 'load',
code: 200,
body: `${response}`,
headers: {}
};
// update duration
state.duration = Date.now() - state.timestamp;
// force progress to 1 as we're now done
state.progress = 1;
// actual load is done let's share results
api.fire('load', state.response.body);
// we are really done
// if perceived progress is 1 ( wait for perceived progress to complete )
// or if server does not support progress ( null )
if (state.perceivedProgress === 1) {
completeFn();
}
},
// error is expected to be an object with type, code, body
error => {
// cancel updater
state.perceivedPerformanceUpdater.clear();
// update others about this error
api.fire(
'error',
isObject(error)
? error
: {
type: 'error',
code: 0,
body: `${error}`
}
);
},
// actual processing progress
(computable, current, total) => {
// update actual duration
state.duration = Date.now() - state.timestamp;
// update actual progress
state.progress = computable ? current / total : null;
progressFn();
},
// abort does not expect a value
() => {
// stop updater
state.perceivedPerformanceUpdater.clear();
// fire the abort event so we can switch visuals
api.fire('abort', state.response ? state.response.body : null);
}
);
};
const abort = () => {
// no request running, can't abort
if (!state.request) return;
// stop updater
state.perceivedPerformanceUpdater.clear();
// abort actual request
state.request.abort();
// if has response object, we've completed the request
state.complete = true;
};
const reset = () => {
abort();
state.complete = false;
state.perceivedProgress = 0;
state.progress = 0;
state.timestamp = null;
state.perceivedDuration = 0;
state.duration = 0;
state.request = null;
state.response = null;
};
const getProgress = () =>
state.progress ? Math.min(state.progress, state.perceivedProgress) : null;
const getDuration = () => Math.min(state.duration, state.perceivedDuration);
const api = {
...on(),
process, // start processing file
abort, // abort active process request
getProgress,
getDuration,
reset
};
return api;
};
const getFilenameWithoutExtension = name =>
name.substr(0, name.lastIndexOf('.')) || name;
const createFileStub = source => {
let data = [source.name, source.size, source.type];
// is blob or base64, then we need to set the name
if (source instanceof Blob || isBase64DataURI(source)) {
data[0] = source.name || getDateString();
} else if (isBase64DataURI(source)) {
// if is base64 data uri we need to determine the average size and type
data[1] = source.length;
data[2] = getMimeTypeFromBase64DataURI(source);
} else if (isString(source)) {
// url
data[0] = getFilenameFromURL(source);
data[1] = 0;
data[2] = 'application/octet-stream';
}
return {
name: data[0],
size: data[1],
type: data[2]
};
};
const isFile = value =>
!!(value instanceof File || (value instanceof Blob && value.name));
const deepCloneObject = src => {
if (!isObject(src)) return src;
const target = isArray(src) ? [] : {};
for (const key in src) {
if (!src.hasOwnProperty(key)) continue;
const v = src[key];
target[key] = v && isObject(v) ? deepCloneObject(v) : v;
}
return target;
};
const createItem = (origin = null, serverFileReference = null, file = null) => {
// unique id for this item, is used to identify the item across views
const id = getUniqueId();
/**
* Internal item state
*/
const state = {
// is archived
archived: false,
// if is frozen, no longer fires events
frozen: false,
// removed from view
released: false,
// original source
source: null,
// file model reference
file,
// id of file on server
serverFileReference,
// current item status
status: serverFileReference
? ItemStatus.PROCESSING_COMPLETE
: ItemStatus.INIT,
// active processes
activeLoader: null,
activeProcessor: null
};
// callback used when abort processing is called to link back to the resolve method
let abortProcessingRequestComplete = null;
/**
* Externally added item metadata
*/
const metadata = {};
// item data
const setStatus = status => (state.status = status);
// fire event unless the item has been archived
const fire = (event, ...params) => {
if (state.released || state.frozen) return;
api.fire(event, ...params);
};
// file data
const getFileExtension = () => getExtensionFromFilename(state.file.name);
const getFileType = () => state.file.type;
const getFileSize = () => state.file.size;
const getFile = () => state.file;
//
// logic to load a file
//
const load = (source, loader, onload) => {
// remember the original item source
state.source = source;
// file stub is already there
if (state.file) {
fire('load-skip');
return;
}
// set a stub file object while loading the actual data
state.file = createFileStub(source);
// starts loading
loader.on('init', () => {
fire('load-init');
});
// we'eve received a size indication, let's update the stub
loader.on('meta', meta => {
// set size of file stub
state.file.size = meta.size;
// set name of file stub
state.file.filename = meta.filename;
// if has received source, we done
if (meta.source) {
origin = FileOrigin.LIMBO;
state.serverFileReference = meta.source;
state.status = ItemStatus.PROCESSING_COMPLETE;
}
// size has been updated
fire('load-meta');
});
// the file is now loading we need to update the progress indicators
loader.on('progress', progress => {
setStatus(ItemStatus.LOADING);
fire('load-progress', progress);
});
// an error was thrown while loading the file, we need to switch to error state
loader.on('error', error => {
setStatus(ItemStatus.LOAD_ERROR);
fire('load-request-error', error);
});
// user or another process aborted the file load (cannot retry)
loader.on('abort', () => {
setStatus(ItemStatus.INIT);
fire('load-abort');
});
// done loading
loader.on('load', file => {
// as we've now loaded the file the loader is no longer required
state.activeLoader = null;
// called when file has loaded succesfully
const success = result => {
// set (possibly) transformed file
state.file = isFile(result) ? result : state.file;
// file received
if (origin === FileOrigin.LIMBO && state.serverFileReference) {
setStatus(ItemStatus.PROCESSING_COMPLETE);
} else {
setStatus(ItemStatus.IDLE);
}
fire('load');
};
const error = result => {
// set original file
state.file = file;
fire('load-meta');
setStatus(ItemStatus.LOAD_ERROR);
fire('load-file-error', result);
};
// if we already have a server file reference, we don't need to call the onload method
if (state.serverFileReference) {
success(file);
return;
}
// no server id, let's give this file the full treatment
onload(file, success, error);
});
// set loader source data
loader.setSource(source);
// set as active loader
state.activeLoader = loader;
// load the source data
loader.load();
};
const retryLoad = () => {
if (!state.activeLoader) {
return;
}
state.activeLoader.load();
};
const abortLoad = () => {
if (state.activeLoader) {
state.activeLoader.abort();
return;
}
setStatus(ItemStatus.INIT);
fire('load-abort');
};
//
// logic to process a file
//
const process = (processor, onprocess) => {
// now processing
setStatus(ItemStatus.PROCESSING);
// reset abort callback
abortProcessingRequestComplete = null;
// if no file loaded we'll wait for the load event
if (!(state.file instanceof Blob)) {
api.on('load', () => {
process(processor, onprocess);
});
return;
}
// setup processor
processor.on('load', serverFileReference => {
// need this id to be able to revert the upload
state.serverFileReference = serverFileReference;
});
processor.on('load-perceived', serverFileReference => {
// no longer required
state.activeProcessor = null;
// need this id to be able to rever the upload
state.serverFileReference = serverFileReference;
setStatus(ItemStatus.PROCESSING_COMPLETE);
fire('process-complete', serverFileReference);
});
processor.on('start', () => {
fire('process-start');
});
processor.on('error', error => {
state.activeProcessor = null;
setStatus(ItemStatus.PROCESSING_ERROR);
fire('process-error', error);
});
processor.on('abort', serverFileReference => {
state.activeProcessor = null;
// if file was uploaded but processing was cancelled during perceived processor time store file reference
state.serverFileReference = serverFileReference;
setStatus(ItemStatus.IDLE);
fire('process-abort');
// has timeout so doesn't interfere with remove action
if (abortProcessingRequestComplete) {
abortProcessingRequestComplete();
}
});
processor.on('progress', progress => {
fire('process-progress', progress);
});
// when successfully transformed
const success = file => {
// if was archived in the mean time, don't process
if (state.archived) return;
// process file!
processor.process(file, { ...metadata });
};
// something went wrong during transform phase
const error = result => {};
// start processing the file
onprocess(state.file, success, error);
// set as active processor
state.activeProcessor = processor;
};
const requestProcessing = () => {
setStatus(ItemStatus.PROCESSING_QUEUED);
};
const abortProcessing = () =>
new Promise(resolve => {
if (!state.activeProcessor) {
setStatus(ItemStatus.IDLE);
fire('process-abort');
resolve();
return;
}
abortProcessingRequestComplete = () => {
resolve();
};
state.activeProcessor.abort();
});
//
// logic to revert a processed file
//
const revert = (revertFileUpload, forceRevert) =>
new Promise((resolve, reject) => {
// cannot revert without a server id for this process
if (state.serverFileReference === null) {
resolve();
return;
}
// revert the upload (fire and forget)
revertFileUpload(
state.serverFileReference,
() => {
// reset file server id as now it's no available on the server
state.serverFileReference = null;
resolve();
},
error => {
// don't set error state when reverting is optional, it will always resolve
if (!forceRevert) {
resolve();
return;
}
// oh no errors
setStatus(ItemStatus.PROCESSING_REVERT_ERROR);
fire('process-revert-error');
reject(error);
}
);
// fire event
setStatus(ItemStatus.IDLE);
fire('process-revert');
});
// exposed methods
const setMetadata = (key, value, silent) => {
const keys = key.split('.');
const root = keys[0];
const last = keys.pop();
let data = metadata;
keys.forEach(key => (data = data[key]));
// compare old value against new value, if they're the same, we're not updating
if (JSON.stringify(data[last]) === JSON.stringify(value)) return;
// update value
data[last] = value;
// don't fire update
if (silent) return;
// fire update
fire('metadata-update', {
key: root,
value: metadata[root]
});
};
const getMetadata = key => deepCloneObject(key ? metadata[key] : metadata);
const api = {
id: { get: () => id },
origin: { get: () => origin },
serverId: { get: () => state.serverFileReference },
status: { get: () => state.status },
filename: { get: () => state.file.name },
filenameWithoutExtension: {
get: () => getFilenameWithoutExtension(state.file.name)
},
fileExtension: { get: getFileExtension },
fileType: { get: getFileType },
fileSize: { get: getFileSize },
file: { get: getFile },
source: { get: () => state.source },
getMetadata,
setMetadata: (key, value, silent) => {
if (isObject(key)) {
const data = key;
Object.keys(data).forEach(key => {
setMetadata(key, data[key], value);
});
return key;
}
setMetadata(key, value, silent);
return value;
},
extend: (name, handler) => (itemAPI[name] = handler),
abortLoad,
retryLoad,
requestProcessing,
abortProcessing,
load,
process,
revert,
...on(),
freeze: () => (state.frozen = true),
release: () => (state.released = true),
released: { get: () => state.released },
archive: () => (state.archived = true),
archived: { get: () => state.archived }
};
// create it here instead of returning it instantly so we can extend it later
const itemAPI = createObject(api);
return itemAPI;
};
const getItemIndexByQuery = (items, query) => {
// just return first index
if (isEmpty(query)) {
return 0;
}
// invalid queries
if (!isString(query)) {
return -1;
}
// return item by id (or -1 if not found)
return items.findIndex(item => item.id === query);
};
const getItemById = (items, itemId) => {
const index = getItemIndexByQuery(items, itemId);
if (index < 0) {
return;
}
return items[index] || null;
};
const fetchLocal = (url, load, error, progress, abort, headers) => {
const request = sendRequest(null, url, {
method: 'GET',
responseType: 'blob'
});
request.onload = xhr => {
// get headers
const headers = xhr.getAllResponseHeaders();
// get filename
const filename =
getFileInfoFromHeaders(headers).name || getFilenameFromURL(url);
// create response
load(
createResponse(
'load',
xhr.status,
getFileFromBlob(xhr.response, filename),
headers
)
);
};
request.onerror = xhr => {
error(
createResponse(
'error',
xhr.status,
xhr.statusText,
xhr.getAllResponseHeaders()
)
);
};
request.onheaders = xhr => {
headers(
createResponse('headers', xhr.status, null, xhr.getAllResponseHeaders())
);
};
request.ontimeout = createTimeoutResponse(error);
request.onprogress = progress;
request.onabort = abort;
// should return request
return request;
};
const getDomainFromURL = url => {
if (url.indexOf('//') === 0) {
url = location.protocol + url;
}
return url
.toLowerCase()
.replace('blob:', '')
.replace(/([a-z])?:\/\//, '$1')
.split('/')[0];
};
const isExternalURL = url =>
(url.indexOf(':') > -1 || url.indexOf('//') > -1) &&
getDomainFromURL(location.href) !== getDomainFromURL(url);
const dynamicLabel = label => (...params) =>
isFunction(label) ? label(...params) : label;
const isMockItem = item => !isFile(item.file);
const listUpdated = (dispatch, state) => {
clearTimeout(state.listUpdateTimeout);
state.listUpdateTimeout = setTimeout(() => {
dispatch('DID_UPDATE_ITEMS', { items: getActiveItems(state.items) });
}, 0);
};
const optionalPromise = (fn, ...params) =>
new Promise(resolve => {
if (!fn) {
return resolve(true);
}
const result = fn(...params);
if (result == null) {
return resolve(true);
}
if (typeof result === 'boolean') {
return resolve(result);
}
if (typeof result.then === 'function') {
result.then(resolve);
}
});
const sortItems = (state, compare) => {
state.items.sort((a, b) => compare(createItemAPI(a), createItemAPI(b)));
};
// returns item based on state
const getItemByQueryFromState = (state, itemHandler) => ({
query,
success = () => {},
failure = () => {}
} = {}) => {
const item = getItemByQuery(state.items, query);
if (!item) {
failure({
error: createResponse('error', 0, 'Item not found'),
file: null
});
return;
}
itemHandler(item, success, failure);
};
const actions = (dispatch, query, state) => ({
/**
* Aborts all ongoing processes
*/
ABORT_ALL: () => {
getActiveItems(state.items).forEach(item => {
item.freeze();
item.abortLoad();
item.abortProcessing();
});
},
/**
* Sets initial files
*/
DID_SET_FILES: ({ value = [] }) => {
// map values to file objects
const files = value.map(file => ({
source: file.source ? file.source : file,
options: file.options
}));
// loop over files, if file is in list, leave it be, if not, remove
// test if items should be moved
let activeItems = getActiveItems(state.items);
activeItems.forEach(item => {
// if item not is in new value, remove
if (
!files.find(
file => file.source === item.source || file.source === item.file
)
) {
dispatch('REMOVE_ITEM', { query: item });
}
});
// add new files
activeItems = getActiveItems(state.items);
files.forEach((file, index) => {
// if file is already in list
if (
activeItems.find(
item => item.source === file.source || item.file === file.source
)
)
return;
// not in list, add
dispatch('ADD_ITEM', {
...file,
interactionMethod: InteractionMethod.NONE,
index
});
});
},
DID_UPDATE_ITEM_METADATA: ({ id }) => {
// if is called multiple times in close succession we combined all calls together to save resources
clearTimeout(state.itemUpdateTimeout);
state.itemUpdateTimeout = setTimeout(() => {
const item = getItemById(state.items, id);
// only revert and attempt to upload when we're uploading to a server
if (!query('IS_ASYNC')) {
// should we update the output data
applyFilterChain('SHOULD_PREPARE_OUTPUT', false, { item, query }).then(
shouldPrepareOutput => {
if (!shouldPrepareOutput) {
return;
}
dispatch(
'REQUEST_PREPARE_OUTPUT',
{
query: id,
item,
ready: file => {
dispatch('DID_PREPARE_OUTPUT', { id, file });
}
},
true
);
}
);
return;
}
// for async scenarios
const upload = () => {
// we push this forward a bit so the interface is updated correctly
setTimeout(() => {
dispatch('REQUEST_ITEM_PROCESSING', { query: id });
}, 32);
};
const revert = doUpload => {
item
.revert(
createRevertFunction(
state.options.server.url,
state.options.server.revert
),
query('GET_FORCE_REVERT')
)
.then(doUpload ? upload : () => {})
.catch(() => {});
};
const abort = doUpload => {
item.abortProcessing().then(doUpload ? upload : () => {});
};
// if we should re-upload the file immidiately
if (item.status === ItemStatus.PROCESSING_COMPLETE) {
return revert(state.options.instantUpload);
}
// if currently uploading, cancel upload
if (item.status === ItemStatus.PROCESSING) {
return abort(state.options.instantUpload);
}
if (state.options.instantUpload) {
upload();
}
}, 0);
},
SORT: ({ compare }) => {
sortItems(state, compare);
},
ADD_ITEMS: ({
items,
index,
interactionMethod,
success = () => {},
failure = () => {}
}) => {
let currentIndex = index;
if (index === -1 || typeof index === 'undefined') {
const insertLocation = query('GET_ITEM_INSERT_LOCATION');
const totalItems = query('GET_TOTAL_ITEMS');
currentIndex = insertLocation === 'before' ? 0 : totalItems;
}
const ignoredFiles = query('GET_IGNORED_FILES');
const isValidFile = source =>
isFile(source)
? !ignoredFiles.includes(source.name.toLowerCase())
: !isEmpty(source);
const validItems = items.filter(isValidFile);
const promises = validItems.map(
source =>
new Promise((resolve, reject) => {
dispatch('ADD_ITEM', {
interactionMethod,
source: source.source || source,
success: resolve,
failure: reject,
index: currentIndex++,
options: source.options || {}
});
})
);
Promise.all(promises)
.then(success)
.catch(failure);
},
/**
* @param source
* @param index
* @param interactionMethod
*/
ADD_ITEM: ({
source,
index = -1,
interactionMethod,
success = () => {},
failure = () => {},
options = {}
}) => {
// if no source supplied
if (isEmpty(source)) {
failure({
error: createResponse('error', 0, 'No source'),
file: null
});
return;
}
// filter out invalid file items, used to filter dropped directory contents
if (
isFile(source) &&
state.options.ignoredFiles.includes(source.name.toLowerCase())
) {
// fail silently
return;
}
// test if there's still room in the list of files
if (!hasRoomForItem(state)) {
// if multiple allowed, we can't replace
// or if only a single item is allowed but we're not allowed to replace it we exit
if (
state.options.allowMultiple ||
(!state.options.allowMultiple && !state.options.allowReplace)
) {
const error = createResponse('warning', 0, 'Max files');
dispatch('DID_THROW_MAX_FILES', {
source,
error
});
failure({ error, file: null });
return;
}
// let's replace the item
// id of first item we're about to remove
const item = getActiveItems(state.items)[0];
// if has been processed remove it from the server as well
if (
item.status === ItemStatus.PROCESSING_COMPLETE ||
item.status === ItemStatus.PROCESSING_REVERT_ERROR
) {
const forceRevert = query('GET_FORCE_REVERT');
item
.revert(
createRevertFunction(
state.options.server.url,
state.options.server.revert
),
forceRevert
)
.then(() => {
if (!forceRevert) return;
// try to add now
dispatch('ADD_ITEM', {
source,
index,
interactionMethod,
success,
failure,
options
});
})
.catch(() => {}); // no need to handle this catch state for now
if (forceRevert) return;
}
// remove first item as it will be replaced by this item
dispatch('REMOVE_ITEM', { query: item.id });
}
// where did the file originate
const origin =
options.type === 'local'
? FileOrigin.LOCAL
: options.type === 'limbo'
? FileOrigin.LIMBO
: FileOrigin.INPUT;
// create a new blank item
const item = createItem(
// where did this file come from
origin,
// an input file never has a server file reference
origin === FileOrigin.INPUT ? null : source,
// file mock data, if defined
options.file
);
// set initial meta data
Object.keys(options.metadata || {}).forEach(key => {
item.setMetadata(key, options.metadata[key]);
});
// created the item, let plugins add methods
applyFilters('DID_CREATE_ITEM', item, { query, dispatch });
// where to insert new items
const itemInsertLocation = query('GET_ITEM_INSERT_LOCATION');
// adjust index if is not allowed to pick location
if (!state.options.itemInsertLocationFreedom) {
index = itemInsertLocation === 'before' ? -1 : state.items.length;
}
// add item to list
insertItem(state.items, item, index);
// sort items in list
if (isFunction(itemInsertLocation) && source) {
sortItems(state, itemInsertLocation);
}
// get a quick reference to the item id
const id = item.id;
// observe item events
item.on('load-init', () => {
dispatch('DID_START_ITEM_LOAD', { id });
});
item.on('load-meta', () => {
dispatch('DID_UPDATE_ITEM_META', { id });
});
item.on('load-progress', progress => {
dispatch('DID_UPDATE_ITEM_LOAD_PROGRESS', { id, progress });
});
item.on('load-request-error', error => {
const mainStatus = dynamicLabel(state.options.labelFileLoadError)(error);
// is client error, no way to recover
if (error.code >= 400 && error.code < 500) {
dispatch('DID_THROW_ITEM_INVALID', {
id,
error,
status: {
main: mainStatus,
sub: `${error.code} (${error.body})`
}
});
// reject the file so can be dealt with through API
failure({ error, file: createItemAPI(item) });
return;
}
// is possible server error, so might be possible to retry
dispatch('DID_THROW_ITEM_LOAD_ERROR', {
id,
error,
status: {
main: mainStatus,
sub: state.options.labelTapToRetry
}
});
});
item.on('load-file-error', error => {
dispatch('DID_THROW_ITEM_INVALID', {
id,
error: error.status,
status: error.status
});
failure({ error: error.status, file: createItemAPI(item) });
});
item.on('load-abort', () => {
dispatch('REMOVE_ITEM', { query: id });
});
item.on('load-skip', () => {
dispatch('COMPLETE_LOAD_ITEM', {
query: id,
item,
data: {
source,
success
}
});
});
item.on('load', () => {
const handleAdd = shouldAdd => {
// no should not add this file
if (!shouldAdd) {
dispatch('REMOVE_ITEM', {
query: id
});
return;
}
// now interested in metadata updates
item.on('metadata-update', change => {
dispatch('DID_UPDATE_ITEM_METADATA', { id, change });
});
// let plugins decide if the output data should be prepared at this point
// means we'll do this and wait for idle state
applyFilterChain('SHOULD_PREPARE_OUTPUT', false, { item, query }).then(
shouldPrepareOutput => {
const loadComplete = () => {
dispatch('COMPLETE_LOAD_ITEM', {
query: id,
item,
data: {
source,
success
}
});
listUpdated(dispatch, state);
};
// exit
if (shouldPrepareOutput) {
// wait for idle state and then run PREPARE_OUTPUT
dispatch(
'REQUEST_PREPARE_OUTPUT',
{
query: id,
item,
ready: file => {
dispatch('DID_PREPARE_OUTPUT', { id, file });
loadComplete();
}
},
true
);
return;
}
loadComplete();
}
);
};
// item loaded, allow plugins to
// - read data (quickly)
// - add metadata
applyFilterChain('DID_LOAD_ITEM', item, { query, dispatch })
.then(() => {
optionalPromise(
query('GET_BEFORE_ADD_FILE'),
createItemAPI(item)
).then(handleAdd);
})
.catch(() => {
handleAdd(false);
});
});
item.on('process-start', () => {
dispatch('DID_START_ITEM_PROCESSING', { id });
});
item.on('process-progress', progress => {
dispatch('DID_UPDATE_ITEM_PROCESS_PROGRESS', { id, progress });
});
item.on('process-error', error => {
dispatch('DID_THROW_ITEM_PROCESSING_ERROR', {
id,
error,
status: {
main: dynamicLabel(state.options.labelFileProcessingError)(error),
sub: state.options.labelTapToRetry
}
});
});
item.on('process-revert-error', error => {
dispatch('DID_THROW_ITEM_PROCESSING_REVERT_ERROR', {
id,
error,
status: {
main: dynamicLabel(state.options.labelFileProcessingRevertError)(
error
),
sub: state.options.labelTapToRetry
}
});
});
item.on('process-complete', serverFileReference => {
dispatch('DID_COMPLETE_ITEM_PROCESSING', {
id,
error: null,
serverFileReference
});
});
item.on('process-abort', () => {
dispatch('DID_ABORT_ITEM_PROCESSING', { id });
});
item.on('process-revert', () => {
dispatch('DID_REVERT_ITEM_PROCESSING', { id });
});
// let view know the item has been inserted
dispatch('DID_ADD_ITEM', { id, index, interactionMethod });
listUpdated(dispatch, state);
// start loading the source
const { url, load, restore, fetch } = state.options.server || {};
item.load(
source,
// this creates a function that loads the file based on the type of file (string, base64, blob, file) and location of file (local, remote, limbo)
createFileLoader(
origin === FileOrigin.INPUT
? // input
isString(source) && isExternalURL(source)
? createFetchFunction(url, fetch) // remote url
: fetchLocal // local url
: // limbo or local
origin === FileOrigin.LIMBO
? createFetchFunction(url, restore) // limbo
: createFetchFunction(url, load) // local
),
// called when the file is loaded so it can be piped through the filters
(file, success, error) => {
// let's process the file
applyFilterChain('LOAD_FILE', file, { query })
.then(success)
.catch(error);
}
);
},
REQUEST_PREPARE_OUTPUT: ({ item, ready }) => {
// don't handle archived items, an item could have been archived (load aborted) while waiting to be prepared
if (item.archived) return;
// allow plugins to alter the file data
applyFilterChain('PREPARE_OUTPUT', item.file, { query, item }).then(
result => {
applyFilterChain('COMPLETE_PREPARE_OUTPUT', result, {
query,
item
}).then(result => {
// don't handle archived items, an item could have been archived (load aborted) while being prepared
if (item.archived) return;
// we done!
ready(result);
});
}
);
},
COMPLETE_LOAD_ITEM: ({ item, data }) => {
const { success, source } = data;
// sort items in list
const itemInsertLocation = query('GET_ITEM_INSERT_LOCATION');
if (isFunction(itemInsertLocation) && source) {
sortItems(state, itemInsertLocation);
}
// let interface know the item has loaded
dispatch('DID_LOAD_ITEM', {
id: item.id,
error: null,
serverFileReference: item.origin === FileOrigin.INPUT ? null : source
});
// item has been successfully loaded and added to the
// list of items so can now be safely returned for use
success(createItemAPI(item));
// if this is a local server file we need to show a different state
if (item.origin === FileOrigin.LOCAL) {
dispatch('DID_LOAD_LOCAL_ITEM', { id: item.id });
return;
}
// if is a temp server file we prevent async upload call here (as the file is already on the server)
if (item.origin === FileOrigin.LIMBO) {
dispatch('DID_COMPLETE_ITEM_PROCESSING', {
id: item.id,
error: null,
serverFileReference: source
});
return;
}
// id we are allowed to upload the file immidiately, lets do it
if (query('IS_ASYNC') && state.options.instantUpload) {
dispatch('REQUEST_ITEM_PROCESSING', { query: item.id });
}
},
RETRY_ITEM_LOAD: getItemByQueryFromState(state, item => {
// try loading the source one more time
item.retryLoad();
}),
REQUEST_ITEM_PROCESSING: getItemByQueryFromState(
state,
(item, success, failure) => {
// cannot be queued (or is already queued)
const itemCanBeQueuedForProcessing =
// waiting for something
item.status === ItemStatus.IDLE ||
// processing went wrong earlier
item.status === ItemStatus.PROCESSING_ERROR;
// not ready to be processed
if (!itemCanBeQueuedForProcessing) {
const process = () => {
setTimeout(() => {
dispatch('REQUEST_ITEM_PROCESSING', {
query: item,
success,
failure
});
}, 32);
};
// if already done processing or tried to revert but didn't work, try again
if (
item.status === ItemStatus.PROCESSING_COMPLETE ||
item.status === ItemStatus.PROCESSING_REVERT_ERROR
) {
item
.revert(
createRevertFunction(
state.options.server.url,
state.options.server.revert
),
query('GET_FORCE_REVERT')
)
.then(process)
.catch(() => {}); // don't continue with processing if something went wrong
} else if (item.status === ItemStatus.PROCESSING) {
item.abortProcessing().then(process);
}
return;
}
// already queued for processing
if (item.status === ItemStatus.PROCESSING_QUEUED) return;
item.requestProcessing();
dispatch('DID_REQUEST_ITEM_PROCESSING', { id: item.id });
dispatch('PROCESS_ITEM', { query: item, success, failure }, true);
}
),
PROCESS_ITEM: getItemByQueryFromState(state, (item, success, failure) => {
const maxParallelUploads = query('GET_MAX_PARALLEL_UPLOADS');
const totalCurrentUploads = query(
'GET_ITEMS_BY_STATUS',
ItemStatus.PROCESSING
).length;
// queue and wait till queue is freed up
if (totalCurrentUploads === maxParallelUploads) {
// queue for later processing
state.processingQueue.push({
id: item.id,
success,
failure
});
// stop it!
return;
}
// if was not queued or is already processing exit here
if (item.status === ItemStatus.PROCESSING) return;
const processNext = () => {
// process queueud items
const queueEntry = state.processingQueue.shift();
// no items left
if (!queueEntry) return;
// get item reference
const { id, success, failure } = queueEntry;
const itemReference = getItemByQuery(state.items, id);
// if item was archived while in queue, jump to next
if (!itemReference || itemReference.archived) {
processNext();
return;
}
// process queued item
dispatch('PROCESS_ITEM', { query: id, success, failure }, true);
};
// we done function
item.onOnce('process-complete', () => {
success(createItemAPI(item));
processNext();
// All items processed? No errors?
const allItemsProcessed =
query('GET_ITEMS_BY_STATUS', ItemStatus.PROCESSING_COMPLETE).length ===
state.items.length;
if (allItemsProcessed) {
dispatch('DID_COMPLETE_ITEM_PROCESSING_ALL');
}
});
// we error function
item.onOnce('process-error', error => {
failure({ error, file: createItemAPI(item) });
processNext();
});
// start file processing
item.process(
createFileProcessor(
createProcessorFunction(
state.options.server.url,
state.options.server.process,
state.options.name
)
),
// called when the file is about to be processed so it can be piped through the transform filters
(file, success, error) => {
// allow plugins to alter the file data
applyFilterChain('PREPARE_OUTPUT', file, { query, item })
.then(file => {
dispatch('DID_PREPARE_OUTPUT', { id: item.id, file });
success(file);
})
.catch(error);
}
);
}),
RETRY_ITEM_PROCESSING: getItemByQueryFromState(state, item => {
dispatch('REQUEST_ITEM_PROCESSING', { query: item });
}),
REQUEST_REMOVE_ITEM: getItemByQueryFromState(state, item => {
optionalPromise(query('GET_BEFORE_REMOVE_FILE'), createItemAPI(item)).then(
shouldRemove => {
if (!shouldRemove) {
return;
}
dispatch('REMOVE_ITEM', { query: item });
}
);
}),
RELEASE_ITEM: getItemByQueryFromState(state, item => {
item.release();
}),
REMOVE_ITEM: getItemByQueryFromState(state, (item, success) => {
const removeFromView = () => {
// get id reference
const id = item.id;
// archive the item, this does not remove it from the list
getItemById(state.items, id).archive();
// tell the view the item has been removed
dispatch('DID_REMOVE_ITEM', { error: null, id, item });
// now the list has been modified
listUpdated(dispatch, state);
// correctly removed
success(createItemAPI(item));
};
// if this is a local file and the server.remove function has been configured, send source there so dev can remove file from server
const server = state.options.server;
if (
item.origin === FileOrigin.LOCAL &&
server &&
isFunction(server.remove)
) {
dispatch('DID_START_ITEM_REMOVE', { id: item.id });
server.remove(
item.source,
() => removeFromView(),
status => {
dispatch('DID_THROW_ITEM_REMOVE_ERROR', {
id: item.id,
error: createResponse('error', 0, status, null),
status: {
main: dynamicLabel(state.options.labelFileRemoveError)(status),
sub: state.options.labelTapToRetry
}
});
}
);
} else {
removeFromView();
}
}),
ABORT_ITEM_LOAD: getItemByQueryFromState(state, item => {
item.abortLoad();
}),
ABORT_ITEM_PROCESSING: getItemByQueryFromState(state, item => {
// test if is already processed
if (item.serverId) {
dispatch('REVERT_ITEM_PROCESSING', { id: item.id });
return;
}
// abort
item.abortProcessing().then(() => {
const shouldRemove = state.options.instantUpload;
if (shouldRemove) {
dispatch('REMOVE_ITEM', { query: item.id });
}
});
}),
REQUEST_REVERT_ITEM_PROCESSING: getItemByQueryFromState(state, item => {
// not instant uploading, revert immidiately
if (!state.options.instantUpload) {
dispatch('REVERT_ITEM_PROCESSING', { query: item });
return;
}
// if we're instant uploading the file will also be removed if we revert,
// so if a before remove file hook is defined we need to run it now
const handleRevert = shouldRevert => {
if (!shouldRevert) return;
dispatch('REVERT_ITEM_PROCESSING', { query: item });
};
const fn = query('GET_BEFORE_REMOVE_FILE');
if (!fn) {
return handleRevert(true);
}
const requestRemoveResult = fn(createItemAPI(item));
if (requestRemoveResult == null) {
// undefined or null
return handleRevert(true);
}
if (typeof requestRemoveResult === 'boolean') {
return handleRevert(requestRemoveResult);
}
if (typeof requestRemoveResult.then === 'function') {
requestRemoveResult.then(handleRevert);
}
}),
REVERT_ITEM_PROCESSING: getItemByQueryFromState(state, item => {
item
.revert(
createRevertFunction(
state.options.server.url,
state.options.server.revert
),
query('GET_FORCE_REVERT')
)
.then(() => {
const shouldRemove = state.options.instantUpload || isMockItem(item);
if (shouldRemove) {
dispatch('REMOVE_ITEM', { query: item.id });
}
})
.catch(() => {});
}),
SET_OPTIONS: ({ options }) => {
forin(options, (key, value) => {
dispatch(`SET_${fromCamels(key, '_').toUpperCase()}`, { value });
});
}
});
const formatFilename = name => name;
const createElement$1 = tagName => {
return document.createElement(tagName);
};
const text = (node, value) => {
let textNode = node.childNodes[0];
if (!textNode) {
textNode = document.createTextNode(value);
node.appendChild(textNode);
} else if (value !== textNode.nodeValue) {
textNode.nodeValue = value;
}
};
const polarToCartesian = (centerX, centerY, radius, angleInDegrees) => {
const angleInRadians = (((angleInDegrees % 360) - 90) * Math.PI) / 180.0;
return {
x: centerX + radius * Math.cos(angleInRadians),
y: centerY + radius * Math.sin(angleInRadians)
};
};
const describeArc = (x, y, radius, startAngle, endAngle, arcSweep) => {
const start = polarToCartesian(x, y, radius, endAngle);
const end = polarToCartesian(x, y, radius, startAngle);
return [
'M',
start.x,
start.y,
'A',
radius,
radius,
0,
arcSweep,
0,
end.x,
end.y
].join(' ');
};
const percentageArc = (x, y, radius, from, to) => {
let arcSweep = 1;
if (to > from && to - from <= 0.5) {
arcSweep = 0;
}
if (from > to && from - to >= 0.5) {
arcSweep = 0;
}
return describeArc(
x,
y,
radius,
Math.min(0.9999, from) * 360,
Math.min(0.9999, to) * 360,
arcSweep
);
};
const create = ({ root, props }) => {
// start at 0
props.spin = false;
props.progress = 0;
props.opacity = 0;
// svg
const svg = createElement('svg');
root.ref.path = createElement('path', {
'stroke-width': 2,
'stroke-linecap': 'round'
});
svg.appendChild(root.ref.path);
root.ref.svg = svg;
root.appendChild(svg);
};
const write = ({ root, props }) => {
if (props.opacity === 0) {
return;
}
if (props.align) {
root.element.dataset.align = props.align;
}
// get width of stroke
const ringStrokeWidth = parseInt(attr(root.ref.path, 'stroke-width'), 10);
// calculate size of ring
const size = root.rect.element.width * 0.5;
// ring state
let ringFrom = 0;
let ringTo = 0;
// now in busy mode
if (props.spin) {
ringFrom = 0;
ringTo = 0.5;
} else {
ringFrom = 0;
ringTo = props.progress;
}
// get arc path
const coordinates = percentageArc(
size,
size,
size - ringStrokeWidth,
ringFrom,
ringTo
);
// update progress bar
attr(root.ref.path, 'd', coordinates);
// hide while contains 0 value
attr(
root.ref.path,
'stroke-opacity',
props.spin || props.progress > 0 ? 1 : 0
);
};
const progressIndicator = createView({
tag: 'div',
name: 'progress-indicator',
ignoreRectUpdate: true,
ignoreRect: true,
create,
write,
mixins: {
apis: ['progress', 'spin', 'align'],
styles: ['opacity'],
animations: {
opacity: { type: 'tween', duration: 500 },
progress: {
type: 'spring',
stiffness: 0.95,
damping: 0.65,
mass: 10
}
}
}
});
const create$1 = ({ root, props }) => {
root.element.innerHTML = (props.icon || '') + `<span>${props.label}</span>`;
props.isDisabled = false;
};
const write$1 = ({ root, props }) => {
const { isDisabled } = props;
const shouldDisable = root.query('GET_DISABLED') || props.opacity === 0;
if (shouldDisable && !isDisabled) {
props.isDisabled = true;
attr(root.element, 'disabled', 'disabled');
} else if (!shouldDisable && isDisabled) {
props.isDisabled = false;
root.element.removeAttribute('disabled');
}
};
const fileActionButton = createView({
tag: 'button',
attributes: {
type: 'button'
},
ignoreRect: true,
ignoreRectUpdate: true,
name: 'file-action-button',
mixins: {
apis: ['label'],
styles: ['translateX', 'translateY', 'scaleX', 'scaleY', 'opacity'],
animations: {
scaleX: 'spring',
scaleY: 'spring',
translateX: 'spring',
translateY: 'spring',
opacity: { type: 'tween', duration: 250 }
},
listeners: true
},
create: create$1,
write: write$1
});
const toNaturalFileSize = (bytes, decimalSeparator = '.') => {
// nope, no negative byte sizes
bytes = Math.round(Math.abs(bytes));
// just bytes
if (bytes < 1000) {
return `${bytes} bytes`;
}
// kilobytes
if (bytes < MB) {
return `${Math.floor(bytes / KB)} KB`;
}
// megabytes
if (bytes < GB) {
return `${removeDecimalsWhenZero(bytes / MB, 1, decimalSeparator)} MB`;
}
// gigabytes
return `${removeDecimalsWhenZero(bytes / GB, 2, decimalSeparator)} GB`;
};
const KB = 1000;
const MB = 1000000;
const GB = 1000000000;
const removeDecimalsWhenZero = (value, decimalCount, separator) => {
return value
.toFixed(decimalCount)
.split('.')
.filter(part => part !== '0')
.join(separator);
};
const create$2 = ({ root, props }) => {
// filename
const fileName = createElement$1('span');
fileName.className = 'filepond--file-info-main';
// hide for screenreaders
// the file is contained in a fieldset with legend that contains the filename
// no need to read it twice
attr(fileName, 'aria-hidden', 'true');
root.appendChild(fileName);
root.ref.fileName = fileName;
// filesize
const fileSize = createElement$1('span');
fileSize.className = 'filepond--file-info-sub';
root.appendChild(fileSize);
root.ref.fileSize = fileSize;
// set initial values
text(fileSize, root.query('GET_LABEL_FILE_WAITING_FOR_SIZE'));
text(fileName, formatFilename(root.query('GET_ITEM_NAME', props.id)));
};
const updateFile = ({ root, props }) => {
text(
root.ref.fileSize,
toNaturalFileSize(root.query('GET_ITEM_SIZE', props.id))
);
text(
root.ref.fileName,
formatFilename(root.query('GET_ITEM_NAME', props.id))
);
};
const updateFileSizeOnError = ({ root, props }) => {
// if size is available don't fallback to unknown size message
if (isInt(root.query('GET_ITEM_SIZE', props.id))) {
return;
}
text(root.ref.fileSize, root.query('GET_LABEL_FILE_SIZE_NOT_AVAILABLE'));
};
const fileInfo = createView({
name: 'file-info',
ignoreRect: true,
ignoreRectUpdate: true,
write: createRoute({
DID_LOAD_ITEM: updateFile,
DID_UPDATE_ITEM_META: updateFile,
DID_THROW_ITEM_LOAD_ERROR: updateFileSizeOnError,
DID_THROW_ITEM_INVALID: updateFileSizeOnError
}),
didCreateView: root => {
applyFilters('CREATE_VIEW', { ...root, view: root });
},
create: create$2,
mixins: {
styles: ['translateX', 'translateY'],
animations: {
translateX: 'spring',
translateY: 'spring'
}
}
});
const toPercentage = value => Math.round(value * 100);
const create$3 = ({ root, props }) => {
// main status
const main = createElement$1('span');
main.className = 'filepond--file-status-main';
root.appendChild(main);
root.ref.main = main;
// sub status
const sub = createElement$1('span');
sub.className = 'filepond--file-status-sub';
root.appendChild(sub);
root.ref.sub = sub;
didSetItemLoadProgress({ root, action: { progress: null } });
};
const didSetItemLoadProgress = ({ root, action }) => {
const title =
action.progress === null
? root.query('GET_LABEL_FILE_LOADING')
: `${root.query('GET_LABEL_FILE_LOADING')} ${toPercentage(
action.progress
)}%`;
text(root.ref.main, title);
text(root.ref.sub, root.query('GET_LABEL_TAP_TO_CANCEL'));
};
const didSetItemProcessProgress = ({ root, action }) => {
const title =
action.progress === null
? root.query('GET_LABEL_FILE_PROCESSING')
: `${root.query('GET_LABEL_FILE_PROCESSING')} ${toPercentage(
action.progress
)}%`;
text(root.ref.main, title);
text(root.ref.sub, root.query('GET_LABEL_TAP_TO_CANCEL'));
};
const didRequestItemProcessing = ({ root }) => {
text(root.ref.main, root.query('GET_LABEL_FILE_PROCESSING'));
text(root.ref.sub, root.query('GET_LABEL_TAP_TO_CANCEL'));
};
const didAbortItemProcessing = ({ root }) => {
text(root.ref.main, root.query('GET_LABEL_FILE_PROCESSING_ABORTED'));
text(root.ref.sub, root.query('GET_LABEL_TAP_TO_RETRY'));
};
const didCompleteItemProcessing = ({ root }) => {
text(root.ref.main, root.query('GET_LABEL_FILE_PROCESSING_COMPLETE'));
text(root.ref.sub, root.query('GET_LABEL_TAP_TO_UNDO'));
};
const clear = ({ root }) => {
text(root.ref.main, '');
text(root.ref.sub, '');
};
const error = ({ root, action }) => {
text(root.ref.main, action.status.main);
text(root.ref.sub, action.status.sub);
};
const fileStatus = createView({
name: 'file-status',
ignoreRect: true,
ignoreRectUpdate: true,
write: createRoute({
DID_LOAD_ITEM: clear,
DID_REVERT_ITEM_PROCESSING: clear,
DID_REQUEST_ITEM_PROCESSING: didRequestItemProcessing,
DID_ABORT_ITEM_PROCESSING: didAbortItemProcessing,
DID_COMPLETE_ITEM_PROCESSING: didCompleteItemProcessing,
DID_UPDATE_ITEM_PROCESS_PROGRESS: didSetItemProcessProgress,
DID_UPDATE_ITEM_LOAD_PROGRESS: didSetItemLoadProgress,
DID_THROW_ITEM_LOAD_ERROR: error,
DID_THROW_ITEM_INVALID: error,
DID_THROW_ITEM_PROCESSING_ERROR: error,
DID_THROW_ITEM_PROCESSING_REVERT_ERROR: error,
DID_THROW_ITEM_REMOVE_ERROR: error
}),
didCreateView: root => {
applyFilters('CREATE_VIEW', { ...root, view: root });
},
create: create$3,
mixins: {
styles: ['translateX', 'translateY', 'opacity'],
animations: {
opacity: { type: 'tween', duration: 250 },
translateX: 'spring',
translateY: 'spring'
}
}
});
/**
* Button definitions for the file view
*/
const Buttons = {
AbortItemLoad: {
label: 'GET_LABEL_BUTTON_ABORT_ITEM_LOAD',
action: 'ABORT_ITEM_LOAD',
className: 'filepond--action-abort-item-load',
align: 'LOAD_INDICATOR_POSITION' // right
},
RetryItemLoad: {
label: 'GET_LABEL_BUTTON_RETRY_ITEM_LOAD',
action: 'RETRY_ITEM_LOAD',
icon: 'GET_ICON_RETRY',
className: 'filepond--action-retry-item-load',
align: 'BUTTON_PROCESS_ITEM_POSITION' // right
},
RemoveItem: {
label: 'GET_LABEL_BUTTON_REMOVE_ITEM',
action: 'REQUEST_REMOVE_ITEM',
icon: 'GET_ICON_REMOVE',
className: 'filepond--action-remove-item',
align: 'BUTTON_REMOVE_ITEM_POSITION' // left
},
ProcessItem: {
label: 'GET_LABEL_BUTTON_PROCESS_ITEM',
action: 'REQUEST_ITEM_PROCESSING',
icon: 'GET_ICON_PROCESS',
className: 'filepond--action-process-item',
align: 'BUTTON_PROCESS_ITEM_POSITION' // right
},
AbortItemProcessing: {
label: 'GET_LABEL_BUTTON_ABORT_ITEM_PROCESSING',
action: 'ABORT_ITEM_PROCESSING',
className: 'filepond--action-abort-item-processing',
align: 'BUTTON_PROCESS_ITEM_POSITION' // right
},
RetryItemProcessing: {
label: 'GET_LABEL_BUTTON_RETRY_ITEM_PROCESSING',
action: 'RETRY_ITEM_PROCESSING',
icon: 'GET_ICON_RETRY',
className: 'filepond--action-retry-item-processing',
align: 'BUTTON_PROCESS_ITEM_POSITION' // right
},
RevertItemProcessing: {
label: 'GET_LABEL_BUTTON_UNDO_ITEM_PROCESSING',
action: 'REQUEST_REVERT_ITEM_PROCESSING',
icon: 'GET_ICON_UNDO',
className: 'filepond--action-revert-item-processing',
align: 'BUTTON_PROCESS_ITEM_POSITION' // right
}
};
// make a list of buttons, we can then remove buttons from this list if they're disabled
const ButtonKeys = [];
forin(Buttons, key => {
ButtonKeys.push(key);
});
const calculateFileInfoOffset = root => {
const buttonRect = root.ref.buttonRemoveItem.rect.element;
return buttonRect.hidden ? null : buttonRect.width + buttonRect.left;
};
// Force on full pixels so text stays crips
const calculateFileVerticalCenterOffset = root =>
Math.floor(root.ref.buttonRemoveItem.rect.element.height / 4);
const calculateFileHorizontalCenterOffset = root =>
Math.floor(root.ref.buttonRemoveItem.rect.element.left / 2);
const getLoadIndicatorAlignment = root =>
root.query('GET_STYLE_LOAD_INDICATOR_POSITION');
const getProcessIndicatorAlignment = root =>
root.query('GET_STYLE_PROGRESS_INDICATOR_POSITION');
const getRemoveIndicatorAligment = root =>
root.query('GET_STYLE_BUTTON_REMOVE_ITEM_POSITION');
const DefaultStyle = {
buttonAbortItemLoad: { opacity: 0 },
buttonRetryItemLoad: { opacity: 0 },
buttonRemoveItem: { opacity: 0 },
buttonProcessItem: { opacity: 0 },
buttonAbortItemProcessing: { opacity: 0 },
buttonRetryItemProcessing: { opacity: 0 },
buttonRevertItemProcessing: { opacity: 0 },
loadProgressIndicator: { opacity: 0, align: getLoadIndicatorAlignment },
processProgressIndicator: { opacity: 0, align: getProcessIndicatorAlignment },
processingCompleteIndicator: { opacity: 0, scaleX: 0.75, scaleY: 0.75 },
info: { translateX: 0, translateY: 0, opacity: 0 },
status: { translateX: 0, translateY: 0, opacity: 0 }
};
const IdleStyle = {
buttonRemoveItem: { opacity: 1 },
buttonProcessItem: { opacity: 1 },
info: { translateX: calculateFileInfoOffset },
status: { translateX: calculateFileInfoOffset }
};
const ProcessingStyle = {
buttonAbortItemProcessing: { opacity: 1 },
processProgressIndicator: { opacity: 1 },
status: { opacity: 1 }
};
const StyleMap = {
DID_THROW_ITEM_INVALID: {
buttonRemoveItem: { opacity: 1 },
info: { translateX: calculateFileInfoOffset },
status: { translateX: calculateFileInfoOffset, opacity: 1 }
},
DID_START_ITEM_LOAD: {
buttonAbortItemLoad: { opacity: 1 },
loadProgressIndicator: { opacity: 1 },
status: { opacity: 1 }
},
DID_THROW_ITEM_LOAD_ERROR: {
buttonRetryItemLoad: { opacity: 1 },
buttonRemoveItem: { opacity: 1 },
info: { translateX: calculateFileInfoOffset },
status: { opacity: 1 }
},
DID_START_ITEM_REMOVE: {
processProgressIndicator: { opacity: 1, align: getRemoveIndicatorAligment },
info: { translateX: calculateFileInfoOffset },
status: { opacity: 0 }
},
DID_THROW_ITEM_REMOVE_ERROR: {
processProgressIndicator: { opacity: 0, align: getRemoveIndicatorAligment },
buttonRemoveItem: { opacity: 1 },
info: { translateX: calculateFileInfoOffset },
status: { opacity: 1, translateX: calculateFileInfoOffset }
},
DID_LOAD_ITEM: IdleStyle,
DID_LOAD_LOCAL_ITEM: {
buttonRemoveItem: { opacity: 1 },
info: { translateX: calculateFileInfoOffset },
status: { translateX: calculateFileInfoOffset }
},
DID_START_ITEM_PROCESSING: ProcessingStyle,
DID_REQUEST_ITEM_PROCESSING: ProcessingStyle,
DID_UPDATE_ITEM_PROCESS_PROGRESS: ProcessingStyle,
DID_COMPLETE_ITEM_PROCESSING: {
buttonRevertItemProcessing: { opacity: 1 },
info: { opacity: 1 },
status: { opacity: 1 }
},
DID_THROW_ITEM_PROCESSING_ERROR: {
buttonRemoveItem: { opacity: 1 },
buttonRetryItemProcessing: { opacity: 1 },
status: { opacity: 1 },
info: { translateX: calculateFileInfoOffset }
},
DID_THROW_ITEM_PROCESSING_REVERT_ERROR: {
buttonRevertItemProcessing: { opacity: 1 },
status: { opacity: 1 },
info: { opacity: 1 }
},
DID_ABORT_ITEM_PROCESSING: {
buttonRemoveItem: { opacity: 1 },
buttonProcessItem: { opacity: 1 },
info: { translateX: calculateFileInfoOffset },
status: { opacity: 1 }
},
DID_REVERT_ITEM_PROCESSING: IdleStyle
};
// complete indicator view
const processingCompleteIndicatorView = createView({
create: ({ root }) => {
root.element.innerHTML = root.query('GET_ICON_DONE');
},
name: 'processing-complete-indicator',
ignoreRect: true,
mixins: {
styles: ['scaleX', 'scaleY', 'opacity'],
animations: {
scaleX: 'spring',
scaleY: 'spring',
opacity: { type: 'tween', duration: 250 }
}
}
});
/**
* Creates the file view
*/
const create$4 = ({ root, props }) => {
const { id } = props;
// allow reverting upload
const allowRevert = root.query('GET_ALLOW_REVERT');
// is instant uploading, need this to determine the icon of the undo button
const instantUpload = root.query('GET_INSTANT_UPLOAD');
// is async set up
const isAsync = root.query('IS_ASYNC');
// enabled buttons array
const enabledButtons = isAsync
? ButtonKeys.concat()
: ButtonKeys.filter(key => !/Process/.test(key));
// remove last button (revert) if not allowed
if (isAsync && !allowRevert) {
enabledButtons.splice(-1, 1);
const map = StyleMap['DID_COMPLETE_ITEM_PROCESSING'];
map.info.translateX = calculateFileHorizontalCenterOffset;
map.info.translateY = calculateFileVerticalCenterOffset;
map.status.translateY = calculateFileVerticalCenterOffset;
map.processingCompleteIndicator = { opacity: 1, scaleX: 1, scaleY: 1 };
}
// update icon and label for revert button when instant uploading
if (instantUpload && allowRevert) {
Buttons['RevertItemProcessing'].label = 'GET_LABEL_BUTTON_REMOVE_ITEM';
Buttons['RevertItemProcessing'].icon = 'GET_ICON_REMOVE';
}
// create the button views
forin(Buttons, (key, definition) => {
// create button
const buttonView = root.createChildView(fileActionButton, {
label: root.query(definition.label),
icon: root.query(definition.icon),
opacity: 0
});
// should be appended?
if (enabledButtons.includes(key)) {
root.appendChildView(buttonView);
}
// add position attribute
buttonView.element.dataset.align = root.query(
`GET_STYLE_${definition.align}`
);
// add class
buttonView.element.classList.add(definition.className);
// handle interactions
buttonView.on('click', e => {
e.stopPropagation();
root.dispatch(definition.action, { query: id });
});
// set reference
root.ref[`button${key}`] = buttonView;
});
// create file info view
root.ref.info = root.appendChildView(root.createChildView(fileInfo, { id }));
// create file status view
root.ref.status = root.appendChildView(
root.createChildView(fileStatus, { id })
);
// checkmark
root.ref.processingCompleteIndicator = root.appendChildView(
root.createChildView(processingCompleteIndicatorView)
);
root.ref.processingCompleteIndicator.element.dataset.align = root.query(
`GET_STYLE_BUTTON_PROCESS_ITEM_POSITION`
);
// add progress indicators
const loadIndicatorView = root.appendChildView(
root.createChildView(progressIndicator, {
opacity: 0,
align: root.query(`GET_STYLE_LOAD_INDICATOR_POSITION`)
})
);
loadIndicatorView.element.classList.add('filepond--load-indicator');
root.ref.loadProgressIndicator = loadIndicatorView;
const progressIndicatorView = root.appendChildView(
root.createChildView(progressIndicator, {
opacity: 0,
align: root.query(`GET_STYLE_PROGRESS_INDICATOR_POSITION`)
})
);
progressIndicatorView.element.classList.add('filepond--process-indicator');
root.ref.processProgressIndicator = progressIndicatorView;
// current active styles
root.ref.activeStyles = [];
};
const write$2 = ({ root, actions, props }) => {
// route actions
route({ root, actions, props });
// select last state change action
let action = actions
.concat()
.filter(action => /^DID_/.test(action.type))
.reverse()
.find(action => StyleMap[action.type]);
// a new action happened, let's get the matching styles
if (action) {
// define new active styles
root.ref.activeStyles = [];
const stylesToApply = StyleMap[action.type];
forin(DefaultStyle, (name, defaultStyles) => {
// get reference to control
const control = root.ref[name];
// loop over all styles for this control
forin(defaultStyles, (key, defaultValue) => {
const value =
stylesToApply[name] && typeof stylesToApply[name][key] !== 'undefined'
? stylesToApply[name][key]
: defaultValue;
root.ref.activeStyles.push({ control, key, value });
});
});
}
// apply active styles to element
root.ref.activeStyles.forEach(({ control, key, value }) => {
control[key] = typeof value === 'function' ? value(root) : value;
});
};
const route = createRoute({
DID_SET_LABEL_BUTTON_ABORT_ITEM_PROCESSING: ({ root, action }) => {
root.ref.buttonAbortItemProcessing.label = action.value;
},
DID_SET_LABEL_BUTTON_ABORT_ITEM_LOAD: ({ root, action }) => {
root.ref.buttonAbortItemLoad.label = action.value;
},
DID_SET_LABEL_BUTTON_ABORT_ITEM_REMOVAL: ({ root, action }) => {
root.ref.buttonAbortItemRemoval.label = action.value;
},
DID_REQUEST_ITEM_PROCESSING: ({ root }) => {
root.ref.processProgressIndicator.spin = true;
root.ref.processProgressIndicator.progress = 0;
},
DID_START_ITEM_LOAD: ({ root }) => {
root.ref.loadProgressIndicator.spin = true;
root.ref.loadProgressIndicator.progress = 0;
},
DID_START_ITEM_REMOVE: ({ root }) => {
root.ref.processProgressIndicator.spin = true;
root.ref.processProgressIndicator.progress = 0;
},
DID_UPDATE_ITEM_LOAD_PROGRESS: ({ root, action }) => {
root.ref.loadProgressIndicator.spin = false;
root.ref.loadProgressIndicator.progress = action.progress;
},
DID_UPDATE_ITEM_PROCESS_PROGRESS: ({ root, action }) => {
root.ref.processProgressIndicator.spin = false;
root.ref.processProgressIndicator.progress = action.progress;
}
});
const file = createView({
create: create$4,
write: write$2,
didCreateView: root => {
applyFilters('CREATE_VIEW', { ...root, view: root });
},
name: 'file'
});
/**
* Creates the file view
*/
const create$5 = ({ root, props }) => {
// filename
root.ref.fileName = createElement$1('legend');
root.appendChild(root.ref.fileName);
// file appended
root.ref.file = root.appendChildView(
root.createChildView(file, { id: props.id })
);
// create data container
const dataContainer = createElement$1('input');
dataContainer.type = 'hidden';
dataContainer.name = root.query('GET_NAME');
dataContainer.disabled = root.query('GET_DISABLED');
root.ref.data = dataContainer;
root.appendChild(dataContainer);
};
const didSetDisabled = ({ root }) => {
root.ref.data.disabled = root.query('GET_DISABLED');
};
/**
* Data storage
*/
const didLoadItem = ({ root, action, props }) => {
root.ref.data.value = action.serverFileReference;
// updates the legend of the fieldset so screenreaders can better group buttons
text(
root.ref.fileName,
formatFilename(root.query('GET_ITEM_NAME', props.id))
);
};
const didRemoveItem = ({ root }) => {
root.ref.data.removeAttribute('value');
};
const didCompleteItemProcessing$1 = ({ root, action }) => {
root.ref.data.value = action.serverFileReference;
};
const didRevertItemProcessing = ({ root }) => {
root.ref.data.removeAttribute('value');
};
const fileWrapper = createView({
create: create$5,
ignoreRect: true,
write: createRoute({
DID_SET_DISABLED: didSetDisabled,
DID_LOAD_ITEM: didLoadItem,
DID_REMOVE_ITEM: didRemoveItem,
DID_COMPLETE_ITEM_PROCESSING: didCompleteItemProcessing$1,
DID_REVERT_ITEM_PROCESSING: didRevertItemProcessing
}),
didCreateView: root => {
applyFilters('CREATE_VIEW', { ...root, view: root });
},
tag: 'fieldset',
name: 'file-wrapper'
});
const PANEL_SPRING_PROPS = { type: 'spring', damping: 0.6, mass: 7 };
const create$6 = ({ root, props }) => {
[
{
name: 'top'
},
{
name: 'center',
props: {
translateY: null,
scaleY: null
},
mixins: {
animations: {
scaleY: PANEL_SPRING_PROPS
},
styles: ['translateY', 'scaleY']
}
},
{
name: 'bottom',
props: {
translateY: null
},
mixins: {
animations: {
translateY: PANEL_SPRING_PROPS
},
styles: ['translateY']
}
}
].forEach(section => {
createSection(root, section, props.name);
});
root.element.classList.add(`filepond--${props.name}`);
root.ref.scalable = null;
};
const createSection = (root, section, className) => {
const viewConstructor = createView({
name: `panel-${section.name} filepond--${className}`,
mixins: section.mixins,
ignoreRectUpdate: true
});
const view = root.createChildView(viewConstructor, section.props);
root.ref[section.name] = root.appendChildView(view);
};
const write$3 = ({ root, props }) => {
// update scalable state
if (root.ref.scalable === null || props.scalable !== root.ref.scalable) {
root.ref.scalable = isBoolean(props.scalable) ? props.scalable : true;
root.element.dataset.scalable = root.ref.scalable;
}
// no height, can't set
if (!props.height) return;
// get child rects
const topRect = root.ref.top.rect.element;
const bottomRect = root.ref.bottom.rect.element;
// make sure height never is smaller than bottom and top seciton heights combined (will probably never happen, but who knows)
const height = Math.max(topRect.height + bottomRect.height, props.height);
// offset center part
root.ref.center.translateY = topRect.height;
// scale center part
// use math ceil to prevent transparent lines because of rounding errors
root.ref.center.scaleY = (height - topRect.height - bottomRect.height) / 100;
// offset bottom part
root.ref.bottom.translateY = height - bottomRect.height;
};
const panel = createView({
name: 'panel',
write: write$3,
create: create$6,
ignoreRect: true,
mixins: {
apis: ['height', 'scalable']
}
});
const ITEM_TRANSLATE_SPRING = {
type: 'spring',
stiffness: 0.75,
damping: 0.45,
mass: 10
};
const ITEM_SCALE_SPRING = 'spring';
/**
* Creates the file view
*/
const create$7 = ({ root, props }) => {
// select
root.ref.handleClick = () =>
root.dispatch('DID_ACTIVATE_ITEM', { id: props.id });
// set id
root.element.id = `filepond--item-${props.id}`;
root.element.addEventListener('click', root.ref.handleClick);
// file view
root.ref.container = root.appendChildView(
root.createChildView(fileWrapper, { id: props.id })
);
// file panel
root.ref.panel = root.appendChildView(
root.createChildView(panel, { name: 'item-panel' })
);
// default start height
root.ref.panel.height = null;
// by default not marked for removal
props.markedForRemoval = false;
};
const StateMap = {
DID_START_ITEM_LOAD: 'busy',
DID_UPDATE_ITEM_LOAD_PROGRESS: 'loading',
DID_THROW_ITEM_INVALID: 'load-invalid',
DID_THROW_ITEM_LOAD_ERROR: 'load-error',
DID_LOAD_ITEM: 'idle',
DID_THROW_ITEM_REMOVE_ERROR: 'remove-error',
DID_START_ITEM_REMOVE: 'busy',
DID_START_ITEM_PROCESSING: 'busy',
DID_REQUEST_ITEM_PROCESSING: 'busy',
DID_UPDATE_ITEM_PROCESS_PROGRESS: 'processing',
DID_COMPLETE_ITEM_PROCESSING: 'processing-complete',
DID_THROW_ITEM_PROCESSING_ERROR: 'processing-error',
DID_THROW_ITEM_PROCESSING_REVERT_ERROR: 'processing-revert-error',
DID_ABORT_ITEM_PROCESSING: 'cancelled',
DID_REVERT_ITEM_PROCESSING: 'idle'
};
const route$1 = createRoute({
DID_UPDATE_PANEL_HEIGHT: ({ root, action }) => {
const { height } = action;
root.height = height;
}
});
const write$4 = ({ root, actions, props, shouldOptimize }) => {
// select last state change action
let action = actions
.concat()
.filter(action => /^DID_/.test(action.type))
.reverse()
.find(action => StateMap[action.type]);
// no need to set same state twice
if (action && action.type !== props.currentState) {
// set current state
props.currentState = action.type;
// set state
root.element.dataset.filepondItemState = StateMap[props.currentState] || '';
}
// route actions
const aspectRatio =
root.query('GET_ITEM_PANEL_ASPECT_RATIO') ||
root.query('GET_PANEL_ASPECT_RATIO');
if (!aspectRatio) {
route$1({ root, actions, props });
if (!root.height && root.ref.container.rect.element.height > 0) {
root.height = root.ref.container.rect.element.height;
}
} else if (!shouldOptimize) {
root.height = root.rect.element.width * aspectRatio;
}
// sync panel height with item height
if (shouldOptimize) {
root.ref.panel.height = null;
}
root.ref.panel.height = root.height;
};
const item = createView({
create: create$7,
write: write$4,
destroy: ({ root, props }) => {
root.element.removeEventListener('click', root.ref.handleClick);
root.dispatch('RELEASE_ITEM', { query: props.id });
},
tag: 'li',
name: 'item',
mixins: {
apis: ['id', 'interactionMethod', 'markedForRemoval', 'spawnDate'],
styles: [
'translateX',
'translateY',
'scaleX',
'scaleY',
'opacity',
'height'
],
animations: {
scaleX: ITEM_SCALE_SPRING,
scaleY: ITEM_SCALE_SPRING,
translateX: ITEM_TRANSLATE_SPRING,
translateY: ITEM_TRANSLATE_SPRING,
opacity: { type: 'tween', duration: 150 }
}
}
});
const getItemIndexByPosition = (view, positionInView) => {
if (!positionInView) return;
const horizontalSpace = view.rect.element.width;
const children = view.childViews;
const l = children.length;
let last = null;
// -1, don't move items to accomodate (either add to top or bottom)
if (l === 0 || positionInView.top < children[0].rect.element.top) return -1;
// let's get the item width
const item = children[0];
const itemRect = item.rect.element;
const itemHorizontalMargin = itemRect.marginLeft + itemRect.marginRight;
const itemWidth = itemRect.width + itemHorizontalMargin;
const itemsPerRow = Math.round(horizontalSpace / itemWidth);
// stack
if (itemsPerRow === 1) {
for (let index = 0; index < l; index++) {
const child = children[index];
const childMid = child.rect.outer.top + child.rect.element.height * 0.5;
if (positionInView.top < childMid) {
return index;
}
}
return l;
}
// grid
const itemVerticalMargin = itemRect.marginTop + itemRect.marginBottom;
const itemHeight = itemRect.height + itemVerticalMargin;
for (let index = 0; index < l; index++) {
const indexX = index % itemsPerRow;
const indexY = Math.floor(index / itemsPerRow);
const offsetX = indexX * itemWidth;
const offsetY = indexY * itemHeight;
const itemTop = offsetY - itemRect.marginTop;
const itemRight = offsetX + itemWidth;
const itemBottom = offsetY + itemHeight + itemRect.marginBottom;
if (positionInView.top < itemBottom && positionInView.top > itemTop) {
if (positionInView.left < itemRight) {
return index;
} else if (index !== l - 1) {
last = index;
} else {
last = null;
}
}
}
if (last !== null) {
return last;
}
return l;
};
const create$8 = ({ root }) => {
// need to set role to list as otherwise it won't be read as a list by VoiceOver
attr(root.element, 'role', 'list');
root.ref.lastItemSpanwDate = Date.now();
};
/**
* Inserts a new item
* @param root
* @param action
*/
const addItemView = ({ root, action }) => {
const { id, index, interactionMethod } = action;
root.ref.addIndex = index;
const now = Date.now();
let spawnDate = now;
let opacity = 1;
if (interactionMethod !== InteractionMethod.NONE) {
opacity = 0;
const cooldown = root.query('GET_ITEM_INSERT_INTERVAL');
const dist = now - root.ref.lastItemSpanwDate;
spawnDate = dist < cooldown ? now + (cooldown - dist) : now;
}
root.ref.lastItemSpanwDate = spawnDate;
root.appendChildView(
root.createChildView(
// view type
item,
// props
{
spawnDate,
id,
opacity,
interactionMethod
}
),
index
);
};
const moveItem = (item, x, y, vx = 0, vy = 1) => {
item.translateX = x;
item.translateY = y;
if (Date.now() > item.spawnDate) {
// reveal element
if (item.opacity === 0) {
introItemView(item, x, y, vx, vy);
}
// make sure is default scale every frame
item.scaleX = 1;
item.scaleY = 1;
item.opacity = 1;
}
};
const introItemView = (item, x, y, vx, vy) => {
if (item.interactionMethod === InteractionMethod.NONE) {
item.translateX = null;
item.translateX = x;
item.translateY = null;
item.translateY = y;
} else if (item.interactionMethod === InteractionMethod.DROP) {
item.translateX = null;
item.translateX = x - vx * 20;
item.translateY = null;
item.translateY = y - vy * 10;
item.scaleX = 0.8;
item.scaleY = 0.8;
} else if (item.interactionMethod === InteractionMethod.BROWSE) {
item.translateY = null;
item.translateY = y - 30;
} else if (item.interactionMethod === InteractionMethod.API) {
item.translateX = null;
item.translateX = x - 30;
item.translateY = null;
}
};
/**
* Removes an existing item
* @param root
* @param action
*/
const removeItemView = ({ root, action }) => {
const { id } = action;
// get the view matching the given id
const view = root.childViews.find(child => child.id === id);
// if no view found, exit
if (!view) {
return;
}
// animate view out of view
view.scaleX = 0.9;
view.scaleY = 0.9;
view.opacity = 0;
// mark for removal
view.markedForRemoval = true;
};
/**
* Setup action routes
*/
const route$2 = createRoute({
DID_ADD_ITEM: addItemView,
DID_REMOVE_ITEM: removeItemView
});
/**
* Write to view
* @param root
* @param actions
* @param props
*/
const write$5 = ({ root, props, actions, shouldOptimize }) => {
// route actions
route$2({ root, props, actions });
const { dragCoordinates } = props;
// get index
const dragIndex = dragCoordinates
? getItemIndexByPosition(root, dragCoordinates)
: null;
// available space on horizontal axis
const horizontalSpace = root.rect.element.width;
// only draw children that have dimensions
const visibleChildren = root.childViews.filter(
child => child.rect.element.height
);
// sort based on current active items
const children = root
.query('GET_ACTIVE_ITEMS')
.map(item => visibleChildren.find(child => child.id === item.id))
.filter(item => item);
// add index is used to reserve the dropped/added item index till the actual item is rendered
const addIndex = root.ref.addIndex || null;
// add index no longer needed till possibly next draw
root.ref.addIndex = null;
let dragIndexOffset = 0;
let removeIndexOffset = 0;
let addIndexOffset = 0;
if (children.length === 0) return;
const childRect = children[0].rect.element;
const itemVerticalMargin = childRect.marginTop + childRect.marginBottom;
const itemHorizontalMargin = childRect.marginLeft + childRect.marginRight;
const itemWidth = childRect.width + itemHorizontalMargin;
const itemHeight = childRect.height + itemVerticalMargin;
const itemsPerRow = Math.round(horizontalSpace / itemWidth);
// stack
if (itemsPerRow === 1) {
let offsetY = 0;
let dragOffset = 0;
children.forEach((child, index) => {
if (dragIndex) {
let dist = index - dragIndex;
if (dist === -2) {
dragOffset = -itemVerticalMargin * 0.25;
} else if (dist === -1) {
dragOffset = -itemVerticalMargin * 0.75;
} else if (dist === 0) {
dragOffset = itemVerticalMargin * 0.75;
} else if (dist === 1) {
dragOffset = itemVerticalMargin * 0.25;
} else {
dragOffset = 0;
}
}
if (shouldOptimize) {
child.translateX = null;
child.translateY = null;
}
if (!child.markedForRemoval) {
moveItem(child, 0, offsetY + dragOffset);
}
let itemHeight = child.rect.element.height + itemVerticalMargin;
let visualHeight =
itemHeight * (child.markedForRemoval ? child.opacity : 1);
offsetY += visualHeight;
});
}
// grid
else {
let prevX = 0;
let prevY = 0;
children.forEach((child, index) => {
if (index === dragIndex) {
dragIndexOffset = 1;
}
if (index === addIndex) {
addIndexOffset += 1;
}
if (child.markedForRemoval && child.opacity < 0.5) {
removeIndexOffset -= 1;
}
const visualIndex =
index + addIndexOffset + dragIndexOffset + removeIndexOffset;
const indexX = visualIndex % itemsPerRow;
const indexY = Math.floor(visualIndex / itemsPerRow);
const offsetX = indexX * itemWidth;
const offsetY = indexY * itemHeight;
const vectorX = Math.sign(offsetX - prevX);
const vectorY = Math.sign(offsetY - prevY);
prevX = offsetX;
prevY = offsetY;
if (child.markedForRemoval) return;
if (shouldOptimize) {
child.translateX = null;
child.translateY = null;
}
moveItem(child, offsetX, offsetY, vectorX, vectorY);
});
}
};
/**
* Filters actions that are meant specifically for a certain child of the list
* @param child
* @param actions
*/
const filterSetItemActions = (child, actions) =>
actions.filter(action => {
// if action has an id, filter out actions that don't have this child id
if (action.data && action.data.id) {
return child.id === action.data.id;
}
// allow all other actions
return true;
});
const list = createView({
create: create$8,
write: write$5,
tag: 'ul',
name: 'list',
didWriteView: ({ root }) => {
root.childViews
.filter(
view => view.markedForRemoval && view.opacity === 0 && view.resting
)
.forEach(view => {
view._destroy();
root.removeChildView(view);
});
},
filterFrameActionsForChild: filterSetItemActions,
mixins: {
apis: ['dragCoordinates']
}
});
const create$9 = ({ root, props }) => {
root.ref.list = root.appendChildView(root.createChildView(list));
props.dragCoordinates = null;
props.overflowing = false;
};
const storeDragCoordinates = ({ root, props, action }) => {
if (!root.query('GET_ITEM_INSERT_LOCATION_FREEDOM')) return;
props.dragCoordinates = {
left: action.position.scopeLeft - root.ref.list.rect.element.left,
top:
action.position.scopeTop -
(root.rect.outer.top +
root.rect.element.marginTop +
root.rect.element.scrollTop)
};
};
const clearDragCoordinates = ({ props }) => {
props.dragCoordinates = null;
};
const route$3 = createRoute({
DID_DRAG: storeDragCoordinates,
DID_END_DRAG: clearDragCoordinates
});
const write$6 = ({ root, props, actions }) => {
// route actions
route$3({ root, props, actions });
// current drag position
root.ref.list.dragCoordinates = props.dragCoordinates;
// if currently overflowing but no longer received overflow
if (props.overflowing && !props.overflow) {
props.overflowing = false;
// reset overflow state
root.element.dataset.state = '';
root.height = null;
}
// if is not overflowing currently but does receive overflow value
if (props.overflow) {
const newHeight = Math.round(props.overflow);
if (newHeight !== root.height) {
props.overflowing = true;
root.element.dataset.state = 'overflow';
root.height = newHeight;
}
}
};
const listScroller = createView({
create: create$9,
write: write$6,
name: 'list-scroller',
mixins: {
apis: ['overflow', 'dragCoordinates'],
styles: ['height', 'translateY'],
animations: {
translateY: 'spring'
}
}
});
const attrToggle = (element, name, state, enabledValue = '') => {
if (state) {
attr(element, name, enabledValue);
} else {
element.removeAttribute(name);
}
};
const resetFileInput = input => {
// no value, no need to reset
if (!input || input.value === '') {
return;
}
try {
// for modern browsers
input.value = '';
} catch (err) {}
// for IE10
if (input.value) {
// quickly append input to temp form and reset form
const form = createElement$1('form');
const parentNode = input.parentNode;
const ref = input.nextSibling;
form.appendChild(input);
form.reset();
// re-inject input where it originally was
if (ref) {
parentNode.insertBefore(input, ref);
} else {
parentNode.appendChild(input);
}
}
};
const create$a = ({ root, props }) => {
// set id so can be referenced from outside labels
root.element.id = `filepond--browser-${props.id}`;
// set name of element (is removed when a value is set)
attr(root.element, 'name', root.query('GET_NAME'));
// we have to link this element to the status element
attr(root.element, 'aria-controls', `filepond--assistant-${props.id}`);
// set label, we use labelled by as otherwise the screenreader does not read the "browse" text in the label (as it has tabindex: 0)
attr(root.element, 'aria-labelledby', `filepond--drop-label-${props.id}`);
// handle changes to the input field
root.ref.handleChange = e => {
if (!root.element.value) {
return;
}
// extract files
const files = Array.from(root.element.files);
// we add a little delay so the OS file select window can move out of the way before we add our file
setTimeout(() => {
// load files
props.onload(files);
// reset input, it's just for exposing a method to drop files, should not retain any state
resetFileInput(root.element);
}, 250);
};
root.element.addEventListener('change', root.ref.handleChange);
};
const setAcceptedFileTypes = ({ root, action }) => {
attrToggle(
root.element,
'accept',
!!action.value,
action.value ? action.value.join(',') : ''
);
};
const toggleAllowMultiple = ({ root, action }) => {
attrToggle(root.element, 'multiple', action.value);
};
const toggleDisabled = ({ root, action }) => {
const isDisabled = root.query('GET_DISABLED');
const doesAllowBrowse = root.query('GET_ALLOW_BROWSE');
const disableField = isDisabled || !doesAllowBrowse;
attrToggle(root.element, 'disabled', disableField);
};
const toggleRequired = ({ root, action }) => {
// want to remove required, always possible
if (!action.value) {
attrToggle(root.element, 'required', false);
}
// if want to make required, only possible when zero items
else if (root.query('GET_TOTAL_ITEMS') === 0) {
attrToggle(root.element, 'required', true);
}
};
const setCaptureMethod = ({ root, action }) => {
attrToggle(
root.element,
'capture',
!!action.value,
action.value === true ? '' : action.value
);
};
const updateRequiredStatus = ({ root }) => {
const { element } = root;
// always remove the required attribute when more than zero items
if (root.query('GET_TOTAL_ITEMS') > 0) {
attrToggle(element, 'required', false);
attrToggle(element, 'name', false);
} else {
// add name attribute
attrToggle(element, 'name', true, root.query('GET_NAME'));
// remove any validation messages
const shouldCheckValidity = root.query('GET_CHECK_VALIDITY');
if (shouldCheckValidity) {
element.setCustomValidity('');
}
// we only add required if the field has been deemed required
if (root.query('GET_REQUIRED')) {
attrToggle(element, 'required', true);
}
}
};
const updateFieldValidityStatus = ({ root }) => {
const shouldCheckValidity = root.query('GET_CHECK_VALIDITY');
if (!shouldCheckValidity) return;
root.element.setCustomValidity(root.query('GET_LABEL_INVALID_FIELD'));
};
const browser = createView({
tag: 'input',
name: 'browser',
ignoreRect: true,
ignoreRectUpdate: true,
attributes: {
type: 'file'
},
create: create$a,
destroy: ({ root }) => {
root.element.removeEventListener('change', root.ref.handleChange);
},
write: createRoute({
DID_LOAD_ITEM: updateRequiredStatus,
DID_REMOVE_ITEM: updateRequiredStatus,
DID_THROW_ITEM_INVALID: updateFieldValidityStatus,
DID_SET_DISABLED: toggleDisabled,
DID_SET_ALLOW_BROWSE: toggleDisabled,
DID_SET_ALLOW_MULTIPLE: toggleAllowMultiple,
DID_SET_ACCEPTED_FILE_TYPES: setAcceptedFileTypes,
DID_SET_CAPTURE_METHOD: setCaptureMethod,
DID_SET_REQUIRED: toggleRequired
})
});
const Key = {
ENTER: 13,
SPACE: 32
};
const create$b = ({ root, props }) => {
// create the label and link it to the file browser
const label = createElement$1('label');
attr(label, 'for', `filepond--browser-${props.id}`);
// use for labeling file input (aria-labelledby on file input)
attr(label, 'id', `filepond--drop-label-${props.id}`);
// hide the label for screenreaders, the input element will read the contents of the label when it's focussed. If we don't set aria-hidden the screenreader will also navigate the contents of the label separately from the input.
attr(label, 'aria-hidden', 'true');
// handle keys
root.ref.handleKeyDown = e => {
const isActivationKey = e.keyCode === Key.ENTER || e.keyCode === Key.SPACE;
if (!isActivationKey) return;
// stops from triggering the element a second time
e.preventDefault();
// click link (will then in turn activate file input)
root.ref.label.click();
};
root.ref.handleClick = e => {
const isLabelClick = e.target === label || label.contains(e.target);
// don't want to click twice
if (isLabelClick) return;
// click link (will then in turn activate file input)
root.ref.label.click();
};
// attach events
label.addEventListener('keydown', root.ref.handleKeyDown);
root.element.addEventListener('click', root.ref.handleClick);
// update
updateLabelValue(label, props.caption);
// add!
root.appendChild(label);
root.ref.label = label;
};
const updateLabelValue = (label, value) => {
label.innerHTML = value;
const clickable = label.querySelector('.filepond--label-action');
if (clickable) {
attr(clickable, 'tabindex', '0');
}
return value;
};
const dropLabel = createView({
name: 'drop-label',
ignoreRect: true,
create: create$b,
destroy: ({ root }) => {
root.ref.label.addEventListener('keydown', root.ref.handleKeyDown);
root.element.removeEventListener('click', root.ref.handleClick);
},
write: createRoute({
DID_SET_LABEL_IDLE: ({ root, action }) => {
updateLabelValue(root.ref.label, action.value);
}
}),
mixins: {
styles: ['opacity', 'translateX', 'translateY'],
animations: {
opacity: { type: 'tween', duration: 150 },
translateX: 'spring',
translateY: 'spring'
}
}
});
const blob = createView({
name: 'drip-blob',
ignoreRect: true,
mixins: {
styles: ['translateX', 'translateY', 'scaleX', 'scaleY', 'opacity'],
animations: {
scaleX: 'spring',
scaleY: 'spring',
translateX: 'spring',
translateY: 'spring',
opacity: { type: 'tween', duration: 250 }
}
}
});
const addBlob = ({ root }) => {
const centerX = root.rect.element.width * 0.5;
const centerY = root.rect.element.height * 0.5;
root.ref.blob = root.appendChildView(
root.createChildView(blob, {
opacity: 0,
scaleX: 2.5,
scaleY: 2.5,
translateX: centerX,
translateY: centerY
})
);
};
const moveBlob = ({ root, action }) => {
if (!root.ref.blob) {
addBlob({ root });
return;
}
root.ref.blob.translateX = action.position.scopeLeft;
root.ref.blob.translateY = action.position.scopeTop;
root.ref.blob.scaleX = 1;
root.ref.blob.scaleY = 1;
root.ref.blob.opacity = 1;
};
const hideBlob = ({ root }) => {
if (!root.ref.blob) {
return;
}
root.ref.blob.opacity = 0;
};
const explodeBlob = ({ root }) => {
if (!root.ref.blob) {
return;
}
root.ref.blob.scaleX = 2.5;
root.ref.blob.scaleY = 2.5;
root.ref.blob.opacity = 0;
};
const write$7 = ({ root, props, actions }) => {
route$4({ root, props, actions });
const { blob } = root.ref;
if (actions.length === 0 && blob && blob.opacity === 0) {
root.removeChildView(blob);
root.ref.blob = null;
}
};
const route$4 = createRoute({
DID_DRAG: moveBlob,
DID_DROP: explodeBlob,
DID_END_DRAG: hideBlob
});
const drip = createView({
ignoreRect: true,
ignoreRectUpdate: true,
name: 'drip',
write: write$7
});
const getRootNode = element =>
'getRootNode' in element ? element.getRootNode() : document;
const images = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg', 'tiff'];
const text$1 = ['css', 'csv', 'html', 'txt'];
const apps = ['rtf', 'pdf', 'json'];
const map = {
zip: 'zip|compressed',
epub: 'application/epub+zip'
};
const guesstimateMimeType = (extension = '') => {
extension = extension.toLowerCase();
if (images.includes(extension)) {
return (
'image/' +
(extension === 'jpg'
? 'jpeg'
: extension === 'svg'
? 'svg+xml'
: extension)
);
}
if (text$1.includes(extension)) {
return 'text/' + extension;
}
return map[extension] || null;
};
const requestDataTransferItems = dataTransfer =>
new Promise((resolve, reject) => {
// try to get links from transfer, if found we'll exit immidiately (unless a file is in the dataTransfer as well, this is because Firefox could represent the file as a URL and a file object at the same time)
const links = getLinks(dataTransfer);
if (links.length && !hasFiles(dataTransfer)) {
return resolve(links);
}
// try to get files from the transfer
getFiles(dataTransfer).then(resolve);
});
/**
* Test if datatransfer has files
*/
const hasFiles = dataTransfer => {
if (dataTransfer.files) return dataTransfer.files.length > 0;
return false;
};
/**
* Extracts files from a DataTransfer object
*/
const getFiles = dataTransfer =>
new Promise((resolve, reject) => {
// get the transfer items as promises
const promisedFiles = (dataTransfer.items
? Array.from(dataTransfer.items)
: []
)
// only keep file system items (files and directories)
.filter(item => isFileSystemItem(item))
// map each item to promise
.map(item => getFilesFromItem(item));
// if is empty, see if we can extract some info from the files property as a fallback
if (!promisedFiles.length) {
// TODO: test for directories (should not be allowed)
// Use FileReader, problem is that the files property gets lost in the process
resolve(dataTransfer.files ? Array.from(dataTransfer.files) : []);
return;
}
// done!
Promise.all(promisedFiles).then(returendFileGroups => {
// flatten groups
const files = [];
returendFileGroups.forEach(group => {
files.push.apply(files, group);
});
// done (filter out empty files)!
resolve(files.filter(file => file));
});
});
const isFileSystemItem = item => {
if (isEntry(item)) {
const entry = getAsEntry(item);
if (entry) {
return entry.isFile || entry.isDirectory;
}
}
return item.kind === 'file';
};
const getFilesFromItem = item =>
new Promise((resolve, reject) => {
if (isDirectoryEntry(item)) {
getFilesInDirectory(getAsEntry(item)).then(resolve);
return;
}
resolve([item.getAsFile()]);
});
const getFilesInDirectory = entry =>
new Promise((resolve, reject) => {
const files = [];
// the total entries to read
let totalFilesFound = 0;
// the recursive function
const readEntries = dirEntry => {
const directoryReader = dirEntry.createReader();
directoryReader.readEntries(entries => {
entries.forEach(entry => {
// recursively read more directories
if (entry.isDirectory) {
readEntries(entry);
} else {
// read as file
totalFilesFound++;
entry.file(file => {
files.push(correctMissingFileType(file));
if (totalFilesFound === files.length) {
resolve(files);
}
});
}
});
});
};
// go!
readEntries(entry);
});
const correctMissingFileType = file => {
if (file.type.length) return file;
const date = file.lastModifiedDate;
const name = file.name;
file = file.slice(
0,
file.size,
guesstimateMimeType(getExtensionFromFilename(file.name))
);
file.name = name;
file.lastModifiedDate = date;
return file;
};
const isDirectoryEntry = item =>
isEntry(item) && (getAsEntry(item) || {}).isDirectory;
const isEntry = item => 'webkitGetAsEntry' in item;
const getAsEntry = item => item.webkitGetAsEntry();
/**
* Extracts links from a DataTransfer object
*/
const getLinks = dataTransfer => {
let links = [];
try {
// look in meta data property
links = getLinksFromTransferMetaData(dataTransfer);
if (links.length) {
return links;
}
links = getLinksFromTransferURLData(dataTransfer);
} catch (e) {
// nope nope nope (probably IE trouble)
}
return links;
};
const getLinksFromTransferURLData = dataTransfer => {
let data = dataTransfer.getData('url');
if (typeof data === 'string' && data.length) {
return [data];
}
return [];
};
const getLinksFromTransferMetaData = dataTransfer => {
let data = dataTransfer.getData('text/html');
if (typeof data === 'string' && data.length) {
const matches = data.match(/src\s*=\s*"(.+?)"/);
if (matches) {
return [matches[1]];
}
}
return [];
};
const dragNDropObservers = [];
const eventPosition = e => ({
pageLeft: e.pageX,
pageTop: e.pageY,
scopeLeft: e.offsetX || e.layerX,
scopeTop: e.offsetY || e.layerY
});
const createDragNDropClient = (element, scopeToObserve, filterElement) => {
const observer = getDragNDropObserver(scopeToObserve);
const client = {
element,
filterElement,
state: null,
ondrop: () => {},
onenter: () => {},
ondrag: () => {},
onexit: () => {},
onload: () => {},
allowdrop: () => {}
};
client.destroy = observer.addListener(client);
return client;
};
const getDragNDropObserver = element => {
// see if already exists, if so, return
const observer = dragNDropObservers.find(item => item.element === element);
if (observer) {
return observer;
}
// create new observer, does not yet exist for this element
const newObserver = createDragNDropObserver(element);
dragNDropObservers.push(newObserver);
return newObserver;
};
const createDragNDropObserver = element => {
const clients = [];
const routes = {
dragenter,
dragover,
dragleave,
drop
};
const handlers = {};
forin(routes, (event, createHandler) => {
handlers[event] = createHandler(element, clients);
element.addEventListener(event, handlers[event], false);
});
const observer = {
element,
addListener: client => {
// add as client
clients.push(client);
// return removeListener function
return () => {
// remove client
clients.splice(clients.indexOf(client), 1);
// if no more clients, clean up observer
if (clients.length === 0) {
dragNDropObservers.splice(dragNDropObservers.indexOf(observer), 1);
forin(routes, event => {
element.removeEventListener(event, handlers[event], false);
});
}
};
}
};
return observer;
};
const elementFromPoint = (root, point) => {
if (!('elementFromPoint' in root)) {
root = document;
}
return root.elementFromPoint(point.x, point.y);
};
const isEventTarget = (e, target) => {
// get root
const root = getRootNode(target);
// get element at position
// if root is not actual shadow DOM and does not have elementFromPoint method, use the one on document
const elementAtPosition = elementFromPoint(root, {
x: e.pageX - window.pageXOffset,
y: e.pageY - window.pageYOffset
});
// test if target is the element or if one of its children is
return elementAtPosition === target || target.contains(elementAtPosition);
};
let initialTarget = null;
const setDropEffect = (dataTransfer, effect) => {
// is in try catch as IE11 will throw error if not
try {
dataTransfer.dropEffect = effect;
} catch (e) {}
};
const dragenter = (root, clients) => e => {
e.preventDefault();
initialTarget = e.target;
clients.forEach(client => {
const { element, onenter } = client;
if (isEventTarget(e, element)) {
client.state = 'enter';
// fire enter event
onenter(eventPosition(e));
}
});
};
const dragover = (root, clients) => e => {
e.preventDefault();
const dataTransfer = e.dataTransfer;
requestDataTransferItems(dataTransfer).then(items => {
let overDropTarget = false;
clients.some(client => {
const {
filterElement,
element,
onenter,
onexit,
ondrag,
allowdrop
} = client;
// by default we can drop
setDropEffect(dataTransfer, 'copy');
// allow transfer of these items
const allowsTransfer = allowdrop(items);
// only used when can be dropped on page
if (!allowsTransfer) {
setDropEffect(dataTransfer, 'none');
return;
}
// targetting this client
if (isEventTarget(e, element)) {
overDropTarget = true;
// had no previous state, means we are entering this client
if (client.state === null) {
client.state = 'enter';
onenter(eventPosition(e));
return;
}
// now over element (no matter if it allows the drop or not)
client.state = 'over';
// needs to allow transfer
if (filterElement && !allowsTransfer) {
setDropEffect(dataTransfer, 'none');
return;
}
// dragging
ondrag(eventPosition(e));
} else {
// should be over an element to drop
if (filterElement && !overDropTarget) {
setDropEffect(dataTransfer, 'none');
}
// might have just left this client?
if (client.state) {
client.state = null;
onexit(eventPosition(e));
}
}
});
});
};
const drop = (root, clients) => e => {
e.preventDefault();
const dataTransfer = e.dataTransfer;
requestDataTransferItems(dataTransfer).then(items => {
clients.forEach(client => {
const { filterElement, element, ondrop, onexit, allowdrop } = client;
client.state = null;
const allowsTransfer = allowdrop(items);
// no transfer for this client
if (!allowsTransfer) {
onexit(eventPosition(e));
return;
}
// if we're filtering on element we need to be over the element to drop
if (filterElement && !isEventTarget(e, element)) {
return;
}
ondrop(eventPosition(e), items);
});
});
};
const dragleave = (root, clients) => e => {
if (initialTarget !== e.target) {
return;
}
clients.forEach(client => {
const { onexit } = client;
client.state = null;
onexit(eventPosition(e));
});
};
const createHopper = (scope, validateItems, options) => {
// is now hopper scope
scope.classList.add('filepond--hopper');
// shortcuts
const {
catchesDropsOnPage,
requiresDropOnElement,
filterItems = items => items
} = options;
// create a dnd client
const client = createDragNDropClient(
scope,
catchesDropsOnPage ? document.documentElement : scope,
requiresDropOnElement
);
// current client state
let lastState = '';
let currentState = '';
// determines if a file may be dropped
client.allowdrop = items => {
// TODO: if we can, throw error to indicate the items cannot by dropped
return validateItems(filterItems(items));
};
client.ondrop = (position, items) => {
const filteredItems = filterItems(items);
if (!validateItems(filteredItems)) {
api.ondragend(position);
return;
}
currentState = 'drag-drop';
api.onload(filteredItems, position);
};
client.ondrag = position => {
api.ondrag(position);
};
client.onenter = position => {
currentState = 'drag-over';
api.ondragstart(position);
};
client.onexit = position => {
currentState = 'drag-exit';
api.ondragend(position);
};
const api = {
updateHopperState: () => {
if (lastState !== currentState) {
scope.dataset.hopperState = currentState;
lastState = currentState;
}
},
onload: () => {},
ondragstart: () => {},
ondrag: () => {},
ondragend: () => {},
destroy: () => {
// destroy client
client.destroy();
}
};
return api;
};
let listening = false;
const listeners$1 = [];
const handlePaste = e => {
requestDataTransferItems(e.clipboardData).then(files => {
// no files received
if (!files.length) {
return;
}
// notify listeners of received files
listeners$1.forEach(listener => listener(files));
});
};
const listen = cb => {
// can't add twice
if (listeners$1.includes(cb)) {
return;
}
// add initial listener
listeners$1.push(cb);
// setup paste listener for entire page
if (listening) {
return;
}
listening = true;
document.addEventListener('paste', handlePaste);
};
const unlisten = listener => {
arrayRemove(listeners$1, listeners$1.indexOf(listener));
// clean up
if (listeners$1.length === 0) {
document.removeEventListener('paste', handlePaste);
listening = false;
}
};
const createPaster = () => {
const cb = files => {
api.onload(files);
};
const api = {
destroy: () => {
unlisten(cb);
},
onload: () => {}
};
listen(cb);
return api;
};
/**
* Creates the file view
*/
const create$c = ({ root, props }) => {
root.element.id = `filepond--assistant-${props.id}`;
attr(root.element, 'role', 'status');
attr(root.element, 'aria-live', 'polite');
attr(root.element, 'aria-relevant', 'additions');
};
let addFilesNotificationTimeout = null;
let notificationClearTimeout = null;
const filenames = [];
const assist = (root, message) => {
root.element.textContent = message;
};
const clear$1 = root => {
root.element.textContent = '';
};
const listModified = (root, filename, label) => {
const total = root.query('GET_TOTAL_ITEMS');
assist(
root,
`${label} ${filename}, ${total} ${
total === 1
? root.query('GET_LABEL_FILE_COUNT_SINGULAR')
: root.query('GET_LABEL_FILE_COUNT_PLURAL')
}`
);
// clear group after set amount of time so the status is not read twice
clearTimeout(notificationClearTimeout);
notificationClearTimeout = setTimeout(() => {
clear$1(root);
}, 1500);
};
const isUsingFilePond = root =>
root.element.parentNode.contains(document.activeElement);
const itemAdded = ({ root, action }) => {
if (!isUsingFilePond(root)) {
return;
}
root.element.textContent = '';
const item = root.query('GET_ITEM', action.id);
filenames.push(item.filename);
clearTimeout(addFilesNotificationTimeout);
addFilesNotificationTimeout = setTimeout(() => {
listModified(
root,
filenames.join(', '),
root.query('GET_LABEL_FILE_ADDED')
);
filenames.length = 0;
}, 750);
};
const itemRemoved = ({ root, action }) => {
if (!isUsingFilePond(root)) {
return;
}
const item = action.item;
listModified(root, item.filename, root.query('GET_LABEL_FILE_REMOVED'));
};
const itemProcessed = ({ root, action }) => {
// will also notify the user when FilePond is not being used, as the user might be occupied with other activities while uploading a file
const item = root.query('GET_ITEM', action.id);
const filename = item.filename;
const label = root.query('GET_LABEL_FILE_PROCESSING_COMPLETE');
assist(root, `${filename} ${label}`);
};
const itemProcessedUndo = ({ root, action }) => {
const item = root.query('GET_ITEM', action.id);
const filename = item.filename;
const label = root.query('GET_LABEL_FILE_PROCESSING_ABORTED');
assist(root, `${filename} ${label}`);
};
const itemError = ({ root, action }) => {
const item = root.query('GET_ITEM', action.id);
const filename = item.filename;
// will also notify the user when FilePond is not being used, as the user might be occupied with other activities while uploading a file
assist(root, `${action.status.main} ${filename} ${action.status.sub}`);
};
const assistant = createView({
create: create$c,
ignoreRect: true,
ignoreRectUpdate: true,
write: createRoute({
DID_LOAD_ITEM: itemAdded,
DID_REMOVE_ITEM: itemRemoved,
DID_COMPLETE_ITEM_PROCESSING: itemProcessed,
DID_ABORT_ITEM_PROCESSING: itemProcessedUndo,
DID_REVERT_ITEM_PROCESSING: itemProcessedUndo,
DID_THROW_ITEM_REMOVE_ERROR: itemError,
DID_THROW_ITEM_LOAD_ERROR: itemError,
DID_THROW_ITEM_INVALID: itemError,
DID_THROW_ITEM_PROCESSING_ERROR: itemError
}),
tag: 'span',
name: 'assistant'
});
const toCamels = (string, separator = '-') =>
string.replace(new RegExp(`${separator}.`, 'g'), sub =>
sub.charAt(1).toUpperCase()
);
const debounce = (func, interval = 16, immidiateOnly = true) => {
let last = Date.now();
let timeout = null;
return (...args) => {
clearTimeout(timeout);
const dist = Date.now() - last;
const fn = () => {
last = Date.now();
func(...args);
};
if (dist < interval) {
// we need to delay by the difference between interval and dist
// for example: if distance is 10 ms and interval is 16 ms,
// we need to wait an additional 6ms before calling the function)
if (!immidiateOnly) {
timeout = setTimeout(fn, interval - dist);
}
} else {
// go!
fn();
}
};
};
const MAX_FILES_LIMIT = 1000000;
const create$d = ({ root, props }) => {
// Add id
const id = root.query('GET_ID');
if (id) {
root.element.id = id;
}
// Add className
const className = root.query('GET_CLASS_NAME');
if (className) {
className.split(' ').forEach(name => {
root.element.classList.add(name);
});
}
// Field label
root.ref.label = root.appendChildView(
root.createChildView(dropLabel, {
...props,
translateY: null,
caption: root.query('GET_LABEL_IDLE')
})
);
// List of items
root.ref.list = root.appendChildView(
root.createChildView(listScroller, { translateY: null })
);
// Background panel
root.ref.panel = root.appendChildView(
root.createChildView(panel, { name: 'panel-root' })
);
// Assistant notifies assistive tech when content changes
root.ref.assistant = root.appendChildView(
root.createChildView(assistant, { ...props })
);
// Measure (tests if fixed height was set)
// DOCTYPE needs to be set for this to work
root.ref.measure = createElement$1('div');
root.ref.measure.style.height = '100%';
root.element.appendChild(root.ref.measure);
// information on the root height or fixed height status
root.ref.bounds = null;
// apply initial style properties
root
.query('GET_STYLES')
.filter(style => !isEmpty(style.value))
.map(({ name, value }) => {
root.element.dataset[name] = value;
});
// determine if width changed
root.ref.widthPrevious = null;
root.ref.widthUpdated = debounce(() => {
root.ref.updateHistory = [];
root.dispatch('DID_RESIZE_ROOT');
}, 250);
// history of updates
root.ref.previousAspectRatio = null;
root.ref.updateHistory = [];
};
const write$8 = ({ root, props, actions }) => {
// route actions
route$5({ root, props, actions });
// apply style properties
actions
.filter(action => /^DID_SET_STYLE_/.test(action.type))
.filter(action => !isEmpty(action.data.value))
.map(({ type, data }) => {
const name = toCamels(type.substr(8).toLowerCase(), '_');
root.element.dataset[name] = data.value;
root.invalidateLayout();
});
if (root.rect.element.hidden) return;
if (root.rect.element.width !== root.ref.widthPrevious) {
root.ref.widthPrevious = root.rect.element.width;
root.ref.widthUpdated();
}
// get box bounds, we do this only once
let bounds = root.ref.bounds;
if (!bounds) {
bounds = root.ref.bounds = calculateRootBoundingBoxHeight(root);
// destroy measure element
root.element.removeChild(root.ref.measure);
root.ref.measure = null;
}
// get quick references to various high level parts of the upload tool
const { hopper, label, list, panel } = root.ref;
// sets correct state to hopper scope
if (hopper) {
hopper.updateHopperState();
}
// bool to indicate if we're full or not
const aspectRatio = root.query('GET_PANEL_ASPECT_RATIO');
const isMultiItem = root.query('GET_ALLOW_MULTIPLE');
const totalItems = root.query('GET_TOTAL_ITEMS');
const maxItems = isMultiItem
? root.query('GET_MAX_FILES') || MAX_FILES_LIMIT
: 1;
const atMaxCapacity = totalItems === maxItems;
// action used to add item
const addAction = actions.find(action => action.type === 'DID_ADD_ITEM');
// if reached max capacity and we've just reached it
if (atMaxCapacity && addAction) {
// get interaction type
const interactionMethod = addAction.data.interactionMethod;
// hide label
label.opacity = 0;
if (isMultiItem) {
label.translateY = -40;
} else {
if (interactionMethod === InteractionMethod.API) {
label.translateX = 40;
} else if (interactionMethod === InteractionMethod.BROWSE) {
label.translateY = 40;
} else {
label.translateY = 30;
}
}
} else if (!atMaxCapacity) {
label.opacity = 1;
label.translateX = 0;
label.translateY = 0;
}
const listItemMargin = calculateListItemMargin(root);
const listHeight = calculateListHeight(root);
const labelHeight = label.rect.element.height;
const currentLabelHeight = !isMultiItem || atMaxCapacity ? 0 : labelHeight;
const listMarginTop = atMaxCapacity ? list.rect.element.marginTop : 0;
const listMarginBottom =
totalItems === 0 ? 0 : list.rect.element.marginBottom;
const visualHeight =
currentLabelHeight + listMarginTop + listHeight.visual + listMarginBottom;
const boundsHeight =
currentLabelHeight + listMarginTop + listHeight.bounds + listMarginBottom;
// link list to label bottom position
list.translateY =
Math.max(0, currentLabelHeight - list.rect.element.marginTop) -
listItemMargin.top;
if (aspectRatio) {
// fixed aspect ratio
// calculate height based on width
const width = root.rect.element.width;
const height = width * aspectRatio;
// clear history if aspect ratio has changed
if (aspectRatio !== root.ref.previousAspectRatio) {
root.ref.previousAspectRatio = aspectRatio;
root.ref.updateHistory = [];
}
// remember this width
const history = root.ref.updateHistory;
history.push(width);
const MAX_BOUNCES = 2;
if (history.length > MAX_BOUNCES * 2) {
const l = history.length;
const bottom = l - 10;
let bounces = 0;
for (let i = l; i >= bottom; i--) {
if (history[i] === history[i - 2]) {
bounces++;
}
if (bounces >= MAX_BOUNCES) {
// dont adjust height
return;
}
}
}
// fix height of panel so it adheres to aspect ratio
panel.scalable = false;
panel.height = height;
// available height for list
const listAvailableHeight =
// the height of the panel minus the label height
height -
currentLabelHeight -
// the room we leave open between the end of the list and the panel bottom
(listMarginBottom - listItemMargin.bottom) -
// if we're full we need to leave some room between the top of the panel and the list
(atMaxCapacity ? listMarginTop : 0);
if (listHeight.visual > listAvailableHeight) {
list.overflow = listAvailableHeight;
} else {
list.overflow = null;
}
// set container bounds (so pushes siblings downwards)
root.height = height;
} else if (bounds.fixedHeight) {
// fixed height
// fix height of panel
panel.scalable = false;
// available height for list
const listAvailableHeight =
// the height of the panel minus the label height
bounds.fixedHeight -
currentLabelHeight -
// the room we leave open between the end of the list and the panel bottom
(listMarginBottom - listItemMargin.bottom) -
// if we're full we need to leave some room between the top of the panel and the list
(atMaxCapacity ? listMarginTop : 0);
// set list height
if (listHeight.visual > listAvailableHeight) {
list.overflow = listAvailableHeight;
} else {
list.overflow = null;
}
// no need to set container bounds as these are handles by CSS fixed height
} else if (bounds.cappedHeight) {
// max-height
// not a fixed height panel
const isCappedHeight = visualHeight >= bounds.cappedHeight;
const panelHeight = Math.min(bounds.cappedHeight, visualHeight);
panel.scalable = true;
panel.height = isCappedHeight
? panelHeight
: panelHeight - listItemMargin.top - listItemMargin.bottom;
// available height for list
const listAvailableHeight =
// the height of the panel minus the label height
panelHeight -
currentLabelHeight -
// the room we leave open between the end of the list and the panel bottom
(listMarginBottom - listItemMargin.bottom) -
// if we're full we need to leave some room between the top of the panel and the list
(atMaxCapacity ? listMarginTop : 0);
// set list height (if is overflowing)
if (
visualHeight > bounds.cappedHeight &&
listHeight.visual > listAvailableHeight
) {
list.overflow = listAvailableHeight;
} else {
list.overflow = null;
}
// set container bounds (so pushes siblings downwards)
root.height = Math.min(
bounds.cappedHeight,
boundsHeight - listItemMargin.top - listItemMargin.bottom
);
} else {
// flexible height
// not a fixed height panel
const itemMargin =
totalItems > 0 ? listItemMargin.top + listItemMargin.bottom : 0;
panel.scalable = true;
panel.height = Math.max(labelHeight, visualHeight - itemMargin);
// set container bounds (so pushes siblings downwards)
root.height = Math.max(labelHeight, boundsHeight - itemMargin);
}
};
const calculateListItemMargin = root => {
const item = root.ref.list.childViews[0].childViews[0];
return item
? {
top: item.rect.element.marginTop,
bottom: item.rect.element.marginBottom
}
: {
top: 0,
bottom: 0
};
};
const calculateListHeight = root => {
let visual = 0;
let bounds = 0;
// get file list reference
const scrollList = root.ref.list;
const itemList = scrollList.childViews[0];
const children = itemList.childViews;
// no children, done!
if (children.length === 0) return { visual, bounds };
const horizontalSpace = itemList.rect.element.width;
const dragIndex = getItemIndexByPosition(
itemList,
scrollList.dragCoordinates
);
const childRect = children[0].rect.element;
const itemVerticalMargin = childRect.marginTop + childRect.marginBottom;
const itemHorizontalMargin = childRect.marginLeft + childRect.marginRight;
const itemWidth = childRect.width + itemHorizontalMargin;
const itemHeight = childRect.height + itemVerticalMargin;
const newItem = typeof dragIndex !== 'undefined' && dragIndex >= 0 ? 1 : 0;
const removedItem = children.find(
child => child.markedForRemoval && child.opacity < 0.45
)
? -1
: 0;
const verticalItemCount = children.length + newItem + removedItem;
const itemsPerRow = Math.round(horizontalSpace / itemWidth);
// stack
if (itemsPerRow === 1) {
children.forEach(item => {
const height = item.rect.element.height + itemVerticalMargin;
bounds += height;
visual += height * item.opacity;
});
}
// grid
else {
bounds = Math.ceil(verticalItemCount / itemsPerRow) * itemHeight;
visual = bounds;
}
return { visual, bounds };
};
const calculateRootBoundingBoxHeight = root => {
const height = root.ref.measureHeight || null;
const cappedHeight = parseInt(root.style.maxHeight, 10) || null;
const fixedHeight = height === 0 ? null : height;
return {
cappedHeight,
fixedHeight
};
};
const exceedsMaxFiles = (root, items) => {
const allowReplace = root.query('GET_ALLOW_REPLACE');
const allowMultiple = root.query('GET_ALLOW_MULTIPLE');
const totalItems = root.query('GET_TOTAL_ITEMS');
let maxItems = root.query('GET_MAX_FILES');
// total amount of items being dragged
const totalBrowseItems = items.length;
// if does not allow multiple items and dragging more than one item
if (!allowMultiple && totalBrowseItems > 1) {
return true;
}
// limit max items to one if not allowed to drop multiple items
maxItems = allowMultiple ? maxItems : allowReplace ? maxItems : 1;
// no more room?
const hasMaxItems = isInt(maxItems);
if (hasMaxItems && totalItems + totalBrowseItems > maxItems) {
root.dispatch('DID_THROW_MAX_FILES', {
source: items,
error: createResponse('warning', 0, 'Max files')
});
return true;
}
return false;
};
const getDragIndex = (list, position) => {
const itemList = list.childViews[0];
return getItemIndexByPosition(itemList, {
left: position.scopeLeft - itemList.rect.element.left,
top:
position.scopeTop -
(list.rect.outer.top +
list.rect.element.marginTop +
list.rect.element.scrollTop)
});
};
/**
* Enable or disable file drop functionality
*/
const toggleDrop = root => {
const isAllowed = root.query('GET_ALLOW_DROP');
const isDisabled = root.query('GET_DISABLED');
const enabled = isAllowed && !isDisabled;
if (enabled && !root.ref.hopper) {
const hopper = createHopper(
root.element,
items => {
// these files don't fit so stop here
if (exceedsMaxFiles(root, items)) return false;
// allow quick validation of dropped items
const beforeDropFile =
root.query('GET_BEFORE_DROP_FILE') || (() => true);
// all items should be validated by all filters as valid
const dropValidation = root.query('GET_DROP_VALIDATION');
return dropValidation
? items.every(
item =>
applyFilters('ALLOW_HOPPER_ITEM', item, {
query: root.query
}).every(result => result === true) && beforeDropFile(item)
)
: true;
},
{
filterItems: items => {
const ignoredFiles = root.query('GET_IGNORED_FILES');
return items.filter(item => {
if (isFile(item)) {
return !ignoredFiles.includes(item.name.toLowerCase());
}
return true;
});
},
catchesDropsOnPage: root.query('GET_DROP_ON_PAGE'),
requiresDropOnElement: root.query('GET_DROP_ON_ELEMENT')
}
);
hopper.onload = (items, position) => {
root.dispatch('ADD_ITEMS', {
items,
index: getDragIndex(root.ref.list, position),
interactionMethod: InteractionMethod.DROP
});
root.dispatch('DID_DROP', { position });
root.dispatch('DID_END_DRAG', { position });
};
hopper.ondragstart = position => {
root.dispatch('DID_START_DRAG', { position });
};
hopper.ondrag = debounce(position => {
root.dispatch('DID_DRAG', { position });
});
hopper.ondragend = position => {
root.dispatch('DID_END_DRAG', { position });
};
root.ref.hopper = hopper;
root.ref.drip = root.appendChildView(root.createChildView(drip));
} else if (!enabled && root.ref.hopper) {
root.ref.hopper.destroy();
root.ref.hopper = null;
root.removeChildView(root.ref.drip);
}
};
/**
* Enable or disable browse functionality
*/
const toggleBrowse = (root, props) => {
const isAllowed = root.query('GET_ALLOW_BROWSE');
const isDisabled = root.query('GET_DISABLED');
const enabled = isAllowed && !isDisabled;
if (enabled && !root.ref.browser) {
root.ref.browser = root.appendChildView(
root.createChildView(browser, {
...props,
onload: items => {
// these files don't fit so stop here
if (exceedsMaxFiles(root, items)) return false;
// add items!
root.dispatch('ADD_ITEMS', {
items,
index: -1,
interactionMethod: InteractionMethod.BROWSE
});
}
}),
0
);
} else if (!enabled && root.ref.browser) {
root.removeChildView(root.ref.browser);
root.ref.browser = null;
}
};
/**
* Enable or disable paste functionality
*/
const togglePaste = root => {
const isAllowed = root.query('GET_ALLOW_PASTE');
const isDisabled = root.query('GET_DISABLED');
const enabled = isAllowed && !isDisabled;
if (enabled && !root.ref.paster) {
root.ref.paster = createPaster();
root.ref.paster.onload = items => {
root.dispatch('ADD_ITEMS', {
items,
index: -1,
interactionMethod: InteractionMethod.PASTE
});
};
} else if (!enabled && root.ref.paster) {
root.ref.paster.destroy();
root.ref.paster = null;
}
};
/**
* Route actions
*/
const route$5 = createRoute({
DID_SET_ALLOW_BROWSE: ({ root, props }) => {
toggleBrowse(root, props);
},
DID_SET_ALLOW_DROP: ({ root }) => {
toggleDrop(root);
},
DID_SET_ALLOW_PASTE: ({ root }) => {
togglePaste(root);
},
DID_SET_DISABLED: ({ root, props }) => {
toggleDrop(root);
togglePaste(root);
toggleBrowse(root, props);
const isDisabled = root.query('GET_DISABLED');
if (isDisabled) {
root.element.dataset.disabled = 'disabled';
} else {
delete root.element.dataset.disabled;
}
}
});
const root = createView({
name: 'root',
read: ({ root }) => {
if (root.ref.measure) {
root.ref.measureHeight = root.ref.measure.offsetHeight;
}
},
create: create$d,
write: write$8,
destroy: ({ root }) => {
if (root.ref.paster) {
root.ref.paster.destroy();
}
if (root.ref.hopper) {
root.ref.hopper.destroy();
}
},
mixins: {
styles: ['height']
}
});
// creates the app
const createApp = (initialOptions = {}) => {
// let element
let originalElement = null;
// get default options
const defaultOptions = getOptions();
// create the data store, this will contain all our app info
const store = createStore(
// initial state (should be serializable)
createInitialState(defaultOptions),
// queries
[queries, createOptionQueries(defaultOptions)],
// action handlers
[actions, createOptionActions(defaultOptions)]
);
// set initial options
store.dispatch('SET_OPTIONS', { options: initialOptions });
// kick thread if visibility changes
const visibilityHandler = () => {
if (document.hidden) return;
store.dispatch('KICK');
};
document.addEventListener('visibilitychange', visibilityHandler);
// re-render on window resize start and finish
let resizeDoneTimer = null;
let isResizing = false;
let isResizingHorizontally = false;
let initialWindowWidth = null;
let currentWindowWidth = null;
const resizeHandler = () => {
if (!isResizing) {
isResizing = true;
}
clearTimeout(resizeDoneTimer);
resizeDoneTimer = setTimeout(() => {
isResizing = false;
initialWindowWidth = null;
currentWindowWidth = null;
if (isResizingHorizontally) {
isResizingHorizontally = false;
store.dispatch('DID_STOP_RESIZE');
}
}, 500);
};
window.addEventListener('resize', resizeHandler);
// render initial view
const view = root(store, { id: getUniqueId() });
//
// PRIVATE API -------------------------------------------------------------------------------------
//
let isResting = false;
let isHidden = false;
const readWriteApi = {
// necessary for update loop
/**
* Reads from dom (never call manually)
* @private
*/
_read: () => {
// test if we're resizing horizontally
// TODO: see if we can optimize this by measuring root rect
if (isResizing) {
currentWindowWidth = window.innerWidth;
if (!initialWindowWidth) {
initialWindowWidth = currentWindowWidth;
}
if (
!isResizingHorizontally &&
currentWindowWidth !== initialWindowWidth
) {
store.dispatch('DID_START_RESIZE');
isResizingHorizontally = true;
}
}
if (isHidden && isResting) {
// test if is no longer hidden
isResting = view.element.offsetParent === null;
}
// if resting, no need to read as numbers will still all be correct
if (isResting) return;
// read view data
view._read();
// if is hidden we need to know so we exit rest mode when revealed
isHidden = view.rect.element.hidden;
},
/**
* Writes to dom (never call manually)
* @private
*/
_write: ts => {
// get all actions from store
const actions = store
.processActionQueue()
// filter out set actions (these will automatically trigger DID_SET)
.filter(action => !/^SET_/.test(action.type));
// if was idling and no actions stop here
if (isResting && !actions.length) return;
// some actions might trigger events
routeActionsToEvents(actions);
// update the view
isResting = view._write(ts, actions, isResizingHorizontally);
// will clean up all archived items
removeReleasedItems(store.query('GET_ITEMS'));
// now idling
if (isResting) {
store.processDispatchQueue();
}
}
};
//
// EXPOSE EVENTS -------------------------------------------------------------------------------------
//
const createEvent = name => data => {
// create default event
const event = {
type: name
};
// no data to add
if (!data) {
return event;
}
// copy relevant props
if (data.hasOwnProperty('error')) {
event.error = data.error ? { ...data.error } : null;
}
if (data.status) {
event.status = { ...data.status };
}
if (data.file) {
event.output = data.file;
}
// only source is available, else add item if possible
if (data.source) {
event.file = data.source;
} else if (data.item || data.id) {
const item = data.item ? data.item : store.query('GET_ITEM', data.id);
event.file = item ? createItemAPI(item) : null;
}
// map all items in a possible items array
if (data.items) {
event.items = data.items.map(createItemAPI);
}
// if this is a progress event add the progress amount
if (/progress/.test(name)) {
event.progress = data.progress;
}
return event;
};
const eventRoutes = {
DID_DESTROY: createEvent('destroy'),
DID_INIT: createEvent('init'),
DID_THROW_MAX_FILES: createEvent('warning'),
DID_START_ITEM_LOAD: createEvent('addfilestart'),
DID_UPDATE_ITEM_LOAD_PROGRESS: createEvent('addfileprogress'),
DID_LOAD_ITEM: createEvent('addfile'),
DID_THROW_ITEM_INVALID: [createEvent('error'), createEvent('addfile')],
DID_THROW_ITEM_LOAD_ERROR: [createEvent('error'), createEvent('addfile')],
DID_THROW_ITEM_REMOVE_ERROR: [
createEvent('error'),
createEvent('removefile')
],
DID_PREPARE_OUTPUT: createEvent('preparefile'),
DID_START_ITEM_PROCESSING: createEvent('processfilestart'),
DID_UPDATE_ITEM_PROCESS_PROGRESS: createEvent('processfileprogress'),
DID_ABORT_ITEM_PROCESSING: createEvent('processfileabort'),
DID_COMPLETE_ITEM_PROCESSING: createEvent('processfile'),
DID_COMPLETE_ITEM_PROCESSING_ALL: createEvent('processfiles'),
DID_REVERT_ITEM_PROCESSING: createEvent('processfilerevert'),
DID_THROW_ITEM_PROCESSING_ERROR: [
createEvent('error'),
createEvent('processfile')
],
DID_REMOVE_ITEM: createEvent('removefile'),
DID_UPDATE_ITEMS: createEvent('updatefiles'),
DID_ACTIVATE_ITEM: createEvent('activatefile')
};
const exposeEvent = event => {
// create event object to be dispatched
const detail = { pond: exports, ...event };
delete detail.type;
view.element.dispatchEvent(
new CustomEvent(`FilePond:${event.type}`, {
// event info
detail,
// event behaviour
bubbles: true,
cancelable: true,
composed: true // triggers listeners outside of shadow root
})
);
// event object to params used for `on()` event handlers and callbacks `oninit()`
const params = [];
// if is possible error event, make it the first param
if (event.hasOwnProperty('error')) {
params.push(event.error);
}
// file is always section
if (event.hasOwnProperty('file')) {
params.push(event.file);
}
// append other props
const filtered = ['type', 'error', 'file'];
Object.keys(event)
.filter(key => !filtered.includes(key))
.forEach(key => params.push(event[key]));
// on(type, () => { })
exports.fire(event.type, ...params);
// oninit = () => {}
const handler = store.query(`GET_ON${event.type.toUpperCase()}`);
if (handler) {
handler(...params);
}
};
const routeActionsToEvents = actions => {
if (!actions.length) {
return;
}
actions.forEach(action => {
if (!eventRoutes[action.type]) {
return;
}
const routes = eventRoutes[action.type];
(Array.isArray(routes) ? routes : [routes]).forEach(route => {
setTimeout(() => {
exposeEvent(route(action.data));
}, 0);
});
});
};
//
// PUBLIC API -------------------------------------------------------------------------------------
//
const setOptions = options => store.dispatch('SET_OPTIONS', { options });
const getFile = query => store.query('GET_ACTIVE_ITEM', query);
const addFile = (source, options = {}) =>
new Promise((resolve, reject) => {
addFiles([{ source, options }], { index: options.index })
.then(items => resolve(items && items[0]))
.catch(reject);
});
const removeFile = query => {
// request item removal
store.dispatch('REMOVE_ITEM', { query });
// see if item has been removed
return store.query('GET_ACTIVE_ITEM', query) === null;
};
const addFiles = (...args) =>
new Promise((resolve, reject) => {
const sources = [];
const options = {};
// user passed a sources array
if (isArray(args[0])) {
sources.push.apply(sources, args[0]);
Object.assign(options, args[1] || {});
} else {
// user passed sources as arguments, last one might be options object
const lastArgument = args[args.length - 1];
if (
typeof lastArgument === 'object' &&
!(lastArgument instanceof Blob)
) {
Object.assign(options, args.pop());
}
// add rest to sources
sources.push(...args);
}
store.dispatch('ADD_ITEMS', {
items: sources,
index: options.index,
interactionMethod: InteractionMethod.API,
success: resolve,
failure: reject
});
});
const getFiles = () => store.query('GET_ACTIVE_ITEMS');
const processFile = query =>
new Promise((resolve, reject) => {
store.dispatch('REQUEST_ITEM_PROCESSING', {
query,
success: item => {
resolve(item);
},
failure: error => {
reject(error);
}
});
});
const processFiles = (...args) => {
const queries = Array.isArray(args[0]) ? args[0] : args;
if (!queries.length) {
const files = getFiles().filter(
item =>
!(
item.status === ItemStatus.IDLE && item.origin === FileOrigin.LOCAL
) &&
item.status !== ItemStatus.PROCESSING &&
item.status !== ItemStatus.PROCESSING_COMPLETE &&
item.status !== ItemStatus.PROCESSING_REVERT_ERROR
);
return Promise.all(files.map(processFile));
}
return Promise.all(queries.map(processFile));
};
const removeFiles = (...args) => {
const queries = Array.isArray(args[0]) ? args[0] : args;
const files = getFiles();
if (!queries.length) {
return Promise.all(files.map(removeFile));
}
// when removing by index the indexes shift after each file removal so we need to convert indexes to ids
const mappedQueries = queries
.map(query =>
isNumber(query) ? (files[query] ? files[query].id : null) : query
)
.filter(query => query);
return mappedQueries.map(removeFile);
};
const exports = {
// supports events
...on(),
// inject private api methods
...readWriteApi,
// inject all getters and setters
...createOptionAPI(store, defaultOptions),
/**
* Override options defined in options object
* @param options
*/
setOptions,
/**
* Load the given file
* @param source - the source of the file (either a File, base64 data uri or url)
* @param options - object, { index: 0 }
*/
addFile,
/**
* Load the given files
* @param sources - the sources of the files to load
* @param options - object, { index: 0 }
*/
addFiles,
/**
* Returns the file objects matching the given query
* @param query { string, number, null }
*/
getFile,
/**
* Upload file with given name
* @param query { string, number, null }
*/
processFile,
/**
* Removes a file by its name
* @param query { string, number, null }
*/
removeFile,
/**
* Returns all files (wrapped in public api)
*/
getFiles,
/**
* Starts uploading all files
*/
processFiles,
/**
* Clears all files from the files list
*/
removeFiles,
/**
* Sort list of files
*/
sort: compare => store.dispatch('SORT', { compare }),
/**
* Browse the file system for a file
*/
browse: () => {
// needs to be trigger directly as user action needs to be traceable (is not traceable in requestAnimationFrame)
var input = view.element.querySelector('input[type=file]');
if (input) {
input.click();
}
},
/**
* Destroys the app
*/
destroy: () => {
// request destruction
exports.fire('destroy', view.element);
// stop active processes (file uploads, fetches, stuff like that)
// loop over items and depending on states call abort for ongoing processes
store.dispatch('ABORT_ALL');
// destroy view
view._destroy();
// stop listening to resize
window.removeEventListener('resize', resizeHandler);
// stop listening to the visiblitychange event
document.removeEventListener('visibilitychange', visibilityHandler);
// dispatch destroy
store.dispatch('DID_DESTROY');
},
/**
* Inserts the plugin before the target element
*/
insertBefore: element => insertBefore(view.element, element),
/**
* Inserts the plugin after the target element
*/
insertAfter: element => insertAfter(view.element, element),
/**
* Appends the plugin to the target element
*/
appendTo: element => element.appendChild(view.element),
/**
* Replaces an element with the app
*/
replaceElement: element => {
// insert the app before the element
insertBefore(view.element, element);
// remove the original element
element.parentNode.removeChild(element);
// remember original element
originalElement = element;
},
/**
* Restores the original element
*/
restoreElement: () => {
if (!originalElement) {
return; // no element to restore
}
// restore original element
insertAfter(originalElement, view.element);
// remove our element
view.element.parentNode.removeChild(view.element);
// remove reference
originalElement = null;
},
/**
* Returns true if the app root is attached to given element
* @param element
*/
isAttachedTo: element =>
view.element === element || originalElement === element,
/**
* Returns the root element
*/
element: {
get: () => view.element
},
/**
* Returns the current pond status
*/
status: {
get: () => store.query('GET_STATUS')
}
};
// Done!
store.dispatch('DID_INIT');
// create actual api object
return createObject(exports);
};
const createAppObject = (customOptions = {}) => {
// default options
const defaultOptions = {};
forin(getOptions(), (key, value) => {
defaultOptions[key] = value[0];
});
// set app options
const app = createApp({
// default options
...defaultOptions,
// custom options
...customOptions
});
// return the plugin instance
return app;
};
const lowerCaseFirstLetter = string =>
string.charAt(0).toLowerCase() + string.slice(1);
const attributeNameToPropertyName = attributeName =>
toCamels(attributeName.replace(/^data-/, ''));
const mapObject = (object, propertyMap) => {
// remove unwanted
forin(propertyMap, (selector, mapping) => {
forin(object, (property, value) => {
// create regexp shortcut
const selectorRegExp = new RegExp(selector);
// tests if
const matches = selectorRegExp.test(property);
// no match, skip
if (!matches) {
return;
}
// if there's a mapping, the original property is always removed
delete object[property];
// should only remove, we done!
if (mapping === false) {
return;
}
// move value to new property
if (isString(mapping)) {
object[mapping] = value;
return;
}
// move to group
const group = mapping.group;
if (isObject(mapping) && !object[group]) {
object[group] = {};
}
object[group][
lowerCaseFirstLetter(property.replace(selectorRegExp, ''))
] = value;
});
// do submapping
if (mapping.mapping) {
mapObject(object[mapping.group], mapping.mapping);
}
});
};
const getAttributesAsObject = (node, attributeMapping = {}) => {
// turn attributes into object
const attributes = [];
forin(node.attributes, index => {
attributes.push(node.attributes[index]);
});
const output = attributes
.filter(attribute => attribute.name)
.reduce((obj, attribute) => {
const value = attr(node, attribute.name);
obj[attributeNameToPropertyName(attribute.name)] =
value === attribute.name ? true : value;
return obj;
}, {});
// do mapping of object properties
mapObject(output, attributeMapping);
return output;
};
const createAppAtElement = (element, options = {}) => {
// how attributes of the input element are mapped to the options for the plugin
const attributeMapping = {
// translate to other name
'^class$': 'className',
'^multiple$': 'allowMultiple',
'^capture$': 'captureMethod',
// group under single property
'^server': {
group: 'server',
mapping: {
'^process': {
group: 'process'
},
'^revert': {
group: 'revert'
},
'^fetch': {
group: 'fetch'
},
'^restore': {
group: 'restore'
},
'^load': {
group: 'load'
}
}
},
// don't include in object
'^type$': false,
'^files$': false
};
// add additional option translators
applyFilters('SET_ATTRIBUTE_TO_OPTION_MAP', attributeMapping);
// create final options object by setting options object and then overriding options supplied on element
const mergedOptions = {
...options
};
const attributeOptions = getAttributesAsObject(
element.nodeName === 'FIELDSET'
? element.querySelector('input[type=file]')
: element,
attributeMapping
);
// merge with options object
Object.keys(attributeOptions).forEach(key => {
if (isObject(attributeOptions[key])) {
if (!isObject(mergedOptions[key])) {
mergedOptions[key] = {};
}
Object.assign(mergedOptions[key], attributeOptions[key]);
} else {
mergedOptions[key] = attributeOptions[key];
}
});
// if parent is a fieldset, get files from parent by selecting all input fields that are not file upload fields
// these will then be automatically set to the initial files
mergedOptions.files = (options.files || []).concat(
Array.from(element.querySelectorAll('input:not([type=file])')).map(
input => ({
source: input.value,
options: {
type: input.dataset.type
}
})
)
);
// build plugin
const app = createAppObject(mergedOptions);
// add already selected files
if (element.files) {
Array.from(element.files).forEach(file => {
app.addFile(file);
});
}
// replace the target element
app.replaceElement(element);
// expose
return app;
};
// if an element is passed, we create the instance at that element, if not, we just create an up object
const createApp$1 = (...args) =>
isNode(args[0]) ? createAppAtElement(...args) : createAppObject(...args);
const PRIVATE_METHODS = ['fire', '_read', '_write'];
const createAppAPI = app => {
const api = {};
copyObjectPropertiesToObject(app, api, PRIVATE_METHODS);
return api;
};
/**
* Replaces placeholders in given string with replacements
* @param string - "Foo {bar}""
* @param replacements - { "bar": 10 }
*/
const replaceInString = (string, replacements) =>
string.replace(/(?:{([a-zA-Z]+)})/g, (match, group) => replacements[group]);
const createWorker = fn => {
const workerBlob = new Blob(['(', fn.toString(), ')()'], {
type: 'application/javascript'
});
const workerURL = URL.createObjectURL(workerBlob);
const worker = new Worker(workerURL);
return {
transfer: (message, cb) => {},
post: (message, cb, transferList) => {
const id = getUniqueId();
worker.onmessage = e => {
if (e.data.id === id) {
cb(e.data.message);
}
};
worker.postMessage(
{
id,
message
},
transferList
);
},
terminate: () => {
worker.terminate();
URL.revokeObjectURL(workerURL);
}
};
};
const loadImage = url =>
new Promise((resolve, reject) => {
const img = new Image();
img.onload = () => {
resolve(img);
};
img.onerror = e => {
reject(e);
};
img.src = url;
});
const renameFile = (file, name) => {
const renamedFile = file.slice(0, file.size, file.type);
renamedFile.lastModifiedDate = file.lastModifiedDate;
renamedFile.name = name;
return renamedFile;
};
const copyFile = file => renameFile(file, file.name);
// already registered plugins (can't register twice)
const registeredPlugins = [];
// pass utils to plugin
const createAppPlugin = plugin => {
// already registered
if (registeredPlugins.includes(plugin)) {
return;
}
// remember this plugin
registeredPlugins.push(plugin);
// setup!
const pluginOutline = plugin({
addFilter,
utils: {
Type,
forin,
isString,
isFile,
toNaturalFileSize,
replaceInString,
getExtensionFromFilename,
getFilenameWithoutExtension,
guesstimateMimeType,
getFileFromBlob,
getFilenameFromURL,
createRoute,
createWorker,
createView,
createItemAPI,
loadImage,
copyFile,
renameFile,
createBlob,
applyFilterChain,
text,
getNumericAspectRatioFromString
},
views: {
fileActionButton
}
});
// add plugin options to default options
extendDefaultOptions(pluginOutline.options);
};
// feature detection used by supported() method
const isOperaMini = () =>
Object.prototype.toString.call(window.operamini) === '[object OperaMini]';
const hasPromises = () => 'Promise' in window;
const hasBlobSlice = () => 'slice' in Blob.prototype;
const hasCreateObjectURL = () =>
'URL' in window && 'createObjectURL' in window.URL;
const hasVisibility = () => 'visibilityState' in document;
const hasTiming = () => 'performance' in window; // iOS 8.x
const isBrowser = () =>
typeof window !== 'undefined' && typeof window.document !== 'undefined';
const supported = (() => {
// Runs immidiately and then remembers result for subsequent calls
const isSupported =
// Has to be a browser
isBrowser() &&
// Can't run on Opera Mini due to lack of everything
!isOperaMini() &&
// Require these APIs to feature detect a modern browser
hasVisibility() &&
hasPromises() &&
hasBlobSlice() &&
hasCreateObjectURL() &&
hasTiming();
return () => isSupported;
})();
/**
* Plugin internal state (over all instances)
*/
const state = {
// active app instances, used to redraw the apps and to find the later
apps: []
};
// plugin name
const name = 'filepond';
/**
* Public Plugin methods
*/
const fn = () => {};
let Status$1 = {};
let FileStatus = {};
let FileOrigin$1 = {};
let OptionTypes = {};
let create$e = fn;
let destroy = fn;
let parse = fn;
let find = fn;
let registerPlugin = fn;
let getOptions$1 = fn;
let setOptions$1 = fn;
// if not supported, no API
if (supported()) {
// start painter and fire load event
createPainter(
() => {
state.apps.forEach(app => app._read());
},
ts => {
state.apps.forEach(app => app._write(ts));
}
);
// fire loaded event so we know when FilePond is available
const dispatch = () => {
// let others know we have area ready
document.dispatchEvent(
new CustomEvent('FilePond:loaded', {
detail: {
supported,
create: create$e,
destroy,
parse,
find,
registerPlugin,
setOptions: setOptions$1
}
})
);
// clean up event
document.removeEventListener('DOMContentLoaded', dispatch);
};
if (document.readyState !== 'loading') {
// move to back of execution queue, FilePond should have been exported by then
setTimeout(() => dispatch(), 0);
} else {
document.addEventListener('DOMContentLoaded', dispatch);
}
// updates the OptionTypes object based on the current options
const updateOptionTypes = () =>
forin(getOptions(), (key, value) => {
OptionTypes[key] = value[1];
});
Status$1 = { ...Status };
FileOrigin$1 = { ...FileOrigin };
FileStatus = { ...ItemStatus };
OptionTypes = {};
updateOptionTypes();
// create method, creates apps and adds them to the app array
create$e = (...args) => {
const app = createApp$1(...args);
app.on('destroy', destroy);
state.apps.push(app);
return createAppAPI(app);
};
// destroys apps and removes them from the app array
destroy = hook => {
// returns true if the app was destroyed successfully
const indexToRemove = state.apps.findIndex(app => app.isAttachedTo(hook));
if (indexToRemove >= 0) {
// remove from apps
const app = state.apps.splice(indexToRemove, 1)[0];
// restore original dom element
app.restoreElement();
return true;
}
return false;
};
// parses the given context for plugins (does not include the context element itself)
parse = context => {
// get all possible hooks
const matchedHooks = Array.from(context.querySelectorAll(`.${name}`));
// filter out already active hooks
const newHooks = matchedHooks.filter(
newHook => !state.apps.find(app => app.isAttachedTo(newHook))
);
// create new instance for each hook
return newHooks.map(hook => create$e(hook));
};
// returns an app based on the given element hook
find = hook => {
const app = state.apps.find(app => app.isAttachedTo(hook));
if (!app) {
return null;
}
return createAppAPI(app);
};
// adds a plugin extension
registerPlugin = (...plugins) => {
// register plugins
plugins.forEach(createAppPlugin);
// update OptionTypes, each plugin might have extended the default options
updateOptionTypes();
};
getOptions$1 = () => {
const opts = {};
forin(getOptions(), (key, value) => {
opts[key] = value[0];
});
return opts;
};
setOptions$1 = opts => {
if (isObject(opts)) {
// update existing plugins
state.apps.forEach(app => {
app.setOptions(opts);
});
// override defaults
setOptions(opts);
}
// return new options
return getOptions$1();
};
}
export {
FileOrigin$1 as FileOrigin,
FileStatus,
OptionTypes,
Status$1 as Status,
create$e as create,
destroy,
find,
getOptions$1 as getOptions,
parse,
registerPlugin,
setOptions$1 as setOptions,
supported
};