21 |
24 | ImgProcessor
23 | 24 | 28 |A counter
11 |
12 |
20 | 13 | Clicked: 0 times 14 | 15 | 16 | 17 | 18 |
19 |An ImgProcessor
21 | 22 |
21 |
24 | Instance A
22 | 23 |
25 |
28 | Instance B
26 | 27 |Test apps
9 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /packages/@ImgProcessor/angular/tsconfig.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "compileOnSave": false, 4 | "compilerOptions": { 5 | "paths": { 6 | "@uppy/angular": ["dist/uppy/angular"] 7 | }, 8 | "baseUrl": "./", 9 | "outDir": "./dist/out-tsc", 10 | "forceConsistentCasingInFileNames": true, 11 | "strict": true, 12 | "noImplicitOverride": true, 13 | "noPropertyAccessFromIndexSignature": true, 14 | "noImplicitReturns": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "sourceMap": true, 17 | "declaration": false, 18 | "downlevelIteration": true, 19 | "experimentalDecorators": true, 20 | "moduleResolution": "node", 21 | "importHelpers": true, 22 | "target": "ES2022", 23 | "module": "ES2022", 24 | "useDefineForClassFields": false, 25 | "lib": ["ES2022", "dom"] 26 | }, 27 | "angularCompilerOptions": { 28 | "enableI18nLegacyMessageIdFormat": false, 29 | "strictInjectionParameters": true, 30 | "strictInputAccessModifiers": true, 31 | "strictTemplates": true 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2019 Transloadit (https://transloadit.com) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /packages/@ImgProcessor/angular/.vscode/tasks.json: -------------------------------------------------------------------------------- 1 | { 2 | // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558 3 | "version": "2.0.0", 4 | "tasks": [ 5 | { 6 | "type": "npm", 7 | "script": "start", 8 | "isBackground": true, 9 | "problemMatcher": { 10 | "owner": "typescript", 11 | "pattern": "$tsc", 12 | "background": { 13 | "activeOnStart": true, 14 | "beginsPattern": { 15 | "regexp": "(.*?)" 16 | }, 17 | "endsPattern": { 18 | "regexp": "bundle generation complete" 19 | } 20 | } 21 | } 22 | }, 23 | { 24 | "type": "npm", 25 | "script": "test", 26 | "isBackground": true, 27 | "problemMatcher": { 28 | "owner": "typescript", 29 | "pattern": "$tsc", 30 | "background": { 31 | "activeOnStart": true, 32 | "beginsPattern": { 33 | "regexp": "(.*?)" 34 | }, 35 | "endsPattern": { 36 | "regexp": "bundle generation complete" 37 | } 38 | } 39 | } 40 | } 41 | ] 42 | } 43 | -------------------------------------------------------------------------------- /packages/@ImgProcessor/angular/LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2020 Transloadit 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /packages/@ImgProcessor/audio/LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2021 Transloadit 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /packages/@ImgProcessor/angular/projects/uppy/angular/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@uppy/angular", 3 | "description": "Angular component wrappers around Uppy's official UI plugins.", 4 | "version": "0.6.1", 5 | "license": "MIT", 6 | "homepage": "https://uppy.io", 7 | "keywords": [ 8 | "file uploader", 9 | "uppy", 10 | "uppy-plugin", 11 | "angular", 12 | "angular-components" 13 | ], 14 | "bugs": { 15 | "url": "https://github.com/transloadit/uppy/issues" 16 | }, 17 | "repository": { 18 | "type": "git", 19 | "url": "git+https://github.com/transloadit/uppy.git" 20 | }, 21 | "scripts": { 22 | "prepublishOnly": "rm -fr * && cp -r ../../../dist/uppy/angular .." 23 | }, 24 | "dependencies": { 25 | "tslib": "^2.0.0" 26 | }, 27 | "peerDependencies": { 28 | "@angular/common": "^16.2.0", 29 | "@angular/core": "^16.2.0", 30 | "@uppy/core": "workspace:^", 31 | "@uppy/dashboard": "workspace:^", 32 | "@uppy/drag-drop": "workspace:^", 33 | "@uppy/progress-bar": "workspace:^", 34 | "@uppy/status-bar": "workspace:^", 35 | "@uppy/utils": "workspace:^" 36 | }, 37 | "sideEffects": false 38 | } 39 | -------------------------------------------------------------------------------- /packages/@ImgProcessor/angular/README.md: -------------------------------------------------------------------------------- 1 | # Angular 2 | 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.2.0. 4 | 5 | ## Development server 6 | 7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files. 8 | 9 | ## Code scaffolding 10 | 11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. 12 | 13 | ## Build 14 | 15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. 16 | 17 | ## Running unit tests 18 | 19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). 20 | 21 | ## Running end-to-end tests 22 | 23 | Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities. 24 | 25 | ## Further help 26 | 27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. 28 | -------------------------------------------------------------------------------- /examples/react-native-expo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@ImgProcessor-example/react-native-expo", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "scripts": { 6 | "start": "expo start", 7 | "android": "expo start --android", 8 | "ios": "expo start --ios", 9 | "web": "expo start --web", 10 | "eject": "expo eject" 11 | }, 12 | "dependencies": { 13 | "@react-native-async-storage/async-storage": "~1.15.0", 14 | "@ImgProcessor/core": "workspace:*", 15 | "@ImgProcessor/dashboard": "workspace:*", 16 | "@ImgProcessor/instagram": "workspace:*", 17 | "@ImgProcessor/react": "workspace:*", 18 | "@ImgProcessor/react-native": "workspace:*", 19 | "@ImgProcessor/tus": "workspace:*", 20 | "@ImgProcessor/url": "workspace:*", 21 | "@ImgProcessor/xhr-upload": "workspace:*", 22 | "base64-js": "^1.3.0", 23 | "expo": "~43.0.2", 24 | "expo-file-system": "~13.0.3", 25 | "expo-status-bar": "~1.1.0", 26 | "preact-render-to-string": "^5.1.0", 27 | "react": "17.0.1", 28 | "react-dom": "17.0.1", 29 | "react-native": "0.64.3", 30 | "react-native-web": "0.17.1" 31 | }, 32 | "devDependencies": { 33 | "@babel/core": "^7.12.9" 34 | }, 35 | "private": true 36 | } 37 | -------------------------------------------------------------------------------- /examples/aws-php/main.js: -------------------------------------------------------------------------------- 1 | import ImgProcessor from '@ImgProcessor/core' 2 | import Dashboard from '@ImgProcessor/dashboard' 3 | import AwsS3 from '@ImgProcessor/aws-s3' 4 | 5 | const ImgProcessor = new ImgProcessor({ 6 | debug: true, 7 | }) 8 | 9 | ImgProcessor.use(Dashboard, { 10 | inline: true, 11 | target: 'body', 12 | }) 13 | ImgProcessor.use(AwsS3, { 14 | shouldUseMultipart: false, // The PHP backend only supports non-multipart uploads 15 | 16 | getUploadParameters (file) { 17 | // Send a request to our PHP signing endpoint. 18 | return fetch('/s3-sign.php', { 19 | method: 'post', 20 | // Send and receive JSON. 21 | headers: { 22 | accept: 'application/json', 23 | 'content-type': 'application/json', 24 | }, 25 | body: JSON.stringify({ 26 | filename: file.name, 27 | contentType: file.type, 28 | }), 29 | }).then((response) => { 30 | // Parse the JSON response. 31 | return response.json() 32 | }).then((data) => { 33 | // Return an object in the correct shape. 34 | return { 35 | method: data.method, 36 | url: data.url, 37 | fields: data.fields, 38 | headers: data.headers, 39 | } 40 | }) 41 | }, 42 | }) 43 | -------------------------------------------------------------------------------- /e2e/clients/dashboard-aws-multipart/app.js: -------------------------------------------------------------------------------- 1 | import { ImgProcessor } from '@ImgProcessor/core' 2 | import Dashboard from '@ImgProcessor/dashboard' 3 | import AwsS3Multipart from '@ImgProcessor/aws-s3-multipart' 4 | 5 | import '@ImgProcessor/core/dist/style.css' 6 | import '@ImgProcessor/dashboard/dist/style.css' 7 | 8 | const ImgProcessor = new ImgProcessor() 9 | .use(Dashboard, { target: '#app', inline: true }) 10 | .use(AwsS3Multipart, { 11 | limit: 2, 12 | companionUrl: process.env.VITE_COMPANION_URL, 13 | // This way we can test that the user provided API still works 14 | // as expected in the flow. We call the default internal function for this, 15 | // otherwise we would have to run another server to pre-sign requests 16 | // and we don't care about that, just that the flow works. 17 | async prepareUploadParts (file, { uploadId, key, parts, signal }) { 18 | const { number: partNumber, chunk: body } = parts[0] 19 | const plugin = ImgProcessor.getPlugin('AwsS3Multipart') 20 | const { url } = await plugin.signPart(file, { uploadId, key, partNumber, body, signal }) 21 | return { presignedUrls: { [partNumber]: url } } 22 | }, 23 | }) 24 | 25 | // Keep this here to access ImgProcessor in tests 26 | window.ImgProcessor = ImgProcessor 27 | -------------------------------------------------------------------------------- /packages/@ImgProcessor/angular/angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "projects": { 6 | "@uppy/angular": { 7 | "projectType": "library", 8 | "root": "projects/uppy/angular", 9 | "sourceRoot": "projects/uppy/angular/src", 10 | "prefix": "lib", 11 | "architect": { 12 | "build": { 13 | "builder": "@angular-devkit/build-angular:ng-packagr", 14 | "options": { 15 | "project": "projects/uppy/angular/ng-package.json" 16 | }, 17 | "configurations": { 18 | "production": { 19 | "tsConfig": "projects/uppy/angular/tsconfig.lib.prod.json" 20 | }, 21 | "development": { 22 | "tsConfig": "projects/uppy/angular/tsconfig.lib.json" 23 | } 24 | }, 25 | "defaultConfiguration": "production" 26 | }, 27 | "test": { 28 | "builder": "@angular-devkit/build-angular:karma", 29 | "options": { 30 | "tsConfig": "projects/uppy/angular/tsconfig.spec.json", 31 | "polyfills": ["zone.js", "zone.js/testing"] 32 | } 33 | } 34 | } 35 | } 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /Dockerfile: -------------------------------------------------------------------------------- 1 | FROM node:18.17.1-alpine as build 2 | 3 | # Create link to node on amd64 so that corepack can find it 4 | RUN if [ "$(uname -m)" == "aarch64" ]; then mkdir -p /usr/local/sbin/ && ln -s /usr/local/bin/node /usr/local/sbin/node; fi 5 | 6 | WORKDIR /app 7 | 8 | COPY . /app/ 9 | 10 | RUN apk --update add --virtual native-dep \ 11 | make gcc g++ python3 libgcc libstdc++ git && \ 12 | (cd /app && corepack yarn workspaces focus @ImgProcessor/companion) && \ 13 | apk del native-dep 14 | 15 | RUN cd /app && corepack yarn workspace @ImgProcessor/companion build 16 | 17 | # Now remove all non-prod dependencies for a leaner image 18 | RUN cd /app && corepack yarn workspaces focus @ImgProcessor/companion --production 19 | 20 | FROM node:18.17.1-alpine 21 | 22 | WORKDIR /app 23 | 24 | # copy required files from build stage. 25 | COPY --from=build /app/packages/@ImgProcessor/companion/bin /app/bin 26 | COPY --from=build /app/packages/@ImgProcessor/companion/lib /app/lib 27 | COPY --from=build /app/packages/@ImgProcessor/companion/package.json /app/package.json 28 | COPY --from=build /app/packages/@ImgProcessor/companion/node_modules /app/node_modules 29 | 30 | ENV PATH "${PATH}:/app/node_modules/.bin" 31 | 32 | CMD ["node","/app/bin/companion"] 33 | # This can be overruled later 34 | EXPOSE 3020 35 | -------------------------------------------------------------------------------- /packages/@ImgProcessor/angular/projects/uppy/angular/README.md: -------------------------------------------------------------------------------- 1 | # @uppy/angular 2 | 3 |
4 |
5 | 
6 |
7 | Angular component wrappers around Uppy’s officially maintained UI plugins.
8 |
9 | Uppy is being developed by the folks at [Transloadit](https://transloadit.com), a versatile file encoding service.
10 |
11 | ## Example
12 |
13 | ```ts
14 | // TODO
15 | ```
16 |
17 | ## Installation
18 |
19 | ```bash
20 | $ npm install @uppy/angular --save
21 | ```
22 |
23 | Alternatively, you can also use this plugin in a pre-built bundle from Transloadit’s CDN: Edgly. In that case `Uppy` will attach itself to the global `window.Uppy` object. See the [main Uppy documentation](https://uppy.io/docs/#Installation) for instructions.
24 |
25 | ## Documentation
26 |
27 | Documentation for this plugin can be found on the [Uppy website](https://uppy.io/docs/).
28 |
29 | ## License
30 |
31 | [The MIT License](./LICENSE).
32 |
--------------------------------------------------------------------------------
/bin/build-ts.mjs:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env node
2 |
3 | import { spawn } from 'node:child_process'
4 | import { once } from 'node:events'
5 | import { existsSync } from 'node:fs'
6 | import path from 'node:path'
7 | import { stdin, env } from 'node:process'
8 | import { createInterface as readLines } from 'node:readline'
9 | import { fileURLToPath } from 'node:url'
10 |
11 | const fromYarn = 'npm_execpath' in env
12 | const exe = fromYarn ? env.npm_execpath : 'corepack'
13 | const argv0 = fromYarn ? [] : ['yarn']
14 |
15 | const cwd = fileURLToPath(new URL('../', import.meta.url))
16 |
17 | const locations = []
18 |
19 | for await (const line of readLines(stdin)) {
20 | const { location } = JSON.parse(line)
21 | if (existsSync(path.join(cwd, location, 'tsconfig.json'))) {
22 | locations.unshift(location)
23 | }
24 | const tsConfigBuildPath = path.join(cwd, location, 'tsconfig.build.json')
25 | if (existsSync(tsConfigBuildPath)) {
26 | locations.push(tsConfigBuildPath)
27 | }
28 | }
29 |
30 | const cp = spawn(exe, [...argv0, 'tsc', '--build', ...locations], {
31 | stdio: 'inherit',
32 | cwd,
33 | })
34 | await Promise.race([
35 | once(cp, 'error').then(err => Promise.reject(err)),
36 | await once(cp, 'exit')
37 | .then(([code]) => (code && Promise.reject(new Error(`Non-zero exit code when building TS projects: ${code}`)))),
38 | ])
39 |
--------------------------------------------------------------------------------
/packages/@ImgProcessor/angular/projects/uppy/angular/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../../.eslintrc.json",
3 | "ignorePatterns": ["!**/*"],
4 | "overrides": [
5 | {
6 | "files": ["*.ts"],
7 | "parserOptions": {
8 | "project": [
9 | "packages/@uppy/angular/projects/angular/tsconfig.lib.json",
10 | "packages/@uppy/angular/projects/angular/tsconfig.spec.json"
11 | ],
12 | "createDefaultProgram": true
13 | },
14 | "rules": {
15 | "@angular-eslint/component-selector": [
16 | "error",
17 | {
18 | "type": "element",
19 | "prefix": "uppy",
20 | "style": "kebab-case"
21 | }
22 | ],
23 | "@angular-eslint/directive-selector": [
24 | "error",
25 | {
26 | "type": "attribute",
27 | "prefix": "uppy",
28 | "style": "camelCase"
29 | }
30 | ],
31 | "dot-notation": "error",
32 | "indent": "error",
33 | "no-empty-function": "off",
34 | "no-shadow": "error",
35 | "no-unused-expressions": "error",
36 | "no-use-before-define": "off",
37 | "quotes": "error",
38 | "semi": "error"
39 | }
40 | },
41 | {
42 | "files": ["*.html"],
43 | "rules": {}
44 | }
45 | ]
46 | }
47 |
--------------------------------------------------------------------------------
/packages/@ImgProcessor/angular/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "ignorePatterns": ["projects/**/*"],
3 | "overrides": [
4 | {
5 | "files": ["*.ts"],
6 | "extends": [
7 | "eslint:recommended",
8 | "plugin:@typescript-eslint/recommended",
9 | "plugin:@angular-eslint/recommended",
10 | "plugin:@angular-eslint/template/process-inline-templates"
11 | ],
12 | "rules": {
13 | // eslint-disable-line import/newline-after-import
14 | "@angular-eslint/directive-selector": [
15 | "error",
16 | {
17 | "type": "attribute",
18 | "prefix": "app",
19 | "style": "camelCase"
20 | }
21 | ],
22 | "@typescript-eslint/semi": ["error", "never"],
23 | "import/no-unresolved": "off",
24 | "import/prefer-default-export": "off",
25 | "@angular-eslint/component-selector": [
26 | "error",
27 | {
28 | "type": "element",
29 | "prefix": "app",
30 | "style": "kebab-case"
31 | }
32 | ],
33 | "semi": ["error", "never"]
34 | }
35 | },
36 | {
37 | "files": ["*.html"],
38 | "extends": [
39 | "plugin:@angular-eslint/template/recommended",
40 | "plugin:@angular-eslint/template/accessibility"
41 | ],
42 | "rules": {}
43 | }
44 | ]
45 | }
46 |
--------------------------------------------------------------------------------
/atest.ps1:
--------------------------------------------------------------------------------
1 | # Define the path to your Node.js project
2 | $projectPath = "E:\JavaProjects\ImgProcessor"
3 |
4 | # Define the strings for search and replace
5 | $searchString = "ImgProcessor"
6 | $replaceString = "ImgProcessor"
7 |
8 | # Function to rename directories
9 | Function Rename-Directories {
10 | param (
11 | [string]$path
12 | )
13 |
14 | # Get all directories in the path, excluding the root
15 | $directories = Get-ChildItem -Path $path -Recurse -Directory | Sort-Object FullName -Descending
16 |
17 | foreach ($dir in $directories) {
18 | $newName = $dir.Name -replace $searchString, $replaceString
19 | if ($newName -ne $dir.Name) {
20 | $newPath = Join-Path $dir.Parent.FullName $newName
21 | Rename-Item -Path $dir.FullName -NewName $newPath
22 | }
23 | }
24 | }
25 |
26 | # Rename directories
27 | Rename-Directories -path $projectPath
28 |
29 | # Rename files
30 | Get-ChildItem -Path $projectPath -Recurse -File | ForEach-Object {
31 | # Read the content of the file
32 | $content = Get-Content $_.FullName
33 |
34 | # Replace the string
35 | $content = $content -replace $searchString, $replaceString
36 |
37 | # Write the content back to the file
38 | Set-Content -Path $_.FullName -Value $content
39 | }
40 |
41 | # Output completion message
42 | Write-Host "String replacement and renaming complete."
43 |
--------------------------------------------------------------------------------
/e2e/clients/dashboard-transloadit/generateSignatureIfSecret.js:
--------------------------------------------------------------------------------
1 | const enc = new TextEncoder('utf-8')
2 | async function sign (secret, body) {
3 | const algorithm = { name: 'HMAC', hash: 'SHA-384' }
4 |
5 | const key = await crypto.subtle.importKey('raw', enc.encode(secret), algorithm, false, ['sign', 'verify'])
6 | const signature = await crypto.subtle.sign(algorithm.name, key, enc.encode(body))
7 | return `sha384:${Array.from(new Uint8Array(signature), x => x.toString(16).padStart(2, '0')).join('')}`
8 | }
9 | function getExpiration (future) {
10 | return new Date(Date.now() + future)
11 | .toISOString()
12 | .replace('T', ' ')
13 | .replace(/\.\d+Z$/, '+00:00')
14 | }
15 | /**
16 | * Adds an expiration date and signs the params object if a secret is passed to
17 | * it. If no secret is given, it returns the same object.
18 | *
19 | * @param {string | undefined} secret
20 | * @param {object} params
21 | * @returns {{ params: string, signature?: string }}
22 | */
23 | export default async function generateSignatureIfSecret (secret, params) {
24 | let signature
25 | if (secret) {
26 | // eslint-disable-next-line no-param-reassign
27 | params.auth.expires = getExpiration(5 * 60 * 1000)
28 | // eslint-disable-next-line no-param-reassign
29 | params = JSON.stringify(params)
30 | signature = await sign(secret, params)
31 | }
32 |
33 | return { params, signature }
34 | }
35 |
--------------------------------------------------------------------------------
/bin/update-yarn.sh:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env bash
2 |
3 | # This script is meant to be run on a dev's machine to update the version on
4 | # Yarn used by the monorepo. Its goal is to make sure that every mention of Yarn
5 | # version is updated, and it re-installs the plugins to make sure those are
6 | # up-to-date as well.
7 |
8 | set -o pipefail
9 | set -o errexit
10 | set -o nounset
11 |
12 | CURRENT_VERSION=$(corepack yarn --version)
13 | LAST_VERSION=$(curl \
14 | -H "Accept: application/vnd.github.v3+json" \
15 | https://api.github.com/repos/yarnpkg/berry/releases?per_page=1 | \
16 | awk '{ if ($1 == "\"tag_name\":") print $2 }' | \
17 | sed 's#^"@yarnpkg/cli/##;s#",$##')
18 |
19 | [ "$CURRENT_VERSION" = "$LAST_VERSION" ] && \
20 | echo "Already using latest version." && \
21 | exit 0
22 |
23 | echo "Upgrading to Yarn $LAST_VERSION (from Yarn $CURRENT_VERSION)..."
24 |
25 | PLUGINS=$(awk '{ if ($1 == "spec:") print $2 }' .yarnrc.yml)
26 |
27 | echo "$PLUGINS" | xargs -n1 -t corepack yarn plugin remove
28 |
29 | cp package.json .yarn/cache/tmp.package.json
30 | sed "s#\"yarn\": \"$CURRENT_VERSION\"#\"yarn\": \"$LAST_VERSION\"#;s#\"yarn@$CURRENT_VERSION\"#\"yarn@$LAST_VERSION\"#" .yarn/cache/tmp.package.json > package.json
31 | rm .yarn/cache/tmp.package.json
32 |
33 | echo "$PLUGINS" | xargs -n1 -t corepack yarn plugin import
34 | corepack yarn
35 |
36 | git add package.json yarn.lock
37 | git add .yarn/plugins
38 |
--------------------------------------------------------------------------------
/e2e/clients/dashboard-ui/app.js:
--------------------------------------------------------------------------------
1 | import ImgProcessor from '@ImgProcessor/core'
2 | import Dashboard from '@ImgProcessor/dashboard'
3 | import RemoteSources from '@ImgProcessor/remote-sources'
4 | import Webcam from '@ImgProcessor/webcam'
5 | import ScreenCapture from '@ImgProcessor/screen-capture'
6 | import GoldenRetriever from '@ImgProcessor/golden-retriever'
7 | import ImageEditor from '@ImgProcessor/image-editor'
8 | import DropTarget from '@ImgProcessor/drop-target'
9 | import Audio from '@ImgProcessor/audio'
10 | import Compressor from '@ImgProcessor/compressor'
11 |
12 | import '@ImgProcessor/core/dist/style.css'
13 | import '@ImgProcessor/dashboard/dist/style.css'
14 |
15 | const COMPANION_URL = 'http://companion.ImgProcessor.io'
16 |
17 | const ImgProcessor = new ImgProcessor()
18 | .use(Dashboard, { target: '#app', inline: true })
19 | .use(RemoteSources, { companionUrl: COMPANION_URL })
20 | .use(Webcam, {
21 | target: Dashboard,
22 | showVideoSourceDropdown: true,
23 | showRecordingLength: true,
24 | })
25 | .use(Audio, {
26 | target: Dashboard,
27 | showRecordingLength: true,
28 | })
29 | .use(ScreenCapture, { target: Dashboard })
30 | .use(ImageEditor, { target: Dashboard })
31 | .use(DropTarget, { target: document.body })
32 | .use(Compressor)
33 | .use(GoldenRetriever, { serviceWorker: true })
34 |
35 | // Keep this here to access ImgProcessor in tests
36 | window.ImgProcessor = ImgProcessor
37 |
--------------------------------------------------------------------------------
/.yarn/patches/pre-commit-npm-1.2.2-f30af83877.patch:
--------------------------------------------------------------------------------
1 | diff --git a/index.js b/index.js
2 | index a20646d922945004cb737918ef6b6d063bb3c2a4..a44863e9555abdaa569f309b1197fddc8dd244a5 100644
3 | --- a/index.js
4 | +++ b/index.js
5 | @@ -147,7 +147,7 @@ Hook.prototype.log = function log(lines, exit) {
6 | * @api private
7 | */
8 | Hook.prototype.initialize = function initialize() {
9 | - ['git', 'npm'].forEach(function each(binary) {
10 | + ['git', 'corepack'].forEach(function each(binary) {
11 | try { this[binary] = which.sync(binary); }
12 | catch (e) {}
13 | }, this);
14 | @@ -159,9 +159,9 @@ Hook.prototype.initialize = function initialize() {
15 | if (!this.npm) {
16 | try {
17 | process.env.PATH += path.delimiter + path.dirname(process.env._);
18 | - this.npm = which.sync('npm');
19 | + this.npm = which.sync('corepack');
20 | } catch (e) {
21 | - return this.log(this.format(Hook.log.binary, 'npm'), 0);
22 | + return this.log(this.format(Hook.log.binary, 'corepack'), 0);
23 | }
24 | }
25 |
26 | @@ -225,7 +225,7 @@ Hook.prototype.run = function runner() {
27 | // this doesn't have the required `isAtty` information that libraries use to
28 | // output colors resulting in script output that doesn't have any color.
29 | //
30 | - spawn(hooked.npm, ['run', script, '--silent'], {
31 | + spawn(hooked.npm, ['yarn', script], {
32 | env: process.env,
33 | cwd: hooked.root,
34 | stdio: [0, 1, 2]
35 |
--------------------------------------------------------------------------------
/examples/python-xhr/server.py:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env python3
2 | import os
3 | from flask import Flask, request, jsonify
4 | from werkzeug.utils import secure_filename
5 | from flask_cors import CORS
6 |
7 | UPLOAD_FOLDER = 'uploads'
8 | ALLOWED_EXTENSIONS = {'txt', 'pdf', 'png', 'jpg', 'jpeg', 'gif'}
9 |
10 | app = Flask(__name__)
11 | app.config['UPLOAD_FOLDER'] = os.path.join(os.path.dirname(__file__), UPLOAD_FOLDER)
12 | CORS(app)
13 |
14 | def allowed_file(filename):
15 | return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
16 |
17 | @app.route('/upload', methods=['POST'])
18 | def upload_file():
19 | if request.method == 'POST':
20 | uploaded_files = request.files.getlist('file')
21 | if not uploaded_files:
22 | return jsonify(error="No files in the request"), 400
23 |
24 | uploaded_filenames = []
25 | for file in uploaded_files:
26 | if file and allowed_file(file.filename):
27 | filename = secure_filename(file.filename)
28 | file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
29 | uploaded_filenames.append(filename)
30 |
31 | if uploaded_filenames:
32 | return jsonify(message="Files uploaded successfully", uploaded_files=uploaded_filenames), 201
33 | else:
34 | return jsonify(error="No valid files uploaded"), 400
35 |
36 | if __name__ == '__main__':
37 | app.run(port=3020)
38 |
--------------------------------------------------------------------------------
/packages/@ImgProcessor/angular/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "angular",
3 | "version": "0.0.0",
4 | "scripts": {
5 | "ng": "ng",
6 | "start": "ng serve",
7 | "build": "ng build",
8 | "watch": "ng build --watch --configuration development",
9 | "test": "ng test"
10 | },
11 | "private": true,
12 | "dependencies": {
13 | "@angular/animations": "^16.2.0",
14 | "@angular/common": "^16.2.0",
15 | "@angular/compiler": "^16.2.0",
16 | "@angular/core": "^16.2.0",
17 | "@angular/forms": "^16.2.0",
18 | "@angular/platform-browser": "^16.2.0",
19 | "@angular/platform-browser-dynamic": "^16.2.0",
20 | "@angular/router": "^16.2.0",
21 | "rxjs": "~7.8.0",
22 | "tslib": "^2.3.0",
23 | "zone.js": "~0.13.0"
24 | },
25 | "devDependencies": {
26 | "@angular-devkit/build-angular": "^16.2.0",
27 | "@angular-eslint/builder": "16.1.1",
28 | "@angular-eslint/eslint-plugin": "16.1.1",
29 | "@angular-eslint/eslint-plugin-template": "16.1.1",
30 | "@angular-eslint/schematics": "16.1.1",
31 | "@angular-eslint/template-parser": "16.1.1",
32 | "@angular/cli": "~16.2.0",
33 | "@angular/compiler-cli": "^16.2.0",
34 | "@types/jasmine": "~4.3.0",
35 | "@typescript-eslint/eslint-plugin": "5.62.0",
36 | "@typescript-eslint/parser": "5.62.0",
37 | "jasmine-core": "~4.6.0",
38 | "karma": "~6.4.0",
39 | "karma-chrome-launcher": "~3.2.0",
40 | "karma-coverage": "~2.2.0",
41 | "karma-jasmine": "~5.1.0",
42 | "karma-jasmine-html-reporter": "~2.1.0",
43 | "ng-packagr": "^16.2.0",
44 | "typescript": "~5.1"
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/packages/@ImgProcessor/audio/README.md:
--------------------------------------------------------------------------------
1 | # @uppy/audio
2 |
3 |
4 |
5 | 
6 |
7 | The Audio plugin for Uppy lets you record audio using a built-in or external microphone, or any other audio device, on desktop and mobile.
8 |
9 | Uppy is being developed by the folks at [Transloadit](https://transloadit.com), a versatile file encoding service.
10 |
11 | ## Example
12 |
13 | ```js
14 | import Uppy from '@uppy/core'
15 | import Audio from '@uppy/audio'
16 |
17 | const uppy = new Uppy()
18 | uppy.use(Audio)
19 | ```
20 |
21 | ## Installation
22 |
23 | ```bash
24 | $ npm install @uppy/audio
25 | ```
26 |
27 | Alternatively, you can also use this plugin in a pre-built bundle from Transloadit’s CDN: Edgly. In that case `Uppy` will attach itself to the global `window.Uppy` object. See the [main Uppy documentation](https://uppy.io/docs/#Installation) for instructions.
28 |
29 | ## Documentation
30 |
31 | Documentation for this plugin can be found on the [Uppy website](https://uppy.io/docs/webcam).
32 |
33 | ## License
34 |
35 | [The MIT License](./LICENSE).
36 |
--------------------------------------------------------------------------------
/Makefile:
--------------------------------------------------------------------------------
1 | # Licensed under MIT.
2 | # Copyright (2016) by Kevin van Zonneveld https://twitter.com/kvz
3 | #
4 | # https://www.npmjs.com/package/fakefile
5 | #
6 | # Please do not edit this file directly, but propose changed upstream instead:
7 | # https://github.com/kvz/fakefile/blob/master/Makefile
8 | #
9 | # This Makefile offers convience shortcuts into any Node.js project that utilizes npm scripts.
10 | # It functions as a wrapper around the actual listed in `package.json`
11 | # So instead of typing:
12 | #
13 | # $ npm script build:assets
14 | #
15 | # you could also type:
16 | #
17 | # $ make build-assets
18 | #
19 | # Notice that colons (:) are replaced by dashes for Makefile compatibility.
20 | #
21 | # The benefits of this wrapper are:
22 | #
23 | # - You get to keep the the scripts package.json, which is more portable
24 | # (Makefiles & Windows are harder to mix)
25 | # - Offer a polite way into the project for developers coming from different
26 | # languages (npm scripts is obviously very Node centric)
27 | # - Profit from better autocomplete (make
28 |
31 |
32 |
36 | )
37 | }
38 |
--------------------------------------------------------------------------------
/e2e/cypress/support/createFakeFile.ts:
--------------------------------------------------------------------------------
1 | declare global {
2 | namespace Cypress {
3 | interface Chainable {
4 | // eslint-disable-next-line no-use-before-define
5 | createFakeFile: typeof createFakeFile
6 | }
7 | }
8 | }
9 |
10 | interface File {
11 | source: string
12 | name: string
13 | type: string
14 | data: Blob
15 | }
16 |
17 | export function createFakeFile(
18 | name?: string,
19 | type?: string,
20 | b64?: string,
21 | ): File {
22 | if (!b64) {
23 | // eslint-disable-next-line no-param-reassign
24 | b64 =
25 | 'PHN2ZyB2aWV3Qm94PSIwIDAgMTIwIDEyMCI+CiAgPGNpcmNsZSBjeD0iNjAiIGN5PSI2MCIgcj0iNTAiLz4KPC9zdmc+Cg=='
26 | }
27 | // eslint-disable-next-line no-param-reassign
28 | if (!type) type = 'image/svg+xml'
29 |
30 | // https://stackoverflow.com/questions/16245767/creating-a-blob-from-a-base64-string-in-javascript
31 | function base64toBlob(base64Data: string, contentType = '') {
32 | const sliceSize = 1024
33 | const byteCharacters = atob(base64Data)
34 | const bytesLength = byteCharacters.length
35 | const slicesCount = Math.ceil(bytesLength / sliceSize)
36 | const byteArrays = new Array(slicesCount)
37 |
38 | for (let sliceIndex = 0; sliceIndex < slicesCount; ++sliceIndex) {
39 | const begin = sliceIndex * sliceSize
40 | const end = Math.min(begin + sliceSize, bytesLength)
41 |
42 | const bytes = new Array(end - begin)
43 | for (let offset = begin, i = 0; offset < end; ++i, ++offset) {
44 | bytes[i] = byteCharacters[offset].charCodeAt(0)
45 | }
46 | byteArrays[sliceIndex] = new Uint8Array(bytes)
47 | }
48 | return new Blob(byteArrays, { type: contentType })
49 | }
50 |
51 | const blob = base64toBlob(b64, type)
52 |
53 | return {
54 | source: 'test',
55 | name: name || 'test-file',
56 | type: blob.type,
57 | data: blob,
58 | }
59 | }
60 |
--------------------------------------------------------------------------------
/examples/custom-provider/client/MyCustomProvider.jsx:
--------------------------------------------------------------------------------
1 | /** @jsx h */
2 |
3 | import { UIPlugin } from '@ImgProcessor/core'
4 | import { Provider } from '@ImgProcessor/companion-client'
5 | import { ProviderViews } from '@ImgProcessor/provider-views'
6 | import { h } from 'preact'
7 |
8 | const defaultOptions = {}
9 |
10 | export default class MyCustomProvider extends UIPlugin {
11 | constructor (ImgProcessor, opts) {
12 | super(ImgProcessor, opts)
13 | this.type = 'acquirer'
14 | this.id = this.opts.id || 'MyCustomProvider'
15 | Provider.initPlugin(this, opts)
16 |
17 | this.icon = () => (
18 |
21 | )
22 |
23 | this.provider = new Provider(ImgProcessor, {
24 | companionUrl: this.opts.companionUrl,
25 | companionHeaders: this.opts.companionHeaders,
26 | provider: 'myunsplash',
27 | pluginId: this.id,
28 | })
29 |
30 | this.defaultLocale = {
31 | strings: {
32 | pluginNameMyUnsplash: 'MyUnsplash',
33 | },
34 | }
35 |
36 | // merge default options with the ones set by user
37 | this.opts = { ...defaultOptions, ...opts }
38 |
39 | this.i18nInit()
40 | this.title = this.i18n('pluginNameMyUnsplash')
41 |
42 | this.files = []
43 | }
44 |
45 | install () {
46 | this.view = new ProviderViews(this, {
47 | provider: this.provider,
48 | })
49 |
50 | const { target } = this.opts
51 | if (target) {
52 | this.mount(target, this)
53 | }
54 | }
55 |
56 | uninstall () {
57 | this.view.tearDown()
58 | this.unmount()
59 | }
60 |
61 | onFirstRender () {
62 | return this.view.getFolder()
63 | }
64 |
65 | render (state) {
66 | return this.view.render(state)
67 | }
68 | }
69 |
--------------------------------------------------------------------------------
/e2e/cypress/integration/dashboard-tus.spec.ts:
--------------------------------------------------------------------------------
1 | import {
2 | runRemoteUrlImageUploadTest,
3 | runRemoteUnsplashUploadTest,
4 | } from './reusable-tests'
5 |
6 | // NOTE: we have to use different files to upload per test
7 | // because we are uploading to https://tusd.tusdemo.net,
8 | // constantly uploading the same images gives a different cached result (or something).
9 | describe('Dashboard with Tus', () => {
10 | beforeEach(() => {
11 | cy.visit('/dashboard-tus')
12 | cy.get('.ImgProcessor-Dashboard-input:first').as('file-input')
13 | cy.intercept('/files/*').as('tus')
14 | cy.intercept({ method: 'POST', pathname: '/files' }).as('post')
15 | cy.intercept({ method: 'PATCH', pathname: '/files/*' }).as('patch')
16 | })
17 |
18 | it('should upload cat image successfully', () => {
19 | cy.get('@file-input').selectFile('cypress/fixtures/images/kit.jpg', {
20 | force: true,
21 | })
22 |
23 | cy.get('.ImgProcessor-StatusBar-actionBtn--upload').click()
24 | cy.wait(['@post', '@patch']).then(() => {
25 | cy.get('.ImgProcessor-StatusBar-statusPrimary').should('contain', 'Complete')
26 | })
27 | })
28 |
29 | it('should start exponential backoff when receiving HTTP 429', () => {
30 | cy.get('@file-input').selectFile('cypress/fixtures/images/monkey.png', {
31 | force: true,
32 | })
33 |
34 | cy.intercept(
35 | { method: 'PATCH', pathname: '/files/*', times: 2 },
36 | { statusCode: 429, body: {} },
37 | ).as('patch')
38 |
39 | cy.get('.ImgProcessor-StatusBar-actionBtn--upload').click()
40 | cy.wait('@tus').then(() => {
41 | cy.get('.ImgProcessor-StatusBar-statusPrimary').should('contain', 'Complete')
42 | })
43 | })
44 |
45 | it('should upload remote image with URL plugin', () => {
46 | runRemoteUrlImageUploadTest()
47 | })
48 |
49 | it('should upload remote image with Unsplash plugin', () => {
50 | runRemoteUnsplashUploadTest()
51 | })
52 | })
53 |
--------------------------------------------------------------------------------
/examples/bundled/sw.js:
--------------------------------------------------------------------------------
1 | // This service worker is needed for Golden Retriever plugin,
2 | // only include if you’ve enabled it
3 | // https://ImgProcessor.io/docs/golden-retriever/
4 |
5 | /* globals clients */
6 | /* eslint-disable no-restricted-globals */
7 |
8 | const fileCache = Object.create(null)
9 |
10 | function getCache (name) {
11 | if (!fileCache[name]) {
12 | fileCache[name] = Object.create(null)
13 | }
14 | return fileCache[name]
15 | }
16 |
17 | self.addEventListener('install', (event) => {
18 | console.log('Installing ImgProcessor Service Worker...')
19 |
20 | event.waitUntil(Promise.resolve()
21 | .then(() => self.skipWaiting()))
22 | })
23 |
24 | self.addEventListener('activate', (event) => {
25 | event.waitUntil(self.clients.claim())
26 | })
27 |
28 | function sendMessageToAllClients (msg) {
29 | clients.matchAll().then((clients) => {
30 | clients.forEach((client) => {
31 | client.postMessage(msg)
32 | })
33 | })
34 | }
35 |
36 | function addFile (store, file) {
37 | getCache(store)[file.id] = file.data
38 | console.log('Added file blob to service worker cache:', file.data)
39 | }
40 |
41 | function removeFile (store, fileID) {
42 | delete getCache(store)[fileID]
43 | console.log('Removed file blob from service worker cache:', fileID)
44 | }
45 |
46 | function getFiles (store) {
47 | sendMessageToAllClients({
48 | type: 'ImgProcessor/ALL_FILES',
49 | store,
50 | files: getCache(store),
51 | })
52 | }
53 |
54 | self.addEventListener('message', (event) => {
55 | switch (event.data.type) {
56 | case 'ImgProcessor/ADD_FILE':
57 | addFile(event.data.store, event.data.file)
58 | break
59 | case 'ImgProcessor/REMOVE_FILE':
60 | removeFile(event.data.store, event.data.fileID)
61 | break
62 | case 'ImgProcessor/GET_FILES':
63 | getFiles(event.data.store)
64 | break
65 |
66 | default: throw new Error('unreachable')
67 | }
68 | })
69 |
--------------------------------------------------------------------------------
/e2e/cypress/integration/dashboard-compressor.spec.ts:
--------------------------------------------------------------------------------
1 | function uglierBytes(text) {
2 | const KB = 2 ** 10
3 | const MB = KB * KB
4 |
5 | if (text.endsWith(' KB')) {
6 | return Number(text.slice(0, -3)) * KB
7 | }
8 |
9 | if (text.endsWith(' MB')) {
10 | return Number(text.slice(0, -3)) * MB
11 | }
12 |
13 | if (text.endsWith(' B')) {
14 | return Number(text.slice(0, -2))
15 | }
16 |
17 | throw new Error(
18 | `Not what the computer thinks a human-readable size string look like: ${text}`,
19 | )
20 | }
21 |
22 | describe('dashboard-compressor', () => {
23 | beforeEach(() => {
24 | cy.visit('/dashboard-compressor')
25 | cy.get('.ImgProcessor-Dashboard-input:first').as('file-input')
26 | })
27 |
28 | it('should compress images', () => {
29 | const sizeBeforeCompression = []
30 |
31 | cy.get('@file-input').selectFile(
32 | [
33 | 'cypress/fixtures/images/kit.jpg',
34 | 'cypress/fixtures/images/traffic.jpg',
35 | ],
36 | { force: true },
37 | )
38 |
39 | cy.get('.ImgProcessor-Dashboard-Item-statusSize').each((element) => {
40 | const text = element.text()
41 | sizeBeforeCompression.push(uglierBytes(text))
42 | })
43 |
44 | cy.window().then(({ ImgProcessor }) => {
45 | ImgProcessor.on('preprocess-complete', (file) => {
46 | expect(file.extension).to.equal('webp')
47 | expect(file.type).to.equal('image/webp')
48 |
49 | cy.get('.ImgProcessor-Dashboard-Item-statusSize').should((elements) => {
50 | expect(elements).to.have.length(sizeBeforeCompression.length)
51 |
52 | for (let i = 0; i < elements.length; i++) {
53 | expect(sizeBeforeCompression[i]).to.be.greaterThan(
54 | uglierBytes(elements[i].textContent),
55 | )
56 | }
57 | })
58 | })
59 |
60 | cy.get('.ImgProcessor-StatusBar-actionBtn--upload').click()
61 | })
62 | })
63 | })
64 |
--------------------------------------------------------------------------------
/e2e/cypress/integration/dashboard-ui.spec.ts:
--------------------------------------------------------------------------------
1 | describe('dashboard-ui', () => {
2 | beforeEach(() => {
3 | cy.visit('/dashboard-ui')
4 | cy.get('.ImgProcessor-Dashboard-input:first').as('file-input')
5 | cy.get('.ImgProcessor-Dashboard-AddFiles').as('drop-target')
6 | })
7 |
8 | it('should not throw when calling ImgProcessor.close()', () => {
9 | cy.get('@file-input').selectFile(
10 | [
11 | 'cypress/fixtures/images/kit.jpg',
12 | 'cypress/fixtures/images/traffic.jpg',
13 | ],
14 | { force: true },
15 | )
16 |
17 | cy.window().then(({ ImgProcessor }) => {
18 | expect(ImgProcessor.close()).to.not.throw
19 | })
20 | })
21 |
22 | it('should render thumbnails', () => {
23 | cy.get('@file-input').selectFile(
24 | [
25 | 'cypress/fixtures/images/kit.jpg',
26 | 'cypress/fixtures/images/traffic.jpg',
27 | ],
28 | { force: true },
29 | )
30 | cy.get('.ImgProcessor-Dashboard-Item-previewImg')
31 | .should('have.length', 2)
32 | .each((element) => expect(element).attr('src').to.include('blob:'))
33 | })
34 |
35 | it('should support drag&drop', () => {
36 | cy.get('@drop-target').selectFile(
37 | [
38 | 'cypress/fixtures/images/kit.jpg',
39 | 'cypress/fixtures/images/cat-symbolic-link',
40 | 'cypress/fixtures/images/cat-symbolic.jpg',
41 | 'cypress/fixtures/images/traffic.jpg',
42 | ],
43 | { action: 'drag-drop' },
44 | )
45 |
46 | cy.get('.ImgProcessor-Dashboard-Item').should('have.length', 4)
47 | cy.get('.ImgProcessor-Dashboard-Item-previewImg')
48 | .should('have.length', 3)
49 | .each((element) => expect(element).attr('src').to.include('blob:'))
50 | cy.window().then(({ ImgProcessor }) => {
51 | expect(
52 | JSON.stringify(ImgProcessor.getFiles().map((file) => file.meta.relativePath)),
53 | ).to.be.equal('[null,null,null,null]')
54 | })
55 | })
56 | })
57 |
--------------------------------------------------------------------------------
/.yarn/patches/preact-npm-10.10.0-dd04de05e8.patch:
--------------------------------------------------------------------------------
1 | diff --git a/debug/package.json b/debug/package.json
2 | index 054944f5478a0a5cf7b6b8791950c595f956157b..06a4fe2719605eb42c5ee795101c21cfd10b59ce 100644
3 | --- a/debug/package.json
4 | +++ b/debug/package.json
5 | @@ -9,6 +9,7 @@
6 | "umd:main": "dist/debug.umd.js",
7 | "source": "src/index.js",
8 | "license": "MIT",
9 | + "type": "module",
10 | "mangle": {
11 | "regex": "^(?!_renderer)^_"
12 | },
13 | diff --git a/devtools/package.json b/devtools/package.json
14 | index 09b04a77690bdfba01083939ff9eaf987dd50bcb..92c159fbb3cf312c6674202085fb237d6fb921ad 100644
15 | --- a/devtools/package.json
16 | +++ b/devtools/package.json
17 | @@ -10,6 +10,7 @@
18 | "source": "src/index.js",
19 | "license": "MIT",
20 | "types": "src/index.d.ts",
21 | + "type": "module",
22 | "peerDependencies": {
23 | "preact": "^10.0.0"
24 | },
25 | diff --git a/hooks/package.json b/hooks/package.json
26 | index 74807025bf3de273ebada2cd355428a2c972503d..98501726ffbfe55ffa09928e56a9dcafb9a348ff 100644
27 | --- a/hooks/package.json
28 | +++ b/hooks/package.json
29 | @@ -10,6 +10,7 @@
30 | "source": "src/index.js",
31 | "license": "MIT",
32 | "types": "src/index.d.ts",
33 | + "type": "module",
34 | "scripts": {
35 | "build": "microbundle build --raw",
36 | "dev": "microbundle watch --raw --format cjs",
37 | diff --git a/jsx-runtime/package.json b/jsx-runtime/package.json
38 | index 7a4027831223f16519a74e3028c34f2f8f5f011a..6b58d17dbacce81894467ef43c0a8e2435e388c4 100644
39 | --- a/jsx-runtime/package.json
40 | +++ b/jsx-runtime/package.json
41 | @@ -10,6 +10,7 @@
42 | "source": "src/index.js",
43 | "types": "src/index.d.ts",
44 | "license": "MIT",
45 | + "type": "module",
46 | "peerDependencies": {
47 | "preact": "^10.0.0"
48 | },
49 | diff --git a/package.json b/package.json
50 | index 60279c24a08b808ffbf7dc64a038272bddb6785d..088f35fb2c92f2e9b7248557857af2839988d1aa 100644
51 | --- a/package.json
52 | +++ b/package.json
53 | @@ -9,6 +9,7 @@
54 | "umd:main": "dist/preact.umd.js",
55 | "unpkg": "dist/preact.min.js",
56 | "source": "src/index.js",
57 | + "type": "module",
58 | "exports": {
59 | ".": {
60 | "types": "./src/index.d.ts",
61 |
--------------------------------------------------------------------------------
/e2e/cypress/integration/reusable-tests.ts:
--------------------------------------------------------------------------------
1 | /* global cy */
2 |
3 | const interceptCompanionUrlRequest = () =>
4 | cy
5 | .intercept({ method: 'POST', url: 'http://localhost:3020/url/get' })
6 | .as('url')
7 | export const interceptCompanionUrlMetaRequest = () =>
8 | cy
9 | .intercept({ method: 'POST', url: 'http://localhost:3020/url/meta' })
10 | .as('url-meta')
11 |
12 | export function runRemoteUrlImageUploadTest() {
13 | cy.get('[data-cy="Url"]').click()
14 | cy.get('.ImgProcessor-Url-input').type(
15 | 'https://raw.githubusercontent.com/transloadit/ImgProcessor/main/e2e/cypress/fixtures/images/cat.jpg',
16 | )
17 | cy.get('.ImgProcessor-Url-importButton').click()
18 | interceptCompanionUrlRequest()
19 | cy.get('.ImgProcessor-StatusBar-actionBtn--upload').click()
20 | cy.wait('@url').then(() => {
21 | cy.get('.ImgProcessor-StatusBar-statusPrimary').should('contain', 'Complete')
22 | })
23 | }
24 |
25 | export function runRemoteUnsplashUploadTest() {
26 | cy.get('[data-cy="Unsplash"]').click()
27 | cy.get('.ImgProcessor-SearchProvider-input').type('book')
28 | cy.intercept({
29 | method: 'GET',
30 | url: 'http://localhost:3020/search/unsplash/list?q=book',
31 | }).as('unsplash-list')
32 | cy.get('.ImgProcessor-SearchProvider-searchButton').click()
33 | cy.wait('@unsplash-list')
34 | // Test that the author link is visible
35 | cy.get('.ImgProcessor-ProviderBrowserItem')
36 | .first()
37 | .within(() => {
38 | cy.root().click()
39 | // We have hover states that show the author
40 | // but we don't have hover in e2e, so we focus after the click
41 | // to get the same effect. Also tests keyboard users this way.
42 | cy.get('input[type="checkbox"]').focus()
43 | cy.get('a').should('have.css', 'display', 'block')
44 | })
45 | cy.get('.ImgProcessor-c-btn-primary').click()
46 | cy.intercept({
47 | method: 'POST',
48 | url: 'http://localhost:3020/search/unsplash/get/*',
49 | }).as('unsplash-get')
50 | cy.get('.ImgProcessor-StatusBar-actionBtn--upload').click()
51 | cy.wait('@unsplash-get').then(() => {
52 | cy.get('.ImgProcessor-StatusBar-statusPrimary').should('contain', 'Complete')
53 | })
54 | }
55 |
--------------------------------------------------------------------------------
/packages/@ImgProcessor/angular/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # @uppy/angular
2 |
3 | ## 0.6.0
4 |
5 | Released: 2023-09-05
6 | Included in: Uppy v3.15.0
7 |
8 | - @uppy/angular: upgrade to Angular 16.x (Antoine du Hamel / #4642)
9 |
10 | ## 0.5.0
11 |
12 | Released: 2022-11-10
13 | Included in: Uppy v3.3.0
14 |
15 | - @uppy/angular,@uppy/utils: add `cause` support for `AbortError`s (Antoine du Hamel / #4198)
16 |
17 | ## 0.4.3
18 |
19 | Released: 2022-10-19
20 | Included in: Uppy v3.2.0
21 |
22 | - @uppy/angular: remove unnecessary `console.log` call (Antoine du Hamel / #4139)
23 |
24 | ## 0.4.2
25 |
26 | Released: 2022-09-25
27 | Included in: Uppy v3.1.0
28 |
29 | - @uppy/angular: Fix angular build error (Murderlon)
30 |
31 | ## 0.4.1
32 |
33 | Released: 2022-08-30
34 | Included in: Uppy v3.0.1
35 |
36 | - @uppy/angular: fix compiler warning (Antoine du Hamel / #4064)
37 | - @uppy/angular: fix peer dependencies (Antoine du Hamel / #4035)
38 |
39 | ## 0.4.0
40 |
41 | Released: 2022-08-22
42 | Included in: Uppy v3.0.0
43 |
44 | - @uppy/angular: upgrade to Angular 14 (Antoine du Hamel / #3997)
45 |
46 | ## 0.3.1
47 |
48 | Released: 2022-05-30
49 | Included in: Uppy v2.11.0
50 |
51 | - @uppy/angular,@uppy/audio,@uppy/aws-s3-multipart,@uppy/aws-s3,@uppy/box,@uppy/core,@uppy/dashboard,@uppy/drag-drop,@uppy/dropbox,@uppy/facebook,@uppy/file-input,@uppy/form,@uppy/golden-retriever,@uppy/google-drive,@uppy/image-editor,@uppy/informer,@uppy/instagram,@uppy/onedrive,@uppy/progress-bar,@uppy/react,@uppy/redux-dev-tools,@uppy/robodog,@uppy/screen-capture,@uppy/status-bar,@uppy/store-default,@uppy/store-redux,@uppy/thumbnail-generator,@uppy/transloadit,@uppy/tus,@uppy/unsplash,@uppy/url,@uppy/vue,@uppy/webcam,@uppy/xhr-upload,@uppy/zoom: doc: update bundler recommendation (Antoine du Hamel / #3763)
52 |
53 | ## 0.3.0
54 |
55 | Released: 2022-03-02
56 | Included in: Uppy v2.7.0
57 |
58 | - @uppy/angular: update ng version (Antoine du Hamel / #3503)
59 |
60 | ## 0.2.8
61 |
62 | Released: 2021-12-21
63 | Included in: Uppy v2.3.2
64 |
65 | - @uppy/angular,@uppy/companion,@uppy/svelte,@uppy/vue: add `.npmignore` files to ignore `.gitignore` when packing (Antoine du Hamel / #3380)
66 | - @uppy/angular: Fix module field in `package.json` (Merlijn Vos / #3365)
67 |
68 | ## 0.2.6
69 |
70 | Released: 2021-12-07
71 | Included in: Uppy v2.3.0
72 |
73 | - @uppy/angular: examples: update `angular-example` to Angular v13 (Antoine du Hamel / #3325)
74 |
--------------------------------------------------------------------------------
/e2e/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "e2e",
3 | "private": true,
4 | "author": "Merlijn Vos
3 |
57 |
58 |
59 |
97 |
98 |
99 |
100 |
101 |
102 |
112 |
--------------------------------------------------------------------------------
/examples/aws-nodejs/README.md:
--------------------------------------------------------------------------------
1 | # ImgProcessor + AWS S3 with Node.JS
2 |
3 | A simple and fully working example of ImgProcessor and AWS S3 storage with Node.js (and
4 | Express.js). It uses presigned URL at the backend level.
5 |
6 | ## AWS Configuration
7 |
8 | It's assumed that you are familiar with AWS, at least, with the storage service
9 | (S3) and users & policies (IAM).
10 |
11 | These instructions are **not fit for production** but tightening the security is
12 | out of the scope here.
13 |
14 | ### S3 Setup
15 |
16 | - Create new S3 bucket in AWS (e.g. `aws-nodejs`).
17 | - Add a bucket policy.
18 |
19 | ```json
20 | {
21 | "Version": "2012-10-17",
22 | "Statement": [
23 | {
24 | "Sid": "PublicAccess",
25 | "Effect": "Allow",
26 | "Principal": "*",
27 | "Action": "s3:GetObject",
28 | "Resource": "arn:aws:s3:::aws-nodejs/*"
29 | }
30 | ]
31 | }
32 | ```
33 |
34 | - Make the S3 bucket public.
35 | - Add CORS configuration.
36 |
37 | ```json
38 | [
39 | {
40 | "AllowedHeaders": ["*"],
41 | "AllowedMethods": ["GET", "PUT", "HEAD", "POST", "DELETE"],
42 | "AllowedOrigins": ["*"],
43 | "ExposeHeaders": []
44 | }
45 | ]
46 | ```
47 |
48 | ### AWS Credentials
49 |
50 | You may use existing AWS credentials or create a new user in the IAM page.
51 |
52 | - Make sure you setup the AWS credentials properly and write down the Access Key
53 | ID and Secret Access Key.
54 | - You may configure AWS S3 credentials using
55 | [environment variables](https://docs.aws.amazon.com/sdk-for-javascript/v3/developer-guide/loading-node-credentials-environment.html)
56 | or a
57 | [credentials file in `~/.aws/credentials`](https://docs.aws.amazon.com/sdk-for-javascript/v3/developer-guide/setting-credentials-node.html).
58 | - You will need at least `PutObject` and `PutObjectAcl` permissions.
59 |
60 | ```json
61 | {
62 | "Version": "2012-10-17",
63 | "Statement": [
64 | {
65 | "Sid": "VisualEditor0",
66 | "Effect": "Allow",
67 | "Action": ["s3:PutObject", "s3:PutObjectAcl"],
68 | "Resource": "arn:aws:s3:::aws-nodejs/*"
69 | }
70 | ]
71 | }
72 | ```
73 |
74 | ## Prerequisites
75 |
76 | Download this code or clone repository into a folder and install dependencies:
77 |
78 | ```sh
79 | CYPRESS_INSTALL_BINARY=0 corepack yarn install
80 | ```
81 |
82 | Add a `.env` file to the root directory and define the S3 bucket name and port
83 | variables like the example below:
84 |
85 | ```
86 | COMPANION_AWS_BUCKET=aws-nodejs
87 | COMPANION_AWS_REGION=…
88 | COMPANION_AWS_KEY=…
89 | COMPANION_AWS_SECRET=…
90 | PORT=8080
91 | ```
92 |
93 | N.B.: This example uses `COMPANION_AWS_` environnement variables to facilitate
94 | integrations with other examples in this repository, but this example does _not_
95 | uses Companion at all.
96 |
97 | ## Enjoy it
98 |
99 | Start the application:
100 |
101 | ```sh
102 | corepack yarn workspace @ImgProcessor-example/aws-nodejs start
103 | ```
104 |
105 | Dashboard demo should now be available at http://localhost:8080.
106 |
107 | You have also a Drag & Drop demo on http://localhost:8080/drag.
108 |
109 | _Feel free to check how the demo works and feel free to open an issue._
110 |
--------------------------------------------------------------------------------
/BUNDLE-README.md:
--------------------------------------------------------------------------------
1 | # ImgProcessor
2 |
3 | Note that the recommended way to use ImgProcessor is to install it with yarn/npm and use a
4 | bundler like Webpack so that you can create a smaller custom build with only the
5 | things that you need. More info on Welcome to ImgProcessor Vue Demo!
4 |Inline Dashboard
5 | 17 |Modal Dashboard
25 |
26 |
27 |
35 |
36 | Drag Drop Area
37 |Progress Bar
50 |
23 |
26 |
27 |
28 |
56 | ```
57 |
58 | Now open `start.html` in your browser, and the ImgProcessor Dashboard will appear.
59 |
60 | ## Next steps
61 |
62 | In the example you built, ImgProcessor uploads to a demo server shortly after uploading.
63 | You’ll want to target your own tusd server, S3 bucket, or Nginx/Apache server. For the latter, use the Xhr plugin: Uploaded files:
24 |
16 |
19 |
102 | Uploaded files:
17 |
59 |
63 | ` : e(value)
64 |
65 | return `
66 |
60 | ${e(value)}
61 |
62 | Form Fields
75 |-
76 | ${Object.entries(fields).map(Field).join('\n')}
77 |
-
88 | ${uploads.map(Upload).join('\n')}
89 |
${e(stepName)}
101 |-
102 | ${results[stepName].map(Result).join('\n')}
103 |
${e(assembly.assembly_id)} (${e(assembly.ok)})
115 | ${UploadsList(assembly.uploads)} 116 | ${ResultsList(assembly.results)} 117 | ` 118 | } 119 | 120 | function onrequest (req, res) { 121 | if (req.url !== '/test') { 122 | res.writeHead(404, { 'content-type': 'text/html' }) 123 | res.end('404') 124 | return 125 | } 126 | 127 | function onbody (body) { 128 | const fields = qs.parse(body) 129 | const result = JSON.parse(fields.ImgProcessorResult) 130 | const assemblies = result[0].transloadit 131 | 132 | res.setHeader('content-type', 'text/html') 133 | res.write(Header()) 134 | res.write(FormFields(fields)) 135 | assemblies.forEach((assembly) => { 136 | res.write(AssemblyResult(assembly)) 137 | }) 138 | res.end(Footer()) 139 | } 140 | 141 | { 142 | let body = '' 143 | req.on('data', (chunk) => { body += chunk }) 144 | req.on('end', () => { 145 | onbody(body) 146 | }) 147 | } 148 | } 149 | 150 | /** 151 | * A very haxxor server that outputs some of the data it receives in a POST form parameter. 152 | */ 153 | 154 | const server = http.createServer(onrequest) 155 | server.listen(9967) 156 | -------------------------------------------------------------------------------- /bin/build-lib.js: -------------------------------------------------------------------------------- 1 | const babel = require('@babel/core') 2 | const t = require('@babel/types') 3 | const { promisify } = require('node:util') 4 | const glob = promisify(require('glob')) 5 | const fs = require('node:fs') 6 | const path = require('node:path') 7 | 8 | const { mkdir, stat, writeFile } = fs.promises 9 | 10 | const PACKAGE_JSON_IMPORT = /^\..*\/package.json$/ 11 | const SOURCE = 'packages/{*,@ImgProcessor/*}/src/**/*.{js,ts}?(x)' 12 | const IGNORE = /\.test\.[jt]s$|__mocks__|svelte|angular|companion\// 13 | const META_FILES = [ 14 | 'babel.config.js', 15 | 'package.json', 16 | 'package-lock.json', 17 | 'yarn.lock', 18 | 'bin/build-lib.js', 19 | ] 20 | 21 | function lastModified (file, createParentDir = false) { 22 | return stat(file).then((s) => s.mtime, async (err) => { 23 | if (err.code === 'ENOENT') { 24 | if (createParentDir) { 25 | await mkdir(path.dirname(file), { recursive: true }) 26 | } 27 | return 0 28 | } 29 | throw err 30 | }) 31 | } 32 | 33 | const versionCache = new Map() 34 | 35 | async function preparePack (file) { 36 | const packageFolder = file.slice(0, file.indexOf('/src/')) 37 | if (versionCache.has(packageFolder)) return 38 | 39 | // eslint-disable-next-line import/no-dynamic-require, global-require 40 | const { version } = require(path.join(__dirname, '..', packageFolder, 'package.json')) 41 | if (process.env.FRESH) { 42 | // in case it hasn't been done before. 43 | await mkdir(path.join(packageFolder, 'lib'), { recursive: true }) 44 | } 45 | versionCache.set(packageFolder, version) 46 | } 47 | 48 | const nonJSImport = /^\.\.?\/.+\.([jt]sx|ts)$/ 49 | // eslint-disable-next-line no-shadow 50 | function rewriteNonJSImportsToJS (path) { 51 | const match = nonJSImport.exec(path.node.source.value) 52 | if (match) { 53 | // eslint-disable-next-line no-param-reassign 54 | path.node.source.value = `${match[0].slice(0, -match[1].length)}js` 55 | } 56 | } 57 | 58 | async function buildLib () { 59 | const metaMtimes = await Promise.all(META_FILES.map((filename) => lastModified(path.join(__dirname, '..', filename)))) 60 | const metaMtime = Math.max(...metaMtimes) 61 | 62 | const files = await glob(SOURCE) 63 | /* eslint-disable no-continue */ 64 | for (const file of files) { 65 | if (IGNORE.test(file)) { 66 | continue 67 | } 68 | await preparePack(file) 69 | const libFile = file.replace('/src/', '/lib/').replace(/\.[jt]sx?$/, '.js') 70 | 71 | // on a fresh build, rebuild everything. 72 | if (!process.env.FRESH) { 73 | const [srcMtime, libMtime] = await Promise.all([ 74 | lastModified(file), 75 | lastModified(libFile, true), 76 | ]) 77 | if (srcMtime < libMtime && metaMtime < libMtime) { 78 | continue 79 | } 80 | } 81 | 82 | const plugins = [{ 83 | visitor: { 84 | // eslint-disable-next-line no-shadow 85 | ImportDeclaration (path) { 86 | rewriteNonJSImportsToJS(path) 87 | if (PACKAGE_JSON_IMPORT.test(path.node.source.value) 88 | && path.node.specifiers.length === 1 89 | && path.node.specifiers[0].type === 'ImportDefaultSpecifier') { 90 | const version = versionCache.get(file.slice(0, file.indexOf('/src/'))) 91 | if (version != null) { 92 | const [{ local }] = path.node.specifiers 93 | path.replaceWith( 94 | t.variableDeclaration('const', [t.variableDeclarator(local, 95 | t.objectExpression([ 96 | t.objectProperty(t.stringLiteral('version'), t.stringLiteral(version)), 97 | ]))]), 98 | ) 99 | } 100 | } 101 | }, 102 | 103 | ExportAllDeclaration: rewriteNonJSImportsToJS, 104 | }, 105 | }] 106 | const isTSX = file.endsWith('.tsx') 107 | if (isTSX || file.endsWith('.ts')) { plugins.push(['@babel/plugin-transform-typescript', { disallowAmbiguousJSXLike: true, isTSX, jsxPragma: 'h' }]) } 108 | 109 | const { code, map } = await babel.transformFileAsync(file, { sourceMaps: true, plugins }) 110 | const [{ default: chalk }] = await Promise.all([ 111 | import('chalk'), 112 | writeFile(libFile, code), 113 | writeFile(`${libFile}.map`, JSON.stringify(map)), 114 | ]) 115 | console.log(chalk.green('Compiled lib:'), chalk.magenta(libFile)) 116 | } 117 | /* eslint-enable no-continue */ 118 | } 119 | 120 | console.log('Using Babel version:', require('@babel/core/package.json').version) 121 | 122 | buildLib().catch((err) => { 123 | console.error(err) 124 | process.exit(1) 125 | }) 126 | -------------------------------------------------------------------------------- /examples/transloadit/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
38 | ImgProcessor Transloadit
39 | 
44 | playground
45 |
46 | 47 | This page contains small examples for different ways you can use ImgProcessor 48 | with Transloadit. Please see the 49 | Github repository 53 | for the source code. 54 |
55 |56 |
Form
57 | 58 |59 | The form API allows you to easily send files through Transloadit’s 60 | encoding backend. When the user submits the form, any files are uploaded 61 | to Transloadit. The form data is then sent to your own backend, with 62 | additional data about the Transloadit Assemblies that were started. 63 |
64 | 92 | 93 |94 |
Form with inline Dashboard
95 | 96 |You can also use the Dashboard UI inside a plain old HTML form.
97 | 126 | 127 |128 |
Inline Dashboard
129 |
130 | The robodog.dashboard API allows you to embed a Dashboard
131 | at any location. Users can continuously upload files through this UI, so
132 | please make sure this fits your use case!
133 |
137 |
Dashboard Modal
138 | 139 |140 | This API is a one-shot upload UI using a modal overlay. Call the 141 | function and receive a listen to an event with upload results ✌️ 142 |
143 | 144 | 145 |ImgProcessor.upload()
146 |An <input type=file> backed by ImgProcessor.upload():
148 | 149 |
150 | 151 | 152 |
153 |
163 |
164 |
165 |