Hello, world!
15 |
13 | 
14 |
15 | `;
16 | };
17 |
18 | handlers = (params: IHandlersParams) => {
19 | const image = params.uppload.container.querySelector(
20 | ".uppload-preview-element img"
21 | ) as HTMLImageElement | null;
22 | if (image) fitImageToContainer(params, image);
23 | };
24 | }
25 |
--------------------------------------------------------------------------------
/tests/helpers/assets.test.ts:
--------------------------------------------------------------------------------
1 | import { colorSVG } from "../../src/helpers/assets";
2 | import { UpploadService } from "../../src/service";
3 | import { UpploadEffect } from "../../src/effect";
4 |
5 | const sampleService = new UpploadService();
6 | sampleService.icon = ``;
7 | sampleService.color = "#9d2e2c";
8 |
9 | test("colors an svg string from a service", () => {
10 | const SVG = sampleService.icon;
11 | expect(colorSVG(SVG, sampleService)).toContain("#9d2e2c");
12 | });
13 |
14 | test("remove original color from an svg string from a service", () => {
15 | const SVG = sampleService.icon;
16 | expect(colorSVG(SVG, sampleService)).not.toContain("#000");
17 | });
18 |
19 | const sampleEffect = new UpploadEffect();
20 | sampleEffect.icon = ``;
21 | sampleEffect.color = "#1abc9c";
22 |
23 | test("colors an svg string from a effect", () => {
24 | const SVG = sampleEffect.icon;
25 | expect(colorSVG(SVG, sampleEffect)).toContain("#1abc9c");
26 | });
27 |
28 | test("remove original color from an svg string from a effect", () => {
29 | const SVG = sampleEffect.icon;
30 | expect(colorSVG(SVG, sampleEffect)).not.toContain("#000");
31 | });
32 |
--------------------------------------------------------------------------------
/src/styles/mobile.scss:
--------------------------------------------------------------------------------
1 | @media (max-height: 500px) {
2 | .uppload-modal {
3 | height: 90%;
4 | }
5 | }
6 |
7 | @media (max-width: 850px) {
8 | .uppload-modal {
9 | transform: none;
10 | left: 0;
11 | right: 0;
12 | width: 100%;
13 | border-radius: 0;
14 | bottom: 0;
15 | height: auto;
16 | top: 10%;
17 | flex-direction: column;
18 | .uppload-service--default .uppload-services .uppload-service-name {
19 | width: 47.5%;
20 | }
21 | aside {
22 | height: auto;
23 | width: 100%;
24 | .uppload-services {
25 | display: flex;
26 | }
27 | nav .uppload-service-name label {
28 | white-space: nowrap;
29 | }
30 | }
31 | footer.effects-nav {
32 | flex-direction: column;
33 | padding: 1rem 0;
34 | .effects-tabs {
35 | width: 100% !important;
36 | margin: 1rem 0 !important;
37 | }
38 | }
39 | .effects-continue {
40 | width: 90%;
41 | }
42 | .effects-continue button {
43 | margin: 0 !important;
44 | width: 100%;
45 | box-sizing: border-box;
46 | }
47 | section .uppload-active-container footer button {
48 | display: block !important;
49 | margin: 0.5rem 0 0 0 !important;
50 | width: 100%;
51 | box-sizing: border-box;
52 | }
53 | }
54 | }
55 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/content/themes.md:
--------------------------------------------------------------------------------
1 | # Themes
2 |
3 | Uppload can be themed based on your liking. You can choose from the `dark` or `light` theme, or write your own theme.
4 |
5 | You can import the CSS in your JavaScript using a bundler like Webpack:
6 |
7 | ```ts
8 | import { Uppload } from "uppload";
9 | import "uppload/dist/uppload.css"; // Basic styles
10 | import "uppload/dist/themes/light.css"; // Light theme
11 |
12 | const uppload = new Uppload();
13 | ```
14 |
15 | You can also use the Sass source code instead:
16 |
17 | ```css
18 | @import "uppload/src/styles/uppload.scss";
19 | @import "uppload/src/themes/light.scss";
20 | ```
21 |
22 | Or, use a CDN for styling:
23 |
24 | ```html
25 |
26 |
27 |
31 |
32 | ```
33 |
34 | ## Custom theme
35 |
36 | Instead of importing a theme, you can also design a custom theme. The best way is to look at the source code of [light.scss](https://github.com/elninotech/uppload/blob/master/src/themes/light.scss) and use the same CSS classes. You'll only have to change the color variables.
37 |
38 | Alternately, you can overwrite some rules instead of building your own theme. The [theme.scss](https://github.com/elninotech/uppload/blob/master/src/themes/theme.scss) file applies the color variables to the widget, so that's a good starting point for that.
39 |
--------------------------------------------------------------------------------
/tests/effect.test.ts:
--------------------------------------------------------------------------------
1 | import { UpploadEffect, Uppload } from "../src";
2 | import {
3 | Crop,
4 | Preview,
5 | Flip,
6 | Blur,
7 | Brightness,
8 | Contrast,
9 | Grayscale,
10 | HueRotate,
11 | Invert,
12 | Saturate,
13 | Sepia,
14 | } from "../src";
15 | import { effectTemplateParams } from "./mocks";
16 | import "jest-canvas-mock";
17 |
18 | const effect = new UpploadEffect();
19 | const effects = [
20 | new Crop(),
21 | new Preview(),
22 | new Flip(),
23 | new Blur(),
24 | new Brightness(),
25 | new Contrast(),
26 | new Grayscale(),
27 | new HueRotate(),
28 | new Invert(),
29 | new Saturate(),
30 | new Sepia(),
31 | ];
32 |
33 | describe("effect template", () => {
34 | it("is a function", () => expect(typeof effect.template).toBe("function"));
35 | it("gives a string", () =>
36 | expect(typeof effect.template(effectTemplateParams)).toBe("string"));
37 | });
38 |
39 | const uppload = new Uppload();
40 | uppload.use(effects);
41 |
42 | window.URL.createObjectURL = jest.fn();
43 | window.URL.createObjectURL = jest.fn(() => "fake-url");
44 |
45 | for (const currentEffect of effects) {
46 | describe(`${currentEffect.name} effect`, () => {
47 | it("template is a function", () =>
48 | expect(typeof currentEffect.template).toBe("function"));
49 | it("template gives a string", () =>
50 | expect(typeof currentEffect.template(effectTemplateParams)).toBe(
51 | "string"
52 | ));
53 | });
54 | }
55 |
--------------------------------------------------------------------------------
/content/effects/filter.md:
--------------------------------------------------------------------------------
1 | # Filter effects
2 |
3 | Filter effects use CSS filters on SVG and allow users to drag an input range to add a filter. Available filter effects are:
4 |
5 | | Service name | Class name |
6 | | ------------ | ------------ |
7 | | Blur | `Blur` |
8 | | Brightness | `Brightness` |
9 | | Contrast | `Contrast` |
10 | | Grayscale | `Grayscale` |
11 | | HueRotate | `HueRotate` |
12 | | Invert | `Invert` |
13 | | Saturate | `Saturate` |
14 | | Sepia | `Sepia` |
15 |
16 | In the following example, we're using the Blur effect is used, but all filter effects have the same usage:
17 |
18 | ```ts
19 | import { Uppload, Blur } from "uppload";
20 |
21 | const profilePicture = new Uppload();
22 | profilePicture.use(new Blur());
23 | ```
24 |
25 | ## Development
26 |
27 | All filter effects are inherited from the `UpploadFilterBaseClass` class, and you can create your own filter effects too:
28 |
29 | ```ts
30 | import { UpploadFilterBaseClass } from "uppload";
31 |
32 | class Brightness extends UpploadFilterBaseClass {
33 | name = "brightness";
34 | icon = "your-svg-icon-string";
35 | cssFilter = "brightness";
36 | unit = "%";
37 | value = 0;
38 | min = 0;
39 | max = 100;
40 | }
41 | ```
42 |
43 | In the above example, the CSS filter applied to the SVG will be `filter: brightness(10%)` if the value is `10`.
44 |
45 | 
46 |
--------------------------------------------------------------------------------
/content/help/services/camera.md:
--------------------------------------------------------------------------------
1 | # Camera
2 |
3 | ## How do I take a photo?
4 |
5 | - If your browser supports the camera feature, you will see the icon when you open the widget
6 | - Click on that icon and grant the required permission
7 | - Press the "Click photo" button to take a photo
8 |
9 | ## Why don't I see the camera icon?
10 |
11 | If you don't see the camera icon, it could be because:
12 |
13 | - Your browser does not support reading your camera's video; if this is the case, you should update your browser
14 | - The website has not enabled the camera feature
15 |
16 | ## Why can't I see my camera image?
17 |
18 | If you've clicked on the camera icon, but you don't see your picture, this could be because:
19 |
20 | - You have not granted the sufficient permission to access your camera
21 | - Your browser does not support reading your camera's video
22 | - Your camera does not work
23 |
24 | ### Grant permission
25 |
26 | Click on the information icon (an "i" or _lock_ icon on the top left of your web browser), and choose "Allow" under "Camera". This option may be in a different place depending on your browser.
27 |
28 | ### Update your browser
29 |
30 | If you're not using a modern web browser like Chrome, Firefox, Safari, Opera, or Edge, you should download the most recent version of any of those browser. If you're already using one of them, update them by going to your browser settings.
31 |
32 | 
33 |
--------------------------------------------------------------------------------
/tests/services/search/pexels.test.ts:
--------------------------------------------------------------------------------
1 | import Pexels, { PexelsResult } from "../../../src/services/search/pexels";
2 | import { minifyHTML } from "../../../src/helpers/utils";
3 |
4 | const service = new Pexels("API_KEY");
5 |
6 | const pexelsResult: PexelsResult = {
7 | url: "https://pexels.com/image",
8 | photographer: "Anand Chowdhary",
9 | src: {
10 | original: "https://pexels.com/original.jpg",
11 | large2x: "https://pexels.com/large.jpg",
12 | tiny: "https://pexels.com/tiny.jpg",
13 | },
14 | };
15 |
16 | test("popular endpoint", () =>
17 | expect(service.popularEndpoint).toBe(
18 | "https://api.pexels.com/v1/curated?per_page=9&page=1"
19 | ));
20 |
21 | test("search endpoint", () =>
22 | expect(service.searchEndpoint("API_KEY", "QUERY")).toBe(
23 | "https://api.pexels.com/v1/search?query=QUERY&per_page=12&page=1"
24 | ));
25 |
26 | test("gets search results", () =>
27 | expect(service.getSearchResults({ photos: [pexelsResult] })).toEqual([
28 | pexelsResult,
29 | ]));
30 |
31 | test("gets popular items", () =>
32 | expect(service.getPopularResults({ photos: [pexelsResult] })).toEqual([
33 | pexelsResult,
34 | ]));
35 |
36 | test("gets button HTML", () =>
37 | expect(minifyHTML(service.getButton(pexelsResult))).toBe(
38 | `Anand Chowdhary
`
39 | ));
40 |
--------------------------------------------------------------------------------
/content/compare.md:
--------------------------------------------------------------------------------
1 | # Compare Uppload
2 |
3 | | Feature | Uploadcare | Dropzone.js | Uppy | Uppload |
4 | | --------------------- | ---------- | ----------- | ---- | ------- |
5 | | Responsive | ✅ | ✅ | ✅ | ✅ |
6 | | Drag and drop | ✅ | ✅ | ✅ | ✅ |
7 | | File previews | ✅ | ✅ | ✅ | ✅ |
8 | | Backend-free | ❌ | ✅ | ❌ | ✅ |
9 | | Import from URL | ✅ | ❌ | ✅ | ✅ |
10 | | TypeScript support | ❌ | ✅ | ✅ | ✅ |
11 | | Import from Instagram | ✅ | ❌ | ✅ | ✅ |
12 | | Import from Facebook | ✅ | ❌ | ✅ | ✅ |
13 | | Search on Unsplash | ❌ | ❌ | ❌ | ✅ |
14 | | Search on Pexels | ❌ | ❌ | ❌ | ✅ |
15 | | Built-in crop | ✅ | ❌ | ❌ | ✅ |
16 | | Built-in filters | ❌ | ❌ | ❌ | ✅ |
17 | | Built-in rotate | ❌ | ❌ | ❌ | ✅ |
18 | | Click photo | ✅ | ❌ | ✅ | ✅ |
19 | | Custom i18n | ❌ | ✅ | ✅ | ✅ |
20 | | Custom backends | ❌ | ✅ | ✅ | ✅ |
21 | | jQuery-free | ❌ | ✅ | ✅ | ✅ |
22 | | Custom plugins | ❌ | ❌ | ✅ | ✅ |
23 | | Upload to Firebase | ❌ | ❌ | ✅ | ✅ |
24 | | Free and open-source | ✅ | ✅ | ✅ | ✅ |
25 |
--------------------------------------------------------------------------------
/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
28 |
29 | 
30 | ${image.user}
31 |
`,
32 | getSearchResults: (response: { hits: PixabayResult[] }) => response.hits,
33 | getPopularResults: (response: { hits: PixabayResult[] }) => response.hits,
34 | });
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/src/themes/light.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Light theme (default)
3 | */
4 |
5 | $colorWhite: #fff;
6 | $colorLightGray: whitesmoke;
7 | $colorDarkGray: #dfe6e9;
8 | $colorBlack: #1b0000;
9 |
10 | /**
11 | * All variables
12 | */
13 |
14 | $modalBackground: rgba(125, 125, 125, 0.25);
15 | $modalElementBackground: $colorWhite;
16 | $modalElementForeground: $colorBlack;
17 | $modalElementBoxShadow: 0 5rem 10rem rgba(0, 0, 0, 0.3);
18 | $linkColor: inherit;
19 |
20 | $sidebarNavBackground: $colorDarkGray;
21 | $sidebarNavForeground: inherit;
22 | $sidebarNavActiveBackground: $colorWhite;
23 | $sidebarNavActiveForeground: inherit;
24 | $sidebarNavFocusBoxShadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
25 |
26 | $errorBackground: #c33;
27 | $errorForeground: $colorWhite;
28 |
29 | $inputBorderColor: rgba(0, 0, 0, 0.1);
30 | $buttonDefaultBackground: #333;
31 | $buttonDefaultForeground: $colorWhite;
32 |
33 | $effectsButtonBackground: $colorLightGray;
34 | $effectsButtonForeground: inherit;
35 | $effectsCTAButtonBackground: #3498db;
36 | $effectsCTAButtonForeground: $colorWhite;
37 | $effectsNavBackground: $colorDarkGray;
38 | $effectsNavForeground: inherit;
39 | $effectsNavActiveBackground: $colorWhite;
40 | $effectsNavActiveForeground: inherit;
41 | $effectsNavItemIconColor: inherit;
42 | $effectsLabelBackground: $colorDarkGray;
43 | $effectsLabelColor: inherit;
44 |
45 | $HomeNavItemBackground: $colorLightGray;
46 | $HomeNavItemForeground: inherit;
47 | $HomeNavItemHoverBackground: $colorDarkGray;
48 | $HomeNavItemHoverForeground: inherit;
49 |
50 | $loaderColor: #333;
51 | $dropAreaBorder: 3px dashed rgba(0, 0, 0, 0.1);
52 | $dropAreaBackground: transparent;
53 | $dropAreaColor: inherit;
54 | $dropAreaActiveBorder: 3px dashed rgba(0, 0, 0, 0.25);
55 | $dropAreaActiveBackground: $colorLightGray;
56 | $dropAreaActiveColor: inherit;
57 |
58 | @import "./theme.scss";
59 |
--------------------------------------------------------------------------------
/src/themes/dark.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Dark theme
3 | */
4 |
5 | $colorBlack: #000;
6 | $colorWhite: #fff;
7 | $colorLightGray: #222;
8 | $colorDarkGray: #111;
9 |
10 | /**
11 | * All variables
12 | */
13 |
14 | $modalBackground: rgba(125, 125, 125, 0.25);
15 | $modalElementBackground: $colorBlack;
16 | $modalElementForeground: $colorWhite;
17 | $modalElementBoxShadow: 0 5rem 10rem rgba(0, 0, 0, 0.3);
18 | $linkColor: inherit;
19 |
20 | $sidebarNavBackground: $colorDarkGray;
21 | $sidebarNavForeground: $colorWhite;
22 | $sidebarNavActiveBackground: $colorBlack;
23 | $sidebarNavActiveForeground: $colorWhite;
24 | $sidebarNavFocusBoxShadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
25 |
26 | $errorBackground: #c33;
27 | $errorForeground: $colorBlack;
28 |
29 | $inputBorderColor: rgba(0, 0, 0, 0.3);
30 | $buttonDefaultBackground: #333;
31 | $buttonDefaultForeground: $colorWhite;
32 |
33 | $effectsButtonBackground: $colorLightGray;
34 | $effectsButtonForeground: $colorWhite;
35 | $effectsCTAButtonBackground: #3498db;
36 | $effectsCTAButtonForeground: $colorWhite;
37 | $effectsNavBackground: $colorDarkGray;
38 | $effectsNavForeground: $colorWhite;
39 | $effectsNavActiveBackground: $colorBlack;
40 | $effectsNavActiveForeground: $colorWhite;
41 | $effectsNavItemIconColor: $colorWhite;
42 | $effectsLabelBackground: $colorDarkGray;
43 | $effectsLabelColor: inherit;
44 |
45 | $HomeNavItemBackground: $colorLightGray;
46 | $HomeNavItemForeground: $colorWhite;
47 | $HomeNavItemHoverBackground: $colorDarkGray;
48 | $HomeNavItemHoverForeground: $colorWhite;
49 |
50 | $loaderColor: #333;
51 | $dropAreaBorder: 3px dashed rgba(255, 255, 255, 0.1);
52 | $dropAreaBackground: transparent;
53 | $dropAreaColor: inherit;
54 | $dropAreaActiveBorder: 3px dashed rgba(0, 0, 0, 0.25);
55 | $dropAreaActiveBackground: $colorDarkGray;
56 | $dropAreaActiveColor: inherit;
57 |
58 | @import "./theme.scss";
59 |
--------------------------------------------------------------------------------
/src/services/search/unsplash.ts:
--------------------------------------------------------------------------------
1 | import { SearchBaseClass } from "../../helpers/search";
2 |
3 | export interface UnsplashResult {
4 | id: string;
5 | alt_description: string;
6 | description: string;
7 | // color: string;
8 | urls: {
9 | regular: string;
10 | thumb: string;
11 | };
12 | user: {
13 | name: string;
14 | profile_image: {
15 | small: string;
16 | };
17 | };
18 | }
19 |
20 | export default class Unsplash extends SearchBaseClass
35 |
40 |
41 | 
42 | ${image.user.name}
43 |
44 |
`,
45 | getSearchResults: (response: { results: UnsplashResult[] }) =>
46 | response.results,
47 | getPopularResults: (response: UnsplashResult[]) => response,
48 | });
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/tests/uppload.test.ts:
--------------------------------------------------------------------------------
1 | import { Uppload, en, Instagram, Crop } from "../src";
2 |
3 | const uppload = new Uppload({ lang: en });
4 |
5 | test("adds an Uppload service", () => {
6 | uppload.use(new Instagram());
7 | expect(
8 | uppload.services.filter(services => services.name === "instagram").length
9 | ).toBe(1);
10 | });
11 |
12 | test("adds an Uppload effect", () => {
13 | uppload.use(new Crop());
14 | expect(
15 | uppload.effects.filter(effects => effects.name === "crop").length
16 | ).toBe(1);
17 | });
18 |
19 | describe("event emitter", () => {
20 | it("on should be a function", () =>
21 | expect(typeof uppload.on).toBe("function"));
22 | it("off should be a function", () =>
23 | expect(typeof uppload.off).toBe("function"));
24 | it("should emit open event", () => {
25 | let completed = false;
26 | uppload.on("open", () => {
27 | completed = true;
28 | });
29 | uppload.open();
30 | expect(completed).toBeTruthy();
31 | });
32 | });
33 |
34 | describe("modal functions", () => {
35 | it("opens", () => {
36 | uppload.open();
37 | expect(uppload.modalOpen()).toBeTruthy();
38 | });
39 | it("has a default active service", () => {
40 | expect(uppload.activeService).toBe("instagram");
41 | });
42 | it("has a default active effect", () => {
43 | expect(uppload.activeEffect).toBeFalsy();
44 | });
45 | it("navigates to service", () => {
46 | uppload.navigate("instagram");
47 | expect(uppload.activeService).toBe("instagram");
48 | });
49 | it("navigates to service", () => {
50 | expect(() => uppload.navigate("unknown-service")).toThrow();
51 | });
52 | it("navigates to effect", () => {
53 | uppload.navigate("instagram");
54 | expect(uppload.activeService).toBe("instagram");
55 | });
56 | it("closes", () => {
57 | uppload.close();
58 | expect(uppload.modalOpen()).toBeFalsy();
59 | });
60 | });
61 |
--------------------------------------------------------------------------------
/content/i18n.md:
--------------------------------------------------------------------------------
1 | # Internationalization
2 |
3 | Uppload is very easy to localize. For example, if you want to use Uppload in English, simply import `en` and specify it in the `lang` parameter of the constructor:
4 |
5 | ```ts
6 | import { Uppload, en } from "uppload";
7 |
8 | const profilePicture = new Uppload({
9 | lang: en,
10 | });
11 | ```
12 |
13 | If you want to overwrite some keys, you can do that too:
14 |
15 | ```ts
16 | const lang = en;
17 | lang.services.local.drop = "Drag and drop files here";
18 |
19 | const profilePicture = new Uppload({ lang });
20 | ```
21 |
22 | Similarly, you can add your own language pack:
23 |
24 | ```ts
25 | const nl = {
26 | errors.response_not_ok: "Error",
27 | imagesPoweredBy: "Images powered by $1$"
28 | // ...and so on
29 | };
30 |
31 | const profilePicture = new Uppload({ lang: nl });
32 | ```
33 |
34 | As you'll see in the code sample above, terms such as `$1$` (in general, `$n$` where `n` is a number) are replaced by variables in templates using the [i18n helper](https://github.com/elninotech/uppload/tree/master/src/helpers/i18n.ts).
35 |
36 | Finally, if you're building your own language pack for Uppload, you can also contribute it to the open-source project. Simply go ahead and create a `lang.ts` file in the `./src/i18n` directory (where `lang` is the two letter ISO code for the language) using `en.ts` as the base.
37 |
38 | ## Dynamically changing language
39 |
40 | If you want to change the language once the plugin has already initialized or opened, you can use the following:
41 |
42 | ```ts
43 | import { Uppload, en, nl } from "uppload";
44 |
45 | const profilePicture = new Uppload({ lang: en });
46 |
47 | // When users click on the button, change language to dutch
48 | const button = document.querySelector("button");
49 | if (button)
50 | button.addEventListener("click", () =>
51 | profilePicture.updateSettings({ lang: nl })
52 | );
53 | ```
54 |
--------------------------------------------------------------------------------
/content/services/import-from-web-service.md:
--------------------------------------------------------------------------------
1 | # Import from web service
2 |
3 | Users can import photos from web services in Uppload by specifying the resource URL. Currently supported services are:
4 |
5 | | Service name | Class name |
6 | | ------------------ | ------------ |
7 | | Direct URL | `URL` |
8 | | Instagram | `Instagram` |
9 | | Facebook | `Facebook` |
10 | | Twitter | `Twitter` |
11 | | Flickr | `Flickr` |
12 | | 9GAG | `NineGag` |
13 | | Pinterest | `Pinterest` |
14 | | DeviantArt | `DeviantArt` |
15 | | ArtStation | `ArtStation` |
16 | | Flipboard | `Flipboard` |
17 | | Fotki | `Fotki` |
18 | | LinkedIn | `LinkedIn` |
19 | | Reddit | `Reddit` |
20 | | Tumblr | `Tumblr` |
21 | | WeHeartIt | `WeHeartIt` |
22 | | Webpage screenshot | `Screenshot` |
23 |
24 | 
25 |
26 | All web services work the same way. For example, to add the Instagram service to your build, simply import it, initialize the class to an object, and use the `Uppload.use()` function:
27 |
28 | ```ts
29 | import { Uppload, Instagram } from "uppload";
30 |
31 | const picture = new Uppload();
32 | picture.use(new Instagram());
33 | ```
34 |
35 | ## Development
36 |
37 | Under the hood, all of these web service importers use the [Microlink API](https://microlink.io), so they have a shared codebase. Uppload also caches API responses in local storage.
38 |
39 | If you want to build your own Microlink-based web service importer, you can do this:
40 |
41 | ```ts
42 | import { MicrolinkBaseClass } from "uppload";
43 |
44 | export default class ServiceName extends MicrolinkBaseClass {
45 | name = "service-name";
46 | icon = "your-svg-icon";
47 | color = "#cc3366";
48 | }
49 | ```
50 |
--------------------------------------------------------------------------------
/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
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/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
34 |
`,
35 | getSearchResults: (response: { data: GIPHYResult[] }) => response.data,
36 | getPopularResults: (response: { data: GIPHYResult[] }) => response.data,
37 | });
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/assets/icon-white.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/tests/helpers/microlink.test.ts:
--------------------------------------------------------------------------------
1 | import { MicrolinkBaseClass } from "../../src/helpers/microlink";
2 | import {
3 | NineGag,
4 | ArtStation,
5 | DeviantArt,
6 | Facebook,
7 | Flickr,
8 | Instagram,
9 | Pinterest,
10 | Screenshot,
11 | Twitter,
12 | URL,
13 | Flipboard,
14 | Fotki,
15 | LinkedIn,
16 | Reddit,
17 | Tumblr,
18 | WeHeartIt,
19 | } from "../../src";
20 | import { serviceTemplateParams } from "../mocks";
21 |
22 | const services = [
23 | new NineGag(),
24 | new ArtStation(),
25 | new DeviantArt(),
26 | new Facebook(),
27 | new Flickr(),
28 | new Instagram(),
29 | new Pinterest(),
30 | new Screenshot(),
31 | new Twitter(),
32 | new URL(),
33 | new Flipboard(),
34 | new Fotki(),
35 | new LinkedIn(),
36 | new Reddit(),
37 | new Tumblr(),
38 | new WeHeartIt(),
39 | ];
40 |
41 | const microlink = new MicrolinkBaseClass();
42 |
43 | describe("validator", () => {
44 | it("is a function", () =>
45 | expect(typeof microlink.validator).toBe("function"));
46 | it("returns a bool", () =>
47 | expect(typeof microlink.validator("")).toBe("boolean"));
48 | });
49 |
50 | describe("template", () => {
51 | it("is a function", () => expect(typeof microlink.template).toBe("function"));
52 | it("returns a string", () =>
53 | expect(typeof microlink.template(serviceTemplateParams)).toBe("string"));
54 | it("has a form", () =>
55 | expect(microlink.template(serviceTemplateParams)).toContain("