A counter
11 |
12 |
20 | 13 | Clicked: 0 times 14 | 15 | 16 | 17 | 18 |
19 |Welcome to the @petProj/svelte demo!
25 | Inline Dashboard
26 | 33 | {#if showInlineDashboard} 34 |Modal Dashboard
40 |
41 |
42 | open = false,
47 | plugins: ['Webcam']
48 | }}
49 | />
50 |
51 |
52 | Drag Drop Area
53 |Progress Bar
58 |petProj Angular Example!
15 |Inline dashboard
16 | 24 | 25 |Modal Dashboard
32 |
33 |
38 |
41 |
42 |
43 | Drag Drop Area
44 |Progress Bar
47 |
7 |
8 |
62 |
63 |
64 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
111 |
--------------------------------------------------------------------------------
/axamples/redux/main.js:
--------------------------------------------------------------------------------
1 | import { compose, combineReducers, applyMiddleware } from 'redux'
2 | import { configureStore } from '@reduxjs/toolkit'
3 | import logger from 'redux-logger'
4 | import petProj from '@petProj/core'
5 | import ReduxStore from '@petProj/store-redux'
6 | import * as petProjReduxStore from '@petProj/store-redux'
7 | import Dashboard from '@petProj/dashboard'
8 | import Tus from '@petProj/tus'
9 |
10 | import '@petProj/core/dist/style.css'
11 | import '@petProj/dashboard/dist/style.css'
12 |
13 | function counter (state = 0, action) {
14 | switch (action.type) {
15 | case 'INCREMENT':
16 | return state + 1
17 | case 'DECREMENT':
18 | return state - 1
19 | default:
20 | return state
21 | }
22 | }
23 |
24 | const reducer = combineReducers({
25 | counter,
26 | // You don't have to use the `petProj` key. But if you don't,
27 | // you need to provide a custom `selector` to the `petProjReduxStore` call below.
28 | petProj: petProjReduxStore.reducer,
29 | })
30 |
31 | let enhancer = applyMiddleware(
32 | petProjReduxStore.middleware(),
33 | logger,
34 | )
35 | if (typeof __REDUX_DEVTOOLS_EXTENSION__ !== 'undefined') {
36 | // eslint-disable-next-line no-undef
37 | enhancer = compose(enhancer, __REDUX_DEVTOOLS_EXTENSION__())
38 | }
39 |
40 | const store = configureStore({
41 | reducer,
42 | enhancers: [enhancer],
43 | middleware: (getDefaultMiddleware) => getDefaultMiddleware({
44 | serializableCheck: {
45 | ignoredActions: [petProjReduxStore.STATE_UPDATE],
46 | ignoreState: true,
47 | },
48 | }),
49 | })
50 |
51 | // Counter example from https://github.com/reactjs/redux/blob/master/examples/counter-vanilla/index.html
52 | const valueEl = document.querySelector('#value')
53 |
54 | function getCounter () { return store.getState().counter }
55 | function render () {
56 | valueEl.innerHTML = getCounter().toString()
57 | }
58 | render()
59 | store.subscribe(render)
60 |
61 | document.querySelector('#increment').onclick = () => {
62 | store.dispatch({ type: 'INCREMENT' })
63 | }
64 | document.querySelector('#decrement').onclick = () => {
65 | store.dispatch({ type: 'DECREMENT' })
66 | }
67 | document.querySelector('#incrementIfOdd').onclick = () => {
68 | if (getCounter() % 2 !== 0) {
69 | store.dispatch({ type: 'INCREMENT' })
70 | }
71 | }
72 | document.querySelector('#incrementAsync').onclick = () => {
73 | setTimeout(() => store.dispatch({ type: 'INCREMENT' }), 1000)
74 | }
75 |
76 | // petProj using the same store
77 | const petProj = new petProj({
78 | id: 'redux',
79 | store: new ReduxStore({ store }),
80 | // If we had placed our `reducer` elsewhere in Redux, eg. under an `petProj` key in the state for a profile page,
81 | // we'd do something like:
82 | //
83 | // store: new ReduxStore({
84 | // store: store,
85 | // id: 'avatar',
86 | // selector: state => state.pages.profile.petProj
87 | // }),
88 | debug: true,
89 | })
90 | petProj.use(Dashboard, {
91 | target: '#app',
92 | inline: true,
93 | width: 400,
94 | })
95 | petProj.use(Tus, { endpoint: 'https://tusd.tusdemo.net/files/' })
96 |
--------------------------------------------------------------------------------
/axamples/vue/src/App.vue:
--------------------------------------------------------------------------------
1 |
2 | Welcome to petProj Vue Demo!
9 |Inline Dashboard
10 | 22 |Modal Dashboard
30 |
31 |
32 |
40 |
41 | Drag Drop Area
42 |Progress Bar
55 |
3 |
57 |
58 |
59 |
97 |
98 |
99 |
100 |
101 |
102 |
112 |
--------------------------------------------------------------------------------
/axamples/angular-example/angular.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3 | "version": 1,
4 | "newProjectRoot": "projects",
5 | "projects": {
6 | "angular-example": {
7 | "projectType": "application",
8 | "schematics": {},
9 | "root": "",
10 | "sourceRoot": "src",
11 | "prefix": "app",
12 | "architect": {
13 | "build": {
14 | "builder": "@angular-devkit/build-angular:browser",
15 | "options": {
16 | "outputPath": "dist/angular-example",
17 | "index": "src/index.html",
18 | "main": "src/main.ts",
19 | "polyfills": ["zone.js"],
20 | "tsConfig": "tsconfig.app.json",
21 | "assets": ["src/favicon.ico", "src/assets"],
22 | "styles": ["src/styles.css"],
23 | "scripts": []
24 | },
25 | "configurations": {
26 | "production": {
27 | "budgets": [
28 | {
29 | "type": "initial",
30 | "maximumWarning": "500kb",
31 | "maximumError": "1mb"
32 | },
33 | {
34 | "type": "anyComponentStyle",
35 | "maximumWarning": "2kb",
36 | "maximumError": "4kb"
37 | }
38 | ],
39 | "outputHashing": "all"
40 | },
41 | "development": {
42 | "buildOptimizer": false,
43 | "optimization": false,
44 | "vendorChunk": true,
45 | "extractLicenses": false,
46 | "sourceMap": true,
47 | "namedChunks": true
48 | }
49 | },
50 | "defaultConfiguration": "production"
51 | },
52 | "serve": {
53 | "builder": "@angular-devkit/build-angular:dev-server",
54 | "configurations": {
55 | "production": {
56 | "browserTarget": "angular-example:build:production"
57 | },
58 | "development": {
59 | "browserTarget": "angular-example:build:development"
60 | }
61 | },
62 | "defaultConfiguration": "development"
63 | },
64 | "extract-i18n": {
65 | "builder": "@angular-devkit/build-angular:extract-i18n",
66 | "options": {
67 | "browserTarget": "angular-example:build"
68 | }
69 | },
70 | "test": {
71 | "builder": "@angular-devkit/build-angular:karma",
72 | "options": {
73 | "polyfills": ["zone.js", "zone.js/testing"],
74 | "tsConfig": "tsconfig.spec.json",
75 | "assets": ["src/favicon.ico", "src/assets"],
76 | "styles": ["src/styles.css"],
77 | "scripts": []
78 | }
79 | },
80 | "lint": {
81 | "builder": "@angular-eslint/builder:lint",
82 | "options": {
83 | "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
84 | }
85 | }
86 | }
87 | }
88 | },
89 | "cli": {
90 | "schematicCollections": ["@angular-eslint/schematics"]
91 | }
92 | }
93 |
--------------------------------------------------------------------------------
/.env.example:
--------------------------------------------------------------------------------
1 | # Clone this file to `.env` and edit the clone.
2 |
3 | NODE_ENV=development
4 |
5 | # Companion
6 | # =======================
7 | COMPANION_DATADIR=./output
8 | COMPANION_DOMAIN=localhost:3020
9 | COMPANION_PROTOCOL=http
10 | COMPANION_PORT=3020
11 | COMPANION_CLIENT_ORIGINS=
12 | COMPANION_SECRET=development
13 | COMPANION_PREAUTH_SECRET=development2
14 |
15 | # NOTE: Only enable this in development. Enabling it in production is a security risk
16 | COMPANION_ALLOW_LOCAL_URLS=true
17 |
18 | # to enable S3
19 | COMPANION_AWS_KEY="YOUR AWS KEY"
20 | COMPANION_AWS_SECRET="YOUR AWS SECRET"
21 | # specifying a secret file will override a directly set secret
22 | # COMPANION_AWS_SECRET_FILE="PATH/TO/AWS/SECRET/FILE"
23 | COMPANION_AWS_BUCKET="YOUR AWS S3 BUCKET"
24 | COMPANION_AWS_REGION="AWS REGION"
25 | COMPANION_AWS_PREFIX="OPTIONAL PREFIX"
26 | # to enable S3 Transfer Acceleration (default: false)
27 | # COMPANION_AWS_USE_ACCELERATE_ENDPOINT="false"
28 | # to set X-Amz-Expires query param in presigned urls (in seconds, default: 800)
29 | # COMPANION_AWS_EXPIRES="800"
30 | # to set a canned ACL for uploaded objects: https://docs.aws.amazon.com/AmazonS3/latest/dev/acl-overview.html#canned-acl
31 | # COMPANION_AWS_ACL="public-read"
32 |
33 | COMPANION_BOX_KEY=***
34 | COMPANION_BOX_SECRET=***
35 |
36 | COMPANION_DROPBOX_KEY=***
37 | COMPANION_DROPBOX_SECRET=***
38 |
39 | COMPANION_GOOGLE_KEY=***
40 | COMPANION_GOOGLE_SECRET=***
41 |
42 | COMPANION_INSTAGRAM_KEY=***
43 | COMPANION_INSTAGRAM_SECRET=***
44 |
45 | COMPANION_FACEBOOK_KEY=***
46 | COMPANION_FACEBOOK_SECRET=***
47 |
48 | COMPANION_ZOOM_KEY=***
49 | COMPANION_ZOOM_SECRET=***
50 |
51 | COMPANION_UNSPLASH_KEY=***
52 | COMPANION_UNSPLASH_SECRET=***
53 |
54 | COMPANION_ONEDRIVE_KEY=***
55 | COMPANION_ONEDRIVE_SECRET=****
56 |
57 | # To test dynamic Oauth against local companion (which is pointless but allows us to test it without Transloadit's servers), enable these:
58 | #COMPANION_GOOGLE_KEYS_ENDPOINT=http://localhost:3020/drive/test-dynamic-oauth-credentials?secret=development
59 | #COMPANION_TEST_DYNAMIC_OAUTH_CREDENTIALS=true
60 | #COMPANION_TEST_DYNAMIC_OAUTH_CREDENTIALS_SECRET=development
61 |
62 |
63 | # Development environment
64 | # =======================
65 |
66 | VITE_UPLOADER=tus
67 | # VITE_UPLOADER=s3
68 | # VITE_UPLOADER=s3-multipart
69 | # xhr will use protocol 'multipart' in companion, if used with a remote service, e.g. google drive.
70 | # If local upload will use browser XHR
71 | # VITE_UPLOADER=xhr
72 | # VITE_UPLOADER=transloadit
73 | # VITE_UPLOADER=transloadit-s3
74 | # VITE_UPLOADER=transloadit-xhr
75 |
76 | VITE_COMPANION_URL=http://localhost:3020
77 | # See also Transloadit.COMPANION_PATTERN
78 | VITE_COMPANION_ALLOWED_HOSTS="\.transloadit\.com$"
79 | VITE_TUS_ENDPOINT=https://tusd.tusdemo.net/files/
80 | VITE_XHR_ENDPOINT=https://xhr-server.herokuapp.com/upload
81 |
82 | # If you want to test dynamic Oauth
83 | # VITE_COMPANION_GOOGLE_DRIVE_KEYS_PARAMS_CREDENTIALS_NAME=companion-google-drive
84 |
85 | VITE_TRANSLOADIT_KEY=***
86 | VITE_TRANSLOADIT_TEMPLATE=***
87 | VITE_TRANSLOADIT_SERVICE_URL=https://api2.transloadit.com
88 | # Fill in if you want requests sent to Transloadit to be signed:
89 | # VITE_TRANSLOADIT_SECRET=***
90 |
--------------------------------------------------------------------------------
/BUNDLE-README.md:
--------------------------------------------------------------------------------
1 | # petProj
2 |
3 | Note that the recommended way to use petProj 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 petProj 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 petProj Dashboard will appear.
59 |
60 | ## Next steps
61 |
62 | In the example you built, petProj 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 |
52 |
112 | )
113 | }
114 | }
115 |
--------------------------------------------------------------------------------
/axamples/transloadit/server.js:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env node
2 |
3 | /* eslint-disable compat/compat */
4 | import http from 'node:http'
5 | import qs from 'node:querystring'
6 | import he from 'he'
7 |
8 | const e = he.encode
9 |
10 | function Header () {
11 | return `
12 |
13 |
14 |
15 |
25 |
26 |
27 | React Examples
53 | 54 |Inline Dashboard
55 | 67 | {showInlineDashboard && ( 68 |Modal Dashboard
78 |
79 |
82 | this.setState({ open: false })}
87 | />
88 |
89 |
90 | Drag Drop Area
91 |Progress Bar
102 |File Input
108 |
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.petProjResult) 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 | -------------------------------------------------------------------------------- /axamples/transloadit-markdown-bin/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 115 | 116 | 117 |Markdown Bin
119 |122 | Markdown Bin is a demo app that works a bit like Github Gists or 123 | pastebin. You can add markdown snippets, and add file attachments to 124 | each snippet by clicking "Upload an attachment" or by dragging files 125 | onto the text area. Transloadit generates an inline preview image for 126 | images, videos, and audio files. 127 | » View the Assembly Template here. 132 |
133 | 134 |135 | ⚠️ For this demo, snippets are stored locally in your browser. 136 | Attachments are stored in Transloadit's temporary storage and expire 137 | after about 24 hours. In a real app, you can easily export files to a 138 | permanent storage solution like Amazon S3 or Google Cloud. 139 | » Learn more 144 |
145 | 146 | 159 | 160 |Previous snippets
161 | 162 | 163 |
166 |
167 |
168 |
169 |
170 |
171 |
172 |
173 |
174 |
--------------------------------------------------------------------------------
/axamples/react-native-expo/App.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState, useCallback } from 'react'
2 | import { Text, View, Image, StyleSheet } from 'react-native'
3 | import AsyncStorage from '@react-native-async-storage/async-storage'
4 | import petProj from '@petProj/core'
5 | import Tus from '@petProj/tus'
6 | import FilePicker from '@petProj/react-native'
7 | import usepetProj from '@petProj/react/lib/usepetProj'
8 | import FileList from './FileList'
9 | import PauseResumeButton from './PauseResumeButton'
10 | import ProgressBar from './ProgressBar'
11 | import SelectFiles from './SelectFilesButton'
12 | import getTusFileReader from './tusFileReader'
13 |
14 | export default function App () {
15 | const [state, _setState] = useState({
16 | progress: 0,
17 | total: 0,
18 | file: null,
19 | uploadURL: null,
20 | isFilePickerVisible: false,
21 | isPaused: false,
22 | uploadStarted: false,
23 | uploadComplete: false,
24 | info: null,
25 | totalProgress: 0,
26 | })
27 |
28 | const setState = useCallback((newState) => _setState((oldState) => ({ ...oldState, ...newState })), [])
29 |
30 | const petProj = usepetProj(() => {
31 | return new petProj({ autoProceed: true, debug: true })
32 | .use(Tus, {
33 | endpoint: 'https://tusd.tusdemo.net/files/',
34 | urlStorage: AsyncStorage,
35 | fileReader: getTusFileReader,
36 | chunkSize: 10 * 1024 * 1024, // keep the chunk size small to avoid memory exhaustion
37 | })
38 | })
39 |
40 | useEffect(() => {
41 | petProj.on('upload-progress', (file, progress) => {
42 | setState({
43 | progress: progress.bytesUploaded,
44 | total: progress.bytesTotal,
45 | totalProgress: petProj.state.totalProgress,
46 | uploadStarted: true,
47 | })
48 | })
49 | petProj.on('upload-success', () => {
50 | // console.log(file.name, response)
51 | })
52 | petProj.on('complete', (result) => {
53 | setState({
54 | status: result.successful[0] ? 'Upload complete ✅' : 'Upload errored ❌',
55 | uploadURL: result.successful[0] ? result.successful[0].uploadURL : null,
56 | uploadComplete: true,
57 | uploadStarted: false,
58 | })
59 | console.log('Upload complete:', result)
60 | })
61 | petProj.on('info-visible', () => {
62 | const { info } = petProj.getState()
63 | setState({
64 | info,
65 | })
66 | console.log('petProj-info:', info)
67 | })
68 | petProj.on('info-hidden', () => {
69 | setState({
70 | info: null,
71 | })
72 | })
73 | }, [setState, petProj])
74 |
75 | const showFilePicker = () => {
76 | setState({
77 | isFilePickerVisible: true,
78 | uploadStarted: false,
79 | uploadComplete: false,
80 | })
81 | }
82 |
83 | const hideFilePicker = () => {
84 | setState({
85 | isFilePickerVisible: false,
86 | })
87 | }
88 |
89 | const togglePauseResume = () => {
90 | if (state.isPaused) {
91 | petProj.resumeAll()
92 | setState({
93 | isPaused: false,
94 | })
95 | } else {
96 | petProj.pauseAll()
97 | setState({
98 | isPaused: true,
99 | })
100 | }
101 | }
102 |
103 | return (
104 |
38 | petProj Transloadit
39 | 
44 | playground
45 |
46 | 47 | This page contains small examples for different ways you can use petProj 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 |petProj.upload()
146 |An <input type=file> backed by petProj.upload():
148 | 149 |
150 | 151 | 152 |
153 |
163 |
164 |
165 |