",
31 | "license": "MIT",
32 | "scripts": {
33 | "dev": "vite --host",
34 | "build": "npm run build:package && npm run build:styles",
35 | "build:package": "tsc && vite build && dts-bundle-generator --config ./dts-bundle-generator.config.ts",
36 | "build:styles": "node scripts/build-scss.js",
37 | "build:site": "node scripts/build-examples.js && site",
38 | "test": "jest --runInBand",
39 | "test:coverage": "jest --runInBand --coverage",
40 | "lint:scripts": "eslint . --ext .ts",
41 | "lint:styles": "stylelint ./**/*.{css,scss}",
42 | "format:scripts": "prettier . --write",
43 | "format:styles": "stylelint ./**/*.{css,scss} --fix",
44 | "format": "npm run format:scripts && npm run format:styles",
45 | "prepare": "husky install && husky set .husky/pre-commit 'npx lint-staged' && git add .husky/pre-commit",
46 | "uninstall-husky": "npm uninstall husky --no-save && git config --unset core.hooksPath && npx rimraf .husky"
47 | },
48 | "devDependencies": {
49 | "@semantic-release/git": "^10.0.1",
50 | "@semantic-release/npm": "^9.0.2",
51 | "@staart/site": "^3.0.0-beta.20",
52 | "@types/estree": "^1.0.0",
53 | "@types/jest": "^29.2.5",
54 | "@types/jsdom": "^21.1.0",
55 | "@types/node": "^18.11.18",
56 | "@typescript-eslint/eslint-plugin": "^5.48.2",
57 | "@typescript-eslint/parser": "^5.48.2",
58 | "auto-i18n": "^1.0.0",
59 | "coveralls": "^3.1.0",
60 | "cssnano": "^5.1.7",
61 | "dts-bundle-generator": "^7.1.0",
62 | "eslint": "^8.32.0",
63 | "eslint-config-prettier": "^8.6.0",
64 | "eslint-plugin-prettier": "^4.2.1",
65 | "extract-zip": "^2.0.1",
66 | "gitmoji-changelog": "^2.1.0",
67 | "husky": "^8.0.3",
68 | "jest": "^29.3.1",
69 | "jest-canvas-mock": "^2.4.0",
70 | "jest-environment-jsdom": "^29.4.3",
71 | "jest-fetch-mock": "^3.0.3",
72 | "lint-staged": "^13.1.0",
73 | "prettier": "^2.8.3",
74 | "sass": "^1.58.3",
75 | "semantic-release": "^20.1.1",
76 | "semantic-release-gitmoji": "^1.6.3",
77 | "stylelint": "^14.16.1",
78 | "stylelint-config-recommended": "^9.0.0",
79 | "stylelint-config-sass-guidelines": "^9.0.1",
80 | "ts-jest": "^29.0.5",
81 | "ts-node": "^10.9.1",
82 | "typescript": "^4.9.4",
83 | "vite": "^4.1.4",
84 | "xhr-mock": "^2.5.1"
85 | },
86 | "dependencies": {
87 | "cropperjs": "^1.5.7",
88 | "download": "^8.0.0",
89 | "focus-trap": "^7.3.1",
90 | "mitt": "^3.0.0"
91 | }
92 | }
93 |
--------------------------------------------------------------------------------
/scripts/build-demo.js:
--------------------------------------------------------------------------------
1 | const { join } = require("path");
2 | const { writeFileSync, readdirSync, readFileSync, mkdirSync } = require("fs");
3 |
4 | const siteFiles = readdirSync(join(__dirname, "..", "dist")).filter(
5 | file =>
6 | file.startsWith("demo.") && (file.endsWith(".css") || file.endsWith(".js"))
7 | );
8 |
9 | siteFiles.forEach(file => {
10 | const content = readFileSync(join(__dirname, "..", "dist", file)).toString();
11 | if (file.endsWith(".js")) {
12 | writeFileSync(join(__dirname, "..", "public", "uppload-demo.js"), content);
13 | } else {
14 | writeFileSync(join(__dirname, "..", "public", "uppload-demo.css"), content);
15 | }
16 | });
17 |
--------------------------------------------------------------------------------
/scripts/build-examples.js:
--------------------------------------------------------------------------------
1 | const download = require("download");
2 | const extract = require("extract-zip");
3 | const { exec } = require("child_process");
4 | const { join } = require("path");
5 | const {
6 | readdirSync,
7 | copyFileSync,
8 | mkdirSync,
9 | writeFileSync,
10 | readFileSync,
11 | } = require("fs");
12 |
13 | const examplesDir =
14 | "https://github.com/elninotech/uppload-examples/archive/master.zip";
15 |
16 | (async () => {
17 | console.log("Downloading examples...");
18 | await download(examplesDir, __dirname, { filename: "master.zip" });
19 |
20 | console.log("Extracting examples...");
21 | await extract(join(__dirname, "master.zip"), { dir: __dirname });
22 |
23 | const examples = readdirSync(
24 | join(__dirname, "uppload-examples-master", "examples")
25 | );
26 |
27 | mkdirSync(join(__dirname, "..", "content", "examples"), {
28 | recursive: true,
29 | });
30 |
31 | examples.forEach(example => {
32 | copyFileSync(
33 | join(
34 | __dirname,
35 | "uppload-examples-master",
36 | "examples",
37 | example,
38 | "README.md"
39 | ),
40 | join(__dirname, "..", "content", "examples", `${example}.md`)
41 | );
42 |
43 | writeFileSync(
44 | join(__dirname, "..", "content", "examples", `${example}.md`),
45 | readFileSync(
46 | join(__dirname, "..", "content", "examples", `${example}.md`)
47 | )
48 | .toString()
49 | .replace(
50 | "##",
51 | `You can [**view the source code on GitHub**](https://github.com/elninotech/uppload-examples/tree/master/examples/${example}) or [try it on CodeSandbox](https://codesandbox.io/s/github/elninotech/uppload-examples/tree/master/examples/${example}).\n\n##`
52 | )
53 | );
54 | });
55 | console.log("Added examples!");
56 | })();
57 |
--------------------------------------------------------------------------------
/scripts/build-lang.js:
--------------------------------------------------------------------------------
1 | const { translateObject } = require("auto-i18n");
2 | const { writeFileSync, readFileSync } = require("fs");
3 | const { join } = require("path");
4 |
5 | let lang;
6 | eval(
7 | "lang = " +
8 | readFileSync(join("src", "i18n", "nl.ts"))
9 | .toString()
10 | .replace("export default ", "")
11 | );
12 |
13 | translateObject(lang, "de")
14 | .then(translation => {
15 | const content = `export default ${JSON.stringify(translation, null, 2)};\n`;
16 | writeFileSync(join("src", "i18n", "de.ts"), content);
17 | })
18 | .catch(error => {
19 | console.log("Got an error", error);
20 | });
21 |
--------------------------------------------------------------------------------
/scripts/build-scss.js:
--------------------------------------------------------------------------------
1 | const sass = require("sass");
2 | const { join } = require("path");
3 | const { writeFileSync, readdirSync, mkdirSync } = require("fs");
4 |
5 | const result = sass.renderSync({
6 | file: join(__dirname, "..", "src", "styles", "uppload.scss"),
7 | });
8 | writeFileSync(join(__dirname, "..", "dist", "uppload.css"), result.css);
9 |
10 | const themes = readdirSync(join(__dirname, "..", "src", "themes")).filter(
11 | theme => theme !== "theme.scss"
12 | );
13 | mkdirSync(join(__dirname, "..", "dist", "themes"), {
14 | recursive: true,
15 | });
16 | themes.forEach(theme => {
17 | const result = sass.renderSync({
18 | file: join(__dirname, "..", "src", "themes", theme),
19 | });
20 | writeFileSync(
21 | join(__dirname, "..", "dist", "themes", theme.replace(".scss", ".css")),
22 | result.css
23 | );
24 | });
25 |
--------------------------------------------------------------------------------
/src/effect.ts:
--------------------------------------------------------------------------------
1 | import { IHandlersParams, ITemplateParams } from "./helpers/interfaces";
2 |
3 | export class UpploadEffect {
4 | type = "effect";
5 | name: string = "";
6 | invisible = false;
7 | noRecolor = false;
8 | color = "#000";
9 | icon: string = "";
10 | template: (props: ITemplateParams) => string = () => "";
11 | handlers: (params: IHandlersParams) => void = () => {};
12 | supports: () => boolean = () => true;
13 | }
14 |
--------------------------------------------------------------------------------
/src/effects/filter/blur.ts:
--------------------------------------------------------------------------------
1 | import UpploadFilterBaseClass from "../../helpers/filter";
2 |
3 | export default class Blur extends UpploadFilterBaseClass {
4 | name = "blur";
5 | icon = ``;
6 | cssFilter = "blur";
7 | unit = "px";
8 | }
9 |
--------------------------------------------------------------------------------
/src/effects/filter/brightness.ts:
--------------------------------------------------------------------------------
1 | import UpploadFilterBaseClass from "../../helpers/filter";
2 |
3 | export default class Brightness extends UpploadFilterBaseClass {
4 | name = "brightness";
5 | icon = ``;
6 | cssFilter = "brightness";
7 | unit = "%";
8 | value = 100;
9 | max = 200;
10 | }
11 |
--------------------------------------------------------------------------------
/src/effects/filter/contrast.ts:
--------------------------------------------------------------------------------
1 | import UpploadFilterBaseClass from "../../helpers/filter";
2 |
3 | export default class Contrast extends UpploadFilterBaseClass {
4 | name = "contrast";
5 | icon = ``;
6 | cssFilter = "contrast";
7 | unit = "%";
8 | value = 100;
9 | max = 200;
10 | }
11 |
--------------------------------------------------------------------------------
/src/effects/filter/grayscale.ts:
--------------------------------------------------------------------------------
1 | import UpploadFilterBaseClass from "../../helpers/filter";
2 |
3 | export default class Grayscale extends UpploadFilterBaseClass {
4 | name = "grayscale";
5 | icon = ``;
6 | cssFilter = "grayscale";
7 | unit = "%";
8 | value = 0;
9 | max = 100;
10 | }
11 |
--------------------------------------------------------------------------------
/src/effects/filter/hue-rotate.ts:
--------------------------------------------------------------------------------
1 | import UpploadFilterBaseClass from "../../helpers/filter";
2 |
3 | export default class HueRotate extends UpploadFilterBaseClass {
4 | name = "hue-rotate";
5 | icon = ``;
6 | cssFilter = "hue-rotate";
7 | unit = "deg";
8 | value = 0;
9 | max = 360;
10 | }
11 |
--------------------------------------------------------------------------------
/src/effects/filter/invert.ts:
--------------------------------------------------------------------------------
1 | import UpploadFilterBaseClass from "../../helpers/filter";
2 |
3 | export default class Invert extends UpploadFilterBaseClass {
4 | name = "invert";
5 | icon = ``;
6 | cssFilter = "invert";
7 | unit = "%";
8 | value = 0;
9 | max = 100;
10 | }
11 |
--------------------------------------------------------------------------------
/src/effects/filter/saturate.ts:
--------------------------------------------------------------------------------
1 | import UpploadFilterBaseClass from "../../helpers/filter";
2 |
3 | export default class Saturate extends UpploadFilterBaseClass {
4 | name = "saturate";
5 | icon = ``;
6 | cssFilter = "saturate";
7 | unit = "%";
8 | value = 100;
9 | max = 200;
10 | }
11 |
--------------------------------------------------------------------------------
/src/effects/filter/sepia.ts:
--------------------------------------------------------------------------------
1 | import UpploadFilterBaseClass from "../../helpers/filter";
2 |
3 | export default class Sepia extends UpploadFilterBaseClass {
4 | name = "sepia";
5 | icon = ``;
6 | cssFilter = "sepia";
7 | unit = "%";
8 | value = 0;
9 | max = 100;
10 | }
11 |
--------------------------------------------------------------------------------
/src/effects/preview/index.ts:
--------------------------------------------------------------------------------
1 | import { UpploadEffect } from "../../effect";
2 | import { fitImageToContainer } from "../../helpers/elements";
3 | import { IHandlersParams, ITemplateParams } from "../../helpers/interfaces";
4 |
5 | export default class Preview extends UpploadEffect {
6 | name = "preview";
7 | icon = ``;
8 |
9 | template = ({ file }: ITemplateParams) => {
10 | const image = URL.createObjectURL(file.blob);
11 | return `
12 |
13 |
14 |
27 |
28 |
30 |
31 | 0${
32 | translate(`units.${this.unit}`) || this.unit
33 | }
34 |
35 | `;
36 | };
37 |
38 | handlers = (params: IHandlersParams) => {
39 | const rotatorElement = params.uppload.container.querySelector(
40 | ".uppload-rotating-element img"
41 | ) as HTMLImageElement | null;
42 | const originalFile = this.originalFile;
43 | if (rotatorElement) {
44 | fitImageToContainer(params, rotatorElement).then(() => {
45 | const rotator = new Cropper(rotatorElement, {
46 | autoCropArea: 1,
47 | viewMode: 1,
48 | dragMode: "none",
49 | cropBoxMovable: false,
50 | cropBoxResizable: false,
51 | toggleDragModeOnDblclick: false,
52 | ready() {
53 | params.uppload.emitter.emit("processing");
54 | canvasToBlob(rotator.getCroppedCanvas()).then(blob => {
55 | originalFile.blob = blob;
56 | params.uppload.emitter.emit("process");
57 | params.next(originalFile);
58 | });
59 | },
60 | });
61 | const range = params.uppload.container.querySelector(
62 | ".settings input[type='range']"
63 | ) as HTMLInputElement;
64 | if (range)
65 | safeListen(range, "change", () => {
66 | let value = 0;
67 | const range = params.uppload.container.querySelector(
68 | ".settings input[type='range']"
69 | ) as HTMLInputElement;
70 | if (range) value = parseInt(range.value);
71 | const displayer = params.uppload.container.querySelector(
72 | ".settings .value span"
73 | );
74 | if (displayer) displayer.innerHTML = value.toString();
75 | rotator.rotate(value - this.value);
76 | this.value = value;
77 | params.uppload.emitter.emit("processing");
78 | canvasToBlob(rotator.getCroppedCanvas()).then(blob => {
79 | originalFile.blob = blob;
80 | params.uppload.emitter.emit("process");
81 | params.next(originalFile);
82 | });
83 | });
84 | });
85 | }
86 | };
87 | }
88 |
--------------------------------------------------------------------------------
/src/helpers/assets.ts:
--------------------------------------------------------------------------------
1 | import { UpploadService } from "../service";
2 | import { UpploadEffect } from "../effect";
3 |
4 | /**
5 | * Colors an SVG icon with the brand color for a service or effect
6 | * @param svg - SVG template string
7 | * @param service - Uppload service object
8 | */
9 | export const colorSVG = (
10 | svg: string,
11 | service: UpploadService | UpploadEffect
12 | ) => (service.noRecolor ? svg : svg.replace(/#000/g, service.color || "#000"));
13 |
--------------------------------------------------------------------------------
/src/helpers/files.ts:
--------------------------------------------------------------------------------
1 | import { IUpploadFile } from "./interfaces";
2 |
3 | /**
4 | * Convert a blob to a native File
5 | * @param blob - Blob to convert to file
6 | * @param fileName - Name of the file
7 | * @param lastModified - Date modified
8 | */
9 | const safeBlobToFile = (blob: Blob, fileName?: string, lastModified?: Date) => {
10 | try {
11 | return new File([blob], fileName || "file_name", {
12 | lastModified: (lastModified || new Date()).getTime(),
13 | type: blob.type,
14 | });
15 | } catch (error) {
16 | return blob;
17 | }
18 | };
19 |
20 | export const blobToUpploadFile = (
21 | blob: Blob,
22 | name?: string,
23 | type?: string,
24 | lastModified?: Date
25 | ) => {
26 | const result: IUpploadFile = {
27 | name,
28 | blob,
29 | lastModified,
30 | type,
31 | };
32 | return result;
33 | };
34 |
35 | export const safeUpploadFileToFile = (file: IUpploadFile) => {
36 | const blob = file.blob;
37 | file.lastModified = file.lastModified || new Date();
38 | return safeBlobToFile(blob, file.name, file.lastModified);
39 | };
40 |
--------------------------------------------------------------------------------
/src/helpers/filter.ts:
--------------------------------------------------------------------------------
1 | import { UpploadEffect } from "../effect";
2 | import {
3 | safeListen,
4 | fitImageToContainer,
5 | canvasToBlob,
6 | } from "../helpers/elements";
7 | import { IHandlersParams, ITemplateParams, IUpploadFile } from "./interfaces";
8 |
9 | export default class UpploadFilterBaseClass extends UpploadEffect {
10 | canvas: HTMLCanvasElement = document.createElement("canvas");
11 | originalfileURL = "";
12 | originalFile: IUpploadFile = { blob: new Blob() };
13 | cssFilter = "";
14 | max = 10;
15 | unit = "px";
16 | value = 0;
17 | supports = () =>
18 | !!(
19 | this.canvas.getContext &&
20 | this.canvas.getContext("2d") &&
21 | typeof this.canvas.getContext("2d")?.filter === "string"
22 | );
23 |
24 | template = ({ file, translate }: ITemplateParams) => {
25 | const image = URL.createObjectURL(file.blob);
26 | this.originalfileURL = image;
27 | this.originalFile = file;
28 | return `
29 |
30 |
31 |
33 |
34 | 0${
35 | translate(`units.${this.unit}`) || this.unit
36 | }
37 |
38 | `;
39 | };
40 |
41 | imageToCanvasBlob(
42 | params: IHandlersParams,
43 | filters: string
44 | ): Promise {
45 | params.uppload.emitter.emit("processing");
46 | return new Promise(resolve => {
47 | this.canvas = document.createElement("canvas");
48 | const image = document.createElement("img");
49 | image.src = this.originalfileURL;
50 | image.onload = () => {
51 | this.canvas.width = image.width;
52 | this.canvas.height = image.height;
53 | const context = this.canvas.getContext("2d");
54 | if (!context) return;
55 | context.clearRect(0, 0, this.canvas.width, this.canvas.height);
56 | context.filter = filters;
57 | context.drawImage(image, 0, 0);
58 | canvasToBlob(this.canvas).then(blob => {
59 | params.uppload.emitter.emit("process");
60 | return resolve(blob);
61 | });
62 | };
63 | });
64 | }
65 |
66 | handlers = (params: IHandlersParams) => {
67 | const hueElement = params.uppload.container.querySelector(
68 | ".uppload-hue-image img"
69 | ) as HTMLImageElement | null;
70 | if (hueElement) {
71 | fitImageToContainer(params, hueElement).then(() => {
72 | const range = params.uppload.container.querySelector(
73 | ".settings input[type='range']"
74 | ) as HTMLInputElement;
75 | if (range) safeListen(range, "change", this.update.bind(this, params));
76 | });
77 | }
78 | };
79 |
80 | update(params: IHandlersParams) {
81 | let value = 0;
82 | const range = params.uppload.container.querySelector(
83 | ".settings input[type='range']"
84 | ) as HTMLInputElement;
85 | if (range) value = parseInt(range.value);
86 | const displayer = params.uppload.container.querySelector(
87 | ".settings .value span"
88 | );
89 | if (displayer) displayer.innerHTML = value.toString();
90 | const hueElement = params.uppload.container.querySelector(
91 | ".uppload-hue-image img"
92 | ) as HTMLImageElement | null;
93 | if (!hueElement) return;
94 | this.imageToCanvasBlob(
95 | params,
96 | `${this.cssFilter}(${range.value}${this.unit})`
97 | ).then(blob => {
98 | if (!blob) return;
99 | this.originalFile.blob = blob;
100 | params.next(this.originalFile);
101 | const image = URL.createObjectURL(blob);
102 | hueElement.setAttribute("src", image);
103 | });
104 | }
105 | }
106 |
--------------------------------------------------------------------------------
/src/helpers/http.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Make an HTTP request with the Fetch API and cache results
3 | * @param input API endpoint
4 | * @param settings HTTP Fetch configuration
5 | */
6 | export function cachedFetch(
7 | input: RequestInfo,
8 | settings?: RequestInit
9 | ): Promise {
10 | const storage = sessionStorage;
11 | return new Promise((resolve, reject) => {
12 | const key = `uppload_cache_${JSON.stringify(input)}`;
13 | const maxTTL = new Date();
14 | maxTTL.setDate(maxTTL.getDate() + 1);
15 | const cachedResult = storage.getItem(key);
16 | if (cachedResult) {
17 | const cachedResultData = JSON.parse(cachedResult);
18 | if (
19 | cachedResultData.ttl &&
20 | new Date(cachedResultData.ttl).getTime() > new Date().getTime()
21 | )
22 | return resolve(cachedResultData.result);
23 | }
24 | window
25 | .fetch(input, settings)
26 | .then(response => {
27 | if (!response.ok) throw new Error("errors.response_not_ok");
28 | return response.json();
29 | })
30 | .then(result => {
31 | storage.setItem(
32 | key,
33 | JSON.stringify({
34 | ttl: maxTTL,
35 | updatedAt: new Date(),
36 | result,
37 | })
38 | );
39 | resolve(result);
40 | })
41 | .catch(error => reject(error));
42 | });
43 | }
44 |
45 | /**
46 | * Get a file Blob from an image URL
47 | * @param url - URL of an image
48 | */
49 | export const imageUrlToBlob = (url: string): Promise => {
50 | return new Promise((resolve, reject) => {
51 | window
52 | .fetch(`https://wsrv.nl/?url=${encodeURIComponent(url)}`)
53 | .then(response => {
54 | if (!response.ok) throw new Error("errors.response_not_ok");
55 | return response.blob();
56 | })
57 | .then(blob => resolve(blob))
58 | .catch(error => reject(error));
59 | });
60 | };
61 |
--------------------------------------------------------------------------------
/src/helpers/i18n.ts:
--------------------------------------------------------------------------------
1 | let i18n: any = {};
2 |
3 | export const flattenObject = (ob: any) => {
4 | const toReturn: any = {};
5 | for (const i in ob) {
6 | if (!ob.hasOwnProperty(i)) continue;
7 | if (typeof ob[i] == "object") {
8 | const flatObject = flattenObject(ob[i]);
9 | for (const x in flatObject) {
10 | if (!flatObject.hasOwnProperty(x)) continue;
11 | toReturn[i + "." + x] = flatObject[x];
12 | }
13 | } else {
14 | toReturn[i] = ob[i];
15 | }
16 | }
17 | return toReturn;
18 | };
19 |
20 | /**
21 | *
22 | * @param translations
23 | */
24 | export const setI18N = (translations: any) => {
25 | i18n = flattenObject(translations);
26 | };
27 |
28 | /**
29 | * Get a translation from i18n setting
30 | * @param key - Translation key
31 | * @param params - Single term or array of variables
32 | */
33 | export const translate = (key: string, params?: string | string[]) => {
34 | try {
35 | let term = i18n[key] as string;
36 | if (typeof params === "string") params = [params];
37 | if (params)
38 | params.forEach((param, index) => {
39 | term = term.replace(`$${index + 1}$`, param);
40 | });
41 | if (i18n.helper && typeof i18n.helper === "function")
42 | term = i18n.helper(term);
43 | return term;
44 | } catch (error) {
45 | return "";
46 | }
47 | };
48 |
--------------------------------------------------------------------------------
/src/helpers/interfaces.ts:
--------------------------------------------------------------------------------
1 | import { Uppload, UpploadEffect, UpploadService } from "../";
2 |
3 | export type IElements = string | string[] | Element | Element[];
4 |
5 | export type ITranslator = (key: string, params?: string | string[]) => string;
6 | export interface IUppload {
7 | services: UpploadService[];
8 | effects: UpploadEffect[];
9 | isOpen: boolean;
10 | error?: string;
11 | activeService: string;
12 | activeEffect: string;
13 | settings: IUpploadSettings;
14 | container: HTMLDivElement;
15 | }
16 |
17 | export interface IUpploadSettings {
18 | value?: string;
19 | bind?: IElements;
20 | call?: IElements;
21 | defaultService?: string;
22 | lang?: ILanguage;
23 | uploader?: IUploader;
24 | inline?: boolean;
25 | customClass?: string;
26 | multiple?: boolean;
27 | compression?: number;
28 | compressionToMime?: string;
29 | compressionFromMimes?: string[];
30 | maxWidth?: number;
31 | maxHeight?: number;
32 | maxSize?: [number, number];
33 | compressor?: (file: Blob) => Promise;
34 | transitionDuration?: number;
35 | disableModalClickClose?: boolean;
36 | }
37 |
38 | export interface IHandlersParams {
39 | upload: (file: Blob) => Promise;
40 | uploadMultiple: (file: Blob[]) => Promise;
41 | next: (file: IUpploadFile) => void;
42 | showHelp: (url: string) => void;
43 | handle: (error: any) => void;
44 | uppload: Uppload;
45 | translate: ITranslator;
46 | }
47 |
48 | export interface ITemplateParams {
49 | file: IUpploadFile;
50 | translate: ITranslator;
51 | }
52 | export interface IServiceTemplateParams {
53 | uppload: Uppload;
54 | translate: ITranslator;
55 | }
56 |
57 | export type IUploader = (
58 | file: Blob,
59 | updateProgress?: (progress: number) => void
60 | ) => Promise;
61 |
62 | export type IMultipleUploader = (
63 | file: Blob[],
64 | updateProgress?: (progress: number) => void
65 | ) => Promise;
66 |
67 | export type ILanguageHelper = (text: string) => string;
68 |
69 | export interface ILanguage {
70 | [index: string]: string | ILanguage | ILanguageHelper | any;
71 | }
72 |
73 | export interface IUpploadFile {
74 | blob: Blob;
75 | name?: string;
76 | type?: string;
77 | size?: number;
78 | lastModified?: Date;
79 | }
80 |
81 | export type IUpploadPlugins =
82 | | UpploadService[]
83 | | UpploadEffect[]
84 | | (UpploadService | UpploadEffect)[];
85 |
86 | export type IPluginUpdateFunction = (
87 | plugins: IUpploadPlugins
88 | ) => IUpploadPlugins;
89 |
--------------------------------------------------------------------------------
/src/helpers/utils.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Minified a string of HTML
3 | * @param html - HTML string to minify
4 | * @returns Minified string
5 | */
6 | export const minifyHTML = (html: string) =>
7 | html.replace(/\n/g, "").replace(/ /g, "");
8 |
9 | /**
10 | * Returns a formatted version of the bytes
11 | * @param bytes - The bytes to format
12 | * @param decimals - The number of decimals to show
13 | * @returns The formatted string
14 | */
15 | export const formatBytes = (bytes: number, decimals: number = 2) => {
16 | if (bytes === 0) {
17 | return "0 Bytes";
18 | }
19 | const base: number = 1024;
20 | const dm: number = decimals < 0 ? 0 : decimals;
21 | const sizes: string[] = [
22 | "Bytes",
23 | "KB",
24 | "MB",
25 | "GB",
26 | "TB",
27 | "PB",
28 | "EB",
29 | "ZB",
30 | "YB",
31 | ];
32 | const index: number = Math.floor(Math.log(bytes) / Math.log(base));
33 | const size: string = sizes[index];
34 | return parseFloat((bytes / Math.pow(base, index)).toFixed(dm)) + " " + size;
35 | };
36 |
--------------------------------------------------------------------------------
/src/i18n/index.ts:
--------------------------------------------------------------------------------
1 | export { de } from "./de";
2 | export { en } from "./en";
3 | export { es } from "./es";
4 | export { fa } from "./fa";
5 | export { fr } from "./fr";
6 | export { hi } from "./hi";
7 | export { it } from "./it";
8 | export { nl } from "./nl";
9 | export { pt } from "./pt";
10 | export { ro } from "./ro";
11 | export { ru } from "./ru";
12 | export { tr } from "./tr";
13 | export { uk } from "./uk";
14 | export { zhTW } from "./zh-TW";
15 |
--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | // Main class
2 | export { Uppload } from "./uppload";
3 |
4 | // Base classes
5 | export { UpploadService } from "./service";
6 | export { UpploadEffect } from "./effect";
7 |
8 | // Helpers
9 | export * from "./helpers/elements";
10 | export * from "./helpers/interfaces";
11 | export * from "./helpers/http";
12 | export * from "./helpers/i18n";
13 | export * from "./helpers/microlink";
14 | export * from "./helpers/search";
15 |
16 | // Language packs
17 | export * from "./i18n";
18 |
19 | // Uploaders
20 | export * from "./uploaders/xhr";
21 |
22 | // Services
23 | import Camera from "./services/camera";
24 | import Instagram from "./services/microlink/instagram";
25 | import Facebook from "./services/microlink/facebook";
26 | import Local from "./services/local";
27 | import GIPHY from "./services/search/giphy";
28 | import Pixabay from "./services/search/pixabay";
29 | import Unsplash from "./services/search/unsplash";
30 | import Pexels from "./services/search/pexels";
31 | import URL from "./services/microlink/url";
32 | import Screenshot from "./services/microlink/screenshot";
33 | import Flickr from "./services/microlink/flickr";
34 | import Pinterest from "./services/microlink/pinterest";
35 | import DeviantArt from "./services/microlink/deviantart";
36 | import NineGag from "./services/microlink/9gag";
37 | import ArtStation from "./services/microlink/artstation";
38 | import Twitter from "./services/microlink/twitter";
39 | import Flipboard from "./services/microlink/flipboard";
40 | import Fotki from "./services/microlink/fotki";
41 | import LinkedIn from "./services/microlink/linkedin";
42 | import Reddit from "./services/microlink/reddit";
43 | import Tumblr from "./services/microlink/tumblr";
44 | import WeHeartIt from "./services/microlink/weheartit";
45 | export {
46 | Camera,
47 | Instagram,
48 | Facebook,
49 | Pixabay,
50 | Local,
51 | URL,
52 | Screenshot,
53 | GIPHY,
54 | Unsplash,
55 | Pexels,
56 | Pinterest,
57 | Flickr,
58 | NineGag,
59 | DeviantArt,
60 | ArtStation,
61 | Twitter,
62 | Flipboard,
63 | Fotki,
64 | LinkedIn,
65 | Reddit,
66 | Tumblr,
67 | WeHeartIt,
68 | };
69 |
70 | // Effects
71 | import Crop from "./effects/crop";
72 | import Rotate from "./effects/rotate";
73 | import Flip from "./effects/flip";
74 | import Preview from "./effects/preview";
75 | import Brightness from "./effects/filter/brightness";
76 | import Blur from "./effects/filter/blur";
77 | import Contrast from "./effects/filter/contrast";
78 | import Grayscale from "./effects/filter/grayscale";
79 | import HueRotate from "./effects/filter/hue-rotate";
80 | import Invert from "./effects/filter/invert";
81 | import Sepia from "./effects/filter/sepia";
82 | import Saturate from "./effects/filter/saturate";
83 | export {
84 | Brightness,
85 | Crop,
86 | Rotate,
87 | Flip,
88 | Preview,
89 | Blur,
90 | Contrast,
91 | Grayscale,
92 | HueRotate,
93 | Invert,
94 | Sepia,
95 | Saturate,
96 | };
97 |
--------------------------------------------------------------------------------
/src/service.ts:
--------------------------------------------------------------------------------
1 | import { IHandlersParams, IServiceTemplateParams } from "./helpers/interfaces";
2 |
3 | export class UpploadService {
4 | type = "service";
5 | name: string = "";
6 | invisible = false;
7 | noRecolor = false;
8 | icon: string = "";
9 | color = "#333";
10 | template: (params: IServiceTemplateParams) => string = () => "";
11 | handlers: (params: IHandlersParams) => void = () => {};
12 | stop: () => void = () => {};
13 | supports: () => boolean = () => true;
14 | }
15 |
--------------------------------------------------------------------------------
/src/services/microlink/9gag.ts:
--------------------------------------------------------------------------------
1 | import { MicrolinkBaseClass } from "../../helpers/microlink";
2 |
3 | export default class NineGag extends MicrolinkBaseClass {
4 | name = "ninegag";
5 | icon = ``;
6 | color = "#000";
7 | exampleURL = "https://9gag.com/gag/awoBXb8";
8 | validator = (input: string) =>
9 | /(https?:\/\/(.+?\.)?9gag\.com(\/[A-Za-z0-9\-\._~:\/\?#\[\]@!$&'\(\)\*\+,;\=]*)?)/.test(
10 | input
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/src/services/microlink/artstation.ts:
--------------------------------------------------------------------------------
1 | import { MicrolinkBaseClass } from "../../helpers/microlink";
2 |
3 | export default class ArtStation extends MicrolinkBaseClass {
4 | name = "artstation";
5 | icon = ``;
6 | color = "#3ea2cf";
7 | exampleURL = "https://www.artstation.com/artwork/VdGOkZ";
8 | validator = (input: string) =>
9 | /(https?:\/\/(.+?\.)?artstation\.com(\/[A-Za-z0-9\-\._~:\/\?#\[\]@!$&'\(\)\*\+,;\=]*)?)/.test(
10 | input
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/src/services/microlink/deviantart.ts:
--------------------------------------------------------------------------------
1 | import { MicrolinkBaseClass } from "../../helpers/microlink";
2 |
3 | export default class DeviantArt extends MicrolinkBaseClass {
4 | name = "deviantart";
5 | icon = ``;
6 | color = "#00d159";
7 | exampleURL =
8 | "https://www.deviantart.com/artbycatherineradley/art/Despair-820869682";
9 | validator = (input: string) =>
10 | /(https?:\/\/(.+?\.)?(deviantart|fav)\.(com|me)(\/[A-Za-z0-9\-\._~:\/\?#\[\]@!$&'\(\)\*\+,;\=]*)?)/.test(
11 | input
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/src/services/microlink/facebook.ts:
--------------------------------------------------------------------------------
1 | import { MicrolinkBaseClass } from "../../helpers/microlink";
2 |
3 | export default class Facebook extends MicrolinkBaseClass {
4 | name = "facebook";
5 | icon = ``;
6 | color = "#1b69f6";
7 | exampleURL =
8 | "https://www.facebook.com/elninotech/photos/a.2066268863489861/2066268886823192/?type=3&theater";
9 | validator = (input: string) =>
10 | /(https?:\/\/(.+?\.)?(facebook|fb)\.(com|me)(\/[A-Za-z0-9\-\._~:\/\?#\[\]@!$&'\(\)\*\+,;\=]*)?)/.test(
11 | input
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/src/services/microlink/flickr.ts:
--------------------------------------------------------------------------------
1 | import { MicrolinkBaseClass } from "../../helpers/microlink";
2 |
3 | export default class Flickr extends MicrolinkBaseClass {
4 | name = "flickr";
5 | icon = ``;
6 | noRecolor = true;
7 | color = "#ff0084";
8 | exampleURL = "https://www.flickr.com/photos/renewolf/26111951000/";
9 | validator = (input: string) =>
10 | /(https?:\/\/(.+?\.)?(flickr|flic)\.(com|kr)(\/[A-Za-z0-9\-\._~:\/\?#\[\]@!$&'\(\)\*\+,;\=]*)?)/.test(
11 | input
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/src/services/microlink/flipboard.ts:
--------------------------------------------------------------------------------
1 | import { MicrolinkBaseClass } from "../../helpers/microlink";
2 |
3 | export default class Flipboard extends MicrolinkBaseClass {
4 | name = "flipboard";
5 | icon = ``;
6 | color = "#e12828";
7 | exampleURL =
8 | "https://flipboard.com/@bbcfuture/how-climate-change-could-kill-the-red-apple/f-c8d499b4ca%2Fbbc.com";
9 | validator = (input: string) =>
10 | /(https?:\/\/(.+?\.)?(flipboard|flip)\.(com|it)(\/[A-Za-z0-9\-\._~:\/\?#\[\]@!$&'\(\)\*\+,;\=]*)?)/.test(
11 | input
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/src/services/microlink/fotki.ts:
--------------------------------------------------------------------------------
1 | import { MicrolinkBaseClass } from "../../helpers/microlink";
2 |
3 | export default class Fotki extends MicrolinkBaseClass {
4 | name = "fotki";
5 | icon = ``;
6 | color = "#5471B9";
7 | exampleURL =
8 | "https://public.fotki.com/EricAnke/holland/molens/20170928-162510.html";
9 | validator = (input: string) =>
10 | /(https?:\/\/(.+?\.)?fotki\.com(\/[A-Za-z0-9\-\._~:\/\?#\[\]@!$&'\(\)\*\+,;\=]*)?)/.test(
11 | input
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/src/services/microlink/instagram.ts:
--------------------------------------------------------------------------------
1 | import { MicrolinkBaseClass } from "../../helpers/microlink";
2 |
3 | export default class Instagram extends MicrolinkBaseClass {
4 | name = "instagram";
5 | icon = ``;
6 | color = "#cc3366";
7 | exampleURL = "https://www.instagram.com/p/Bu_T4RihQFB/";
8 | validator = (input: string) =>
9 | /(https?:\/\/(.+?\.)?(instagram|instagr)\.(com|am)(\/[A-Za-z0-9\-\._~:\/\?#\[\]@!$&'\(\)\*\+,;\=]*)?)/.test(
10 | input
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/src/services/microlink/linkedin.ts:
--------------------------------------------------------------------------------
1 | import { MicrolinkBaseClass } from "../../helpers/microlink";
2 |
3 | export default class LinkedIn extends MicrolinkBaseClass {
4 | name = "linkedin";
5 | icon = ``;
6 | color = "#0e76a8";
7 | exampleURL =
8 | "https://www.linkedin.com/posts/explorius-vastgoedontwikkeling-b-v-_el-nino-huurt-kantoor-in-enschede-activity-6480386878641180672-7DC_";
9 | validator = (input: string) =>
10 | /(https?:\/\/(.+?\.)?linkedin\.com(\/[A-Za-z0-9\-\._~:\/\?#\[\]@!$&'\(\)\*\+,;\=]*)?)/.test(
11 | input
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/src/services/microlink/pinterest.ts:
--------------------------------------------------------------------------------
1 | import { MicrolinkBaseClass } from "../../helpers/microlink";
2 |
3 | export default class Pinterest extends MicrolinkBaseClass {
4 | name = "pinterest";
5 | icon = ``;
6 | color = "#e60023";
7 | exampleURL = "https://pinterest.com/pin/437201076327078006/";
8 | validator = (input: string) =>
9 | /(https?:\/\/(.+?\.)?(pinterest|pin)\.(com|it)(\/[A-Za-z0-9\-\._~:\/\?#\[\]@!$&'\(\)\*\+,;\=]*)?)/.test(
10 | input
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/src/services/microlink/reddit.ts:
--------------------------------------------------------------------------------
1 | import { MicrolinkBaseClass } from "../../helpers/microlink";
2 |
3 | export default class Reddit extends MicrolinkBaseClass {
4 | name = "reddit";
5 | icon = ``;
6 | color = "#ff4301";
7 | exampleURL =
8 | "https://www.reddit.com/r/thenetherlands/comments/dz1myk/a_beautiful_morning_in_ermelo/";
9 | validator = (input: string) =>
10 | /(https?:\/\/(.+?\.)?reddit\.com(\/[A-Za-z0-9\-\._~:\/\?#\[\]@!$&'\(\)\*\+,;\=]*)?)/.test(
11 | input
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/src/services/microlink/screenshot.ts:
--------------------------------------------------------------------------------
1 | import { MicrolinkBaseClass } from "../../helpers/microlink";
2 |
3 | export default class Screenshot extends MicrolinkBaseClass {
4 | name = "screenshot";
5 | icon = ``;
6 | color = "#e67e22";
7 | }
8 |
--------------------------------------------------------------------------------
/src/services/microlink/tumblr.ts:
--------------------------------------------------------------------------------
1 | import { MicrolinkBaseClass } from "../../helpers/microlink";
2 |
3 | export default class Tumblr extends MicrolinkBaseClass {
4 | name = "tumblr";
5 | icon = ``;
6 | color = "#34526f";
7 | exampleURL =
8 | "https://germanpostwarmodern.tumblr.com/post/186653088149/cubicus-building-of-twente-university-1969-73-in";
9 | validator = (input: string) =>
10 | /(https?:\/\/(.+?\.)?tumblr\.com(\/[A-Za-z0-9\-\._~:\/\?#\[\]@!$&'\(\)\*\+,;\=]*)?)/.test(
11 | input
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/src/services/microlink/twitter.ts:
--------------------------------------------------------------------------------
1 | import { MicrolinkBaseClass } from "../../helpers/microlink";
2 |
3 | export default class Twitter extends MicrolinkBaseClass {
4 | name = "twitter";
5 | icon = ``;
6 | color = "#1da1f2";
7 | exampleURL = "https://twitter.com/elninoict/status/1106176415622418433";
8 | validator = (input: string) =>
9 | /(https?:\/\/(.+?\.)?(twitter|t)\.(co|com)(\/[A-Za-z0-9\-\._~:\/\?#\[\]@!$&'\(\)\*\+,;\=]*)?)/.test(
10 | input
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/src/services/microlink/url.ts:
--------------------------------------------------------------------------------
1 | import { MicrolinkBaseClass } from "../../helpers/microlink";
2 |
3 | export default class URL extends MicrolinkBaseClass {
4 | name = "url";
5 | icon = ``;
6 | color = "#8e44ad";
7 | }
8 |
--------------------------------------------------------------------------------
/src/services/microlink/weheartit.ts:
--------------------------------------------------------------------------------
1 | import { MicrolinkBaseClass } from "../../helpers/microlink";
2 |
3 | export default class WeHeartIt extends MicrolinkBaseClass {
4 | name = "weheartit";
5 | icon = ``;
6 | color = "#ff5464";
7 | exampleURL = "https://weheartit.com/entry/221671573";
8 | validator = (input: string) =>
9 | /(https?:\/\/(.+?\.)?weheartit\.com(\/[A-Za-z0-9\-\._~:\/\?#\[\]@!$&'\(\)\*\+,;\=]*)?)/.test(
10 | input
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/src/services/search/giphy.ts:
--------------------------------------------------------------------------------
1 | import { SearchBaseClass } from "../../helpers/search";
2 |
3 | export interface GIPHYResult {
4 | id: string;
5 | title: string;
6 | url: string;
7 | images: {
8 | downsized_large: { url: string };
9 | preview_gif: { url: string };
10 | };
11 | user?: {
12 | avatar_url: string;
13 | display_name: string;
14 | profile_url: string;
15 | };
16 | }
17 |
18 | export default class GIPHY extends SearchBaseClass {
19 | constructor(apiKey: string) {
20 | super({
21 | apiKey,
22 | name: "giphy",
23 | icon: ``,
24 | color: "#a800ff",
25 | noRecolor: true,
26 | poweredByUrl: "https://giphy.com",
27 | popularEndpoint: (apiKey: string) =>
28 | `https://api.giphy.com/v1/gifs/trending?api_key=${apiKey}&limit=18&rating=G`,
29 | searchEndpoint: (apiKey: string, query: string) =>
30 | `https://api.giphy.com/v1/gifs/search?api_key=${apiKey}&q=${encodeURIComponent(
31 | query
32 | )}&limit=18&offset=0&rating=G&lang=en`,
33 | getButton: (image: GIPHYResult) => `
34 |
`,
35 | getSearchResults: (response: { data: GIPHYResult[] }) => response.data,
36 | getPopularResults: (response: { data: GIPHYResult[] }) => response.data,
37 | });
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/src/services/search/pexels.ts:
--------------------------------------------------------------------------------
1 | import { SearchBaseClass } from "../../helpers/search";
2 |
3 | export interface PexelsResult {
4 | url: string;
5 | photographer: string;
6 | src: {
7 | original: string;
8 | large2x: string;
9 | tiny: string;
10 | };
11 | }
12 |
13 | export default class Pexels extends SearchBaseClass {
14 | constructor(apiKey: string) {
15 | super({
16 | apiKey,
17 | name: "pexels",
18 | icon: ``,
19 | color: "#05a081",
20 | poweredByUrl: "https://pexels.com",
21 | popularEndpoint: (_apiKey: string) =>
22 | `https://api.pexels.com/v1/curated?per_page=9&page=1`,
23 | searchEndpoint: (_apiKey: string, query: string) =>
24 | `https://api.pexels.com/v1/search?query=${encodeURIComponent(
25 | query
26 | )}&per_page=12&page=1`,
27 | getButton: (image: PexelsResult) => `
28 |
33 | ${image.photographer}
34 |
`,
35 | getSearchResults: (response: { photos: PexelsResult[] }) =>
36 | response.photos,
37 | getPopularResults: (response: { photos: PexelsResult[] }) =>
38 | response.photos,
39 | fetchSettings: (apiKey: string) => ({
40 | headers: {
41 | Authorization: apiKey,
42 | },
43 | }),
44 | });
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/src/services/search/pixabay.ts:
--------------------------------------------------------------------------------
1 | import { SearchBaseClass } from "../../helpers/search";
2 |
3 | export interface PixabayResult {
4 | id: number;
5 | largeImageURL: string;
6 | previewURL: string;
7 | user: string;
8 | userImageURL: string;
9 | pageURL: string;
10 | tags: string;
11 | }
12 |
13 | export default class Pixabay extends SearchBaseClass {
14 | constructor(apiKey: string) {
15 | super({
16 | apiKey,
17 | name: "pixabay",
18 | icon: ``,
19 | color: "#2ec66d",
20 | poweredByUrl: "https://pixabay.com",
21 | popularEndpoint: (apiKey: string) =>
22 | `https://pixabay.com/api/?key=${apiKey}&per_page=18&image_type=photo`,
23 | searchEndpoint: (apiKey: string, query: string) =>
24 | `https://pixabay.com/api/?key=${apiKey}&per_page=18&q=${encodeURIComponent(
25 | query
26 | )}&image_type=photo`,
27 | getButton: (image: PixabayResult) => `
28 |
29 | 
30 | ${image.user}
31 |
35 |
40 |
41 | 
42 | ${image.user.name}
43 |
44 |
Anand Chowdhary
`
39 | ));
40 |
--------------------------------------------------------------------------------
/tests/services/search/pixabay.test.ts:
--------------------------------------------------------------------------------
1 | import Pixabay, { PixabayResult } from "../../../src/services/search/pixabay";
2 | import { minifyHTML } from "../../../src/helpers/utils";
3 |
4 | const service = new Pixabay("API_KEY");
5 |
6 | const pixabayResult: PixabayResult = {
7 | id: 1,
8 | largeImageURL: "https://pixabay.com/large.jpg",
9 | previewURL: "https://pixabay.com/preview.jpg",
10 | user: "Anand Chowdhary",
11 | userImageURL: "https://pixabay.com/user.jpg",
12 | pageURL: "https://pixabay.com/file",
13 | tags: "photo, example",
14 | };
15 |
16 | test("popular endpoint", () =>
17 | expect(service.popularEndpoint).toBe(
18 | "https://pixabay.com/api/?key=API_KEY&per_page=18&image_type=photo"
19 | ));
20 |
21 | test("search endpoint", () =>
22 | expect(service.searchEndpoint("API_KEY", "QUERY")).toBe(
23 | "https://pixabay.com/api/?key=API_KEY&per_page=18&q=QUERY&image_type=photo"
24 | ));
25 |
26 | test("gets search results", () =>
27 | expect(service.getSearchResults({ hits: [pixabayResult] })).toEqual([
28 | pixabayResult,
29 | ]));
30 |
31 | test("gets popular items", () =>
32 | expect(service.getPopularResults({ hits: [pixabayResult] })).toEqual([
33 | pixabayResult,
34 | ]));
35 |
36 | test("gets button HTML", () =>
37 | expect(minifyHTML(service.getButton(pixabayResult))).toBe(
38 | `
Anand Chowdhary
Anand Chowdhary