diff --git a/.eslintrc.js b/.eslintrc.js index e4782f9f4..ab105c36f 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,70 +1,70 @@ module.exports = { - parserOptions: { - sourceType: 'module', - ecmaVersion: 2022, - jsx: false, - }, - env: { node: false }, - plugins: ['@docusaurus', 'markdown', 'mdx'], - extends: [ - 'plugin:@docusaurus/recommended', - 'plugin:@typescript-eslint/recommended', - ], - rules: { - '@typescript-eslint/no-var-requires': 'off', - '@typescript-eslint/no-unused-vars': 'off', - }, - overrides: [ - { - files: ['./*.js'], - parserOptions: { - sourceType: 'script', - }, - env: { - node: true, - }, - }, - { - files: ['**/*.md', '*.md'], - processor: 'markdown/markdown', - }, - { - files: ['**/*.mdx', '*.mdx'], - extends: 'plugin:mdx/recommended', - }, - { - files: ['**/*.md/*.js', '**/*.mdx/*.js'], - env: { - node: false, - browser: true, - }, - }, - { - files: [ - '**/*.ts', - '**/*.tsx', - '**/*.md/*.ts', - '**/*.mdx/*.ts', - '**/*.md/*.tsx', - '**/*.mdx/*.tsx', - ], - parser: '@typescript-eslint/parser', - plugins: ['@typescript-eslint'], - }, - { - files: [ - '**/*.jsx', - '**/*.tsx', - '**/*.md/*.jsx', - '**/*.mdx/*.jsx', - '**/*.md/*.tsx', - '**/*.mdx/*.tsx', - ], - parserOptions: { - ecmaFeatures: { - jsx: true, - }, - }, - }, - ], + parserOptions: { + sourceType: 'module', + ecmaVersion: 2022, + jsx: false, + }, + env: { node: false }, + plugins: ['@docusaurus', 'markdown', 'mdx'], + extends: [ + 'plugin:@docusaurus/recommended', + 'plugin:@typescript-eslint/recommended', + ], + rules: { + '@typescript-eslint/no-var-requires': 'off', + '@typescript-eslint/no-unused-vars': 'off', + }, + overrides: [ + { + files: ['./*.js'], + parserOptions: { + sourceType: 'script', + }, + env: { + node: true, + }, + }, + { + files: ['**/*.md', '*.md'], + processor: 'markdown/markdown', + }, + { + files: ['**/*.mdx', '*.mdx'], + extends: 'plugin:mdx/recommended', + }, + { + files: ['**/*.md/*.js', '**/*.mdx/*.js'], + env: { + node: false, + browser: true, + }, + }, + { + files: [ + '**/*.ts', + '**/*.tsx', + '**/*.md/*.ts', + '**/*.mdx/*.ts', + '**/*.md/*.tsx', + '**/*.mdx/*.tsx', + ], + parser: '@typescript-eslint/parser', + plugins: ['@typescript-eslint'], + }, + { + files: [ + '**/*.jsx', + '**/*.tsx', + '**/*.md/*.jsx', + '**/*.mdx/*.jsx', + '**/*.md/*.tsx', + '**/*.mdx/*.tsx', + ], + parserOptions: { + ecmaFeatures: { + jsx: true, + }, + }, + }, + ], }; diff --git a/.prettierrc.js b/.prettierrc.js index 1fe542d8e..a56c8b5d7 100644 --- a/.prettierrc.js +++ b/.prettierrc.js @@ -1,6 +1,6 @@ module.exports = { - proseWrap: 'always', - singleQuote: true, - trailingComma: 'all', - useTabs: true, + proseWrap: 'always', + singleQuote: true, + trailingComma: 'all', + useTabs: false, }; diff --git a/.remarkrc.mjs b/.remarkrc.mjs index 339c628a7..2be46f5a0 100644 --- a/.remarkrc.mjs +++ b/.remarkrc.mjs @@ -35,108 +35,108 @@ import retextSimplify from 'retext-simplify'; import retextSyntaxMentions from 'retext-syntax-mentions'; const retextPreset = [ - remarkRetext, - unified() - .use(retextEnglish) - .use(retextEquality, { - ignore: [ - 'disabled', - 'host', - 'hosts', - 'invalid', - 'whitespace', - 'of course', - 'just', - 'simple', - 'simply', - ], - }) - .use(retextProfanities, { sureness: 1 }) - .use(retextQuotes) - .use(retextSimplify, { - ignore: [ - 'accurate', - 'address', - 'alternatively', - 'component', - 'equivalent', - 'frequently', - 'function', - 'identify', - 'implement', - 'initial', - 'interface', - 'maintain', - 'maximum', - 'minimum', - 'option', - 'parameters', - 'provide', - 'render', - 'request', - 'selection', - 'submit', - 'type', - 'validate', - 'however', - 'there is', - 'forward', - 'initiate', - 'additional', - 'immediately', - 'multiple', - 'ensure', - 'perform', - 'there are', - 'it is', - 'effect', - ], - }) - .use(retextSyntaxMentions), + remarkRetext, + unified() + .use(retextEnglish) + .use(retextEquality, { + ignore: [ + 'disabled', + 'host', + 'hosts', + 'invalid', + 'whitespace', + 'of course', + 'just', + 'simple', + 'simply', + ], + }) + .use(retextProfanities, { sureness: 1 }) + .use(retextQuotes) + .use(retextSimplify, { + ignore: [ + 'accurate', + 'address', + 'alternatively', + 'component', + 'equivalent', + 'frequently', + 'function', + 'identify', + 'implement', + 'initial', + 'interface', + 'maintain', + 'maximum', + 'minimum', + 'option', + 'parameters', + 'provide', + 'render', + 'request', + 'selection', + 'submit', + 'type', + 'validate', + 'however', + 'there is', + 'forward', + 'initiate', + 'additional', + 'immediately', + 'multiple', + 'ensure', + 'perform', + 'there are', + 'it is', + 'effect', + ], + }) + .use(retextSyntaxMentions), ]; const messageControlPreset = [ - unifiedMessageControl, - { - name: 'retext-simplify', - marker: commentMarker, - test: 'html', - }, + unifiedMessageControl, + { + name: 'retext-simplify', + marker: commentMarker, + test: 'html', + }, ]; export default { - settings: { - emphasis: '_', - strong: '*', - 'tab-size': 1, - }, - plugins: [ - remarkFrontmatter, // YAML in MD - remarkGfm, // GitHub Flavored Markdown - remarkDirective, // Admonitions - remarkPresetLintConsistent, + settings: { + emphasis: '_', + strong: '*', + 'tab-size': 1, + }, + plugins: [ + remarkFrontmatter, // YAML in MD + remarkGfm, // GitHub Flavored Markdown + remarkDirective, // Admonitions + remarkPresetLintConsistent, - // remark-preset-lint-recommended: - remarkLint, - // Unix compatibility. - remarkLintFinalNewline, - // Rendering across vendors differs greatly if using other styles. - remarkLintListItemBulletIndent, - // [remarkLintListItemIndent, 'tab-size'], // Incompatible with MDX - remarkLintNoBlockquoteWithoutMarker, - remarkLintNoLiteralUrls, - [remarkLintOrderedListMarkerStyle, '.'], + // remark-preset-lint-recommended: + remarkLint, + // Unix compatibility. + remarkLintFinalNewline, + // Rendering across vendors differs greatly if using other styles. + remarkLintListItemBulletIndent, + // [remarkLintListItemIndent, 'tab-size'], // Incompatible with MDX + remarkLintNoBlockquoteWithoutMarker, + remarkLintNoLiteralUrls, + [remarkLintOrderedListMarkerStyle, '.'], - // Mistakes. - remarkLintHardBreakSpaces, - remarkLintNoDuplicateDefinitions, - remarkLintNoHeadingContentIndent, - remarkLintNoInlinePadding, - remarkLintNoShortcutReferenceImage, - remarkLintNoShortcutReferenceLink, - remarkLintNoUndefinedReferences, - remarkLintNoUnusedDefinitions, - retextPreset, - messageControlPreset, - ], + // Mistakes. + remarkLintHardBreakSpaces, + remarkLintNoDuplicateDefinitions, + remarkLintNoHeadingContentIndent, + remarkLintNoInlinePadding, + remarkLintNoShortcutReferenceImage, + remarkLintNoShortcutReferenceLink, + remarkLintNoUndefinedReferences, + remarkLintNoUnusedDefinitions, + retextPreset, + messageControlPreset, + ], }; diff --git a/add-slug-to-blog-posts.js b/add-slug-to-blog-posts.js index 9dfdc8aa0..ee0fcd779 100644 --- a/add-slug-to-blog-posts.js +++ b/add-slug-to-blog-posts.js @@ -7,14 +7,14 @@ import { readFile, writeFile } from 'node:fs/promises'; const paths = await globby('./blog/*.md'); for (const path in paths) { - const file = await readFile(paths[path], { encoding: 'utf-8' }); + const file = await readFile(paths[path], { encoding: 'utf-8' }); - let slug = basename(paths[path], '.md').replace(/-/g, '/'); - console.log(slug); + let slug = basename(paths[path], '.md').replace(/-/g, '/'); + console.log(slug); - const fileWithSlug = file.replace(/\n---/, `\nslug: "${slug}"\n---`); - console.log(fileWithSlug); - await writeFile(paths[path], fileWithSlug, { encoding: 'utf-8' }); + const fileWithSlug = file.replace(/\n---/, `\nslug: "${slug}"\n---`); + console.log(fileWithSlug); + await writeFile(paths[path], fileWithSlug, { encoding: 'utf-8' }); } // console.log(paths) diff --git a/babel.config.js b/babel.config.js index 6b5e0c86e..e00595dae 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,3 +1,3 @@ module.exports = { - presets: [require.resolve('@docusaurus/core/lib/babel/preset')], + presets: [require.resolve('@docusaurus/core/lib/babel/preset')], }; diff --git a/blog/2016-08-0.8.0.md b/blog/2016-08-0.8.0.md index e9fd67c20..d0ffad4fc 100644 --- a/blog/2016-08-0.8.0.md +++ b/blog/2016-08-0.8.0.md @@ -31,20 +31,20 @@ add other fields you can utilize our new and easy to use `MetaData` plugin: ```javascript const uppy = new Uppy().use(Dashboard).use(MetaData, { - fields: [ - { - id: 'resizeTo', - name: 'Resize to', - value: 1200, - placeholder: 'specify future image size', - }, - { - id: 'description', - name: 'Description', - value: '', - placeholder: 'describe what the file is for', - }, - ], + fields: [ + { + id: 'resizeTo', + name: 'Resize to', + value: 1200, + placeholder: 'specify future image size', + }, + { + id: 'description', + name: 'Description', + value: '', + placeholder: 'describe what the file is for', + }, + ], }); ``` diff --git a/blog/2016-09-0.10.md b/blog/2016-09-0.10.md index f91c70b51..7b55b6646 100644 --- a/blog/2016-09-0.10.md +++ b/blog/2016-09-0.10.md @@ -90,11 +90,11 @@ image in your UI after it has been successfully uploaded: ```javascript uppy.on('core:upload-success', (id, url) => { - const img = new Image(); - img.width = 300; - img.alt = id; - img.src = url; - document.body.appendChild(img); + const img = new Image(); + img.width = 300; + img.alt = id; + img.src = url; + document.body.appendChild(img); }); ``` diff --git a/blog/2017-02-0.14.md b/blog/2017-02-0.14.md index 1855e6a5c..081e8b010 100644 --- a/blog/2017-02-0.14.md +++ b/blog/2017-02-0.14.md @@ -62,10 +62,10 @@ big and small. That includes `inline` mode, where you can set `maxWidth` and ```js uppy.use(Dashboard, { - maxWidth: 300, - maxHeight: 350, - inline: true, - target: '#myUploadContainer', + maxWidth: 300, + maxHeight: 350, + inline: true, + target: '#myUploadContainer', }); ``` @@ -102,13 +102,13 @@ own, like so: ```js uppy.use(DragDrop, { - target: '.drop', - locale: { - strings: { - chooseFile: 'Valitse tiedoston', - orDragDrop: 'tai siirtää tänne', - }, - }, + target: '.drop', + locale: { + strings: { + chooseFile: 'Valitse tiedoston', + orDragDrop: 'tai siirtää tänne', + }, + }, }); ``` diff --git a/blog/2017-05-0.17.md b/blog/2017-05-0.17.md index 29be7d86b..2979a522b 100644 --- a/blog/2017-05-0.17.md +++ b/blog/2017-05-0.17.md @@ -19,26 +19,26 @@ Here's the gist of it: ```js Uppy({ - debug: true, - autoProceed: false, - restrictions: { - maxFileSize: 300000, - maxNumberOfFiles: 5, - minNumberOfFiles: 2, - allowedFileTypes: ['image/*', 'video/*'], - }, - onBeforeFileAdded: (currentFile, files) => { - if (currentFile.name === 'my-file.jpg') { - return Promise.resolve(); - } - return Promise.reject('This is not the file I was looking for'); - }, - onBeforeUpload: (files) => { - if (Object.keys(files).length < 2) { - return Promise.reject('Too few files :('); - } - return Promise.resolve(); - }, + debug: true, + autoProceed: false, + restrictions: { + maxFileSize: 300000, + maxNumberOfFiles: 5, + minNumberOfFiles: 2, + allowedFileTypes: ['image/*', 'video/*'], + }, + onBeforeFileAdded: (currentFile, files) => { + if (currentFile.name === 'my-file.jpg') { + return Promise.resolve(); + } + return Promise.reject('This is not the file I was looking for'); + }, + onBeforeUpload: (files) => { + if (Object.keys(files).length < 2) { + return Promise.reject('Too few files :('); + } + return Promise.resolve(); + }, }); ``` @@ -81,7 +81,7 @@ way to inform users about the restrictions you choose to set up: ```js uppy.use(Dashboard, { - note: 'Images and video only, 300kb or less', + note: 'Images and video only, 300kb or less', }); ``` diff --git a/blog/2017-08-0.18.md b/blog/2017-08-0.18.md index fe31de3cc..e233c141e 100644 --- a/blog/2017-08-0.18.md +++ b/blog/2017-08-0.18.md @@ -49,7 +49,7 @@ directly to S3, both the `XHRUpload` and `AwsS3` plugins must be used: // the S3 plugin will configure it. uppy.use(XHRUpload); uppy.use(AwsS3, { - // Options for S3 + // Options for S3 }); ``` diff --git a/blog/2017-09-0.19.md b/blog/2017-09-0.19.md index 1101f9c24..562a26e5b 100644 --- a/blog/2017-09-0.19.md +++ b/blog/2017-09-0.19.md @@ -35,11 +35,11 @@ modal.show(); // ... button.addEventListener('click', () => { - if (modal.isOpen()) { - modal.hide(); - } else { - modal.show(); - } + if (modal.isOpen()) { + modal.hide(); + } else { + modal.show(); + } }); ``` diff --git a/blog/2017-10-0.20.md b/blog/2017-10-0.20.md index 48c35d5b4..2f6ac6181 100644 --- a/blog/2017-10-0.20.md +++ b/blog/2017-10-0.20.md @@ -25,7 +25,7 @@ uppy.use(Tus10, { endpoint: '/upload' }); const Dashboard = require('uppy/lib/react/Dashboard'); const Uploader = () => ( - + ); ReactDOM.render(, document.querySelector('#uploader')); @@ -47,20 +47,20 @@ a Redux action and reducer: // - The new state // - The change set const uppyStateUpdate = (previous, next, patch) => ({ - type: 'UPPY_STATE_UPDATE', - previous, - next, - patch, + type: 'UPPY_STATE_UPDATE', + previous, + next, + patch, }); function reduce(state = {}, action) { - if (action.type === 'UPPY_STATE_UPDATE') { - return { - ...state, - // Merge in the changes. - ...action.patch, - }; - } + if (action.type === 'UPPY_STATE_UPDATE') { + return { + ...state, + // Merge in the changes. + ...action.patch, + }; + } } ``` @@ -71,8 +71,8 @@ Redux plugin: const ReduxStore = require('uppy/lib/Redux'); uppy.use(ReduxStore, { - dispatch: store.dispatch, - action: uppyStateUpdate, + dispatch: store.dispatch, + action: uppyStateUpdate, }); ``` @@ -128,10 +128,10 @@ The old trustly `DragDrop` plugin has been re-designed by ```js uppy.use(DragDrop, { - target: 'body', - width: '600px', - height: '300px', - note: 'Videos only, up to 100 MB', + target: 'body', + width: '600px', + height: '300px', + note: 'Videos only, up to 100 MB', }); ``` @@ -149,7 +149,7 @@ will be cleaned up automatically. This timeframe can be configured using the new const ms = require('ms'); uppy.use(GoldenRetriever, { - expires: ms('4 hours'), + expires: ms('4 hours'), }); ``` diff --git a/blog/2017-10-0.21.md b/blog/2017-10-0.21.md index a0d0ecfc3..978d76e99 100644 --- a/blog/2017-10-0.21.md +++ b/blog/2017-10-0.21.md @@ -40,25 +40,25 @@ uploads in one go: ```js uppy.upload().then((result) => { - console.info('Successful uploads:', result.successful); - if (result.failed.length > 0) { - console.error('Errors:'); - result.failed.forEach((file) => { - console.error(file.error); - }); - } + console.info('Successful uploads:', result.successful); + if (result.failed.length > 0) { + console.error('Errors:'); + result.failed.forEach((file) => { + console.error(file.error); + }); + } }); // or uppy.on('core:complete', ({ successful, failed }) => { - if (failed.length === 0) { - console.log('UPLOAD SUCCESSFUL!!!'); - } else { - console.warn('UPLOAD FAILED!!!'); - } - console.log('successful files:', successful); - console.log('failed files:', failed); + if (failed.length === 0) { + console.log('UPLOAD SUCCESSFUL!!!'); + } else { + console.warn('UPLOAD FAILED!!!'); + } + console.log('successful files:', successful); + console.log('failed files:', failed); }); ``` diff --git a/blog/2017-12-0.22.md b/blog/2017-12-0.22.md index 2d5d57be5..05511167a 100644 --- a/blog/2017-12-0.22.md +++ b/blog/2017-12-0.22.md @@ -141,7 +141,7 @@ use `Form`. ```js uppy.use(Form, { - target: '#my-form', + target: '#my-form', }); ``` diff --git a/blog/2018-02-0.23.md b/blog/2018-02-0.23.md index 78a286dff..496895fcb 100644 --- a/blog/2018-02-0.23.md +++ b/blog/2018-02-0.23.md @@ -47,13 +47,13 @@ event: ```js uppy.on('complete', (result) => { - console.log(result); - // result: { - // failed: [...], - // successful: [...], - // transloadit: [...], - // uploadID: "cjdnzj2zy0000c___iewu9m5y" - // } + console.log(result); + // result: { + // failed: [...], + // successful: [...], + // transloadit: [...], + // uploadID: "cjdnzj2zy0000c___iewu9m5y" + // } }); ``` @@ -61,7 +61,7 @@ And to `uppy.upload()` promise result too: ```js uppy.upload().then((result) => { - console.log(result); + console.log(result); }); ``` diff --git a/blog/2018-10-0.28.md b/blog/2018-10-0.28.md index 23bf1aa28..0b81d3da3 100644 --- a/blog/2018-10-0.28.md +++ b/blog/2018-10-0.28.md @@ -89,12 +89,12 @@ certain plugin, if needed: ```js const uppy = Uppy({ locale: german }); uppy.use(Dashboard, { - trigger: '#pick-files', - locale: { - strings: { - dropPasteImport: 'Something else here, %{browse} or this', - }, - }, + trigger: '#pick-files', + locale: { + strings: { + dropPasteImport: 'Something else here, %{browse} or this', + }, + }, }); ``` @@ -120,8 +120,8 @@ const Dropbox = require('@uppy/dropbox'); const Transloadit = require('@uppy/transloadit'); uppy.use(Dropbox, { - serverUrl: Transloadit.COMPANION, - serverPattern: Transloadit.COMPANION_PATTERN, + serverUrl: Transloadit.COMPANION, + serverPattern: Transloadit.COMPANION_PATTERN, }); ``` diff --git a/blog/2019-03-0.30.md b/blog/2019-03-0.30.md index b67101b05..bfb74f9be 100644 --- a/blog/2019-03-0.30.md +++ b/blog/2019-03-0.30.md @@ -58,8 +58,8 @@ Or import it by using an HTML script tag: ```html ``` @@ -90,22 +90,22 @@ We’ve changed [`upload-success`](https://uppy.io/docs/uppy/#upload-success) an ```js uppy.on('upload-success', (file, responseObject) => { - // (depending on the uploader plugin used, it might contain - // less info, the example is for @uppy/xhr-upload) - // responseObject = { - // status, // HTTP status code (0, 200, 300) - // body, // response body - // uploadURL // the file url, if it was returned - // } + // (depending on the uploader plugin used, it might contain + // less info, the example is for @uppy/xhr-upload) + // responseObject = { + // status, // HTTP status code (0, 200, 300) + // body, // response body + // uploadURL // the file url, if it was returned + // } }); ``` ```js uppy.on('upload-error', (file, responseObject) => { - // responseObject = { - // status, // HTTP status code (0, 200, 300) - // body // response body - // } + // responseObject = { + // status, // HTTP status code (0, 200, 300) + // body // response body + // } }); ``` diff --git a/blog/2019-04-liftoff-23.md b/blog/2019-04-liftoff-23.md index 30426bc2a..7a143e9d9 100644 --- a/blog/2019-04-liftoff-23.md +++ b/blog/2019-04-liftoff-23.md @@ -27,7 +27,7 @@ work is ongoing to make it happen. Let's take a look at the updates for today! const russianLocale = require('@uppy/locales/lib/ru_RU'); const uppy = Uppy({ - locale: russianLocale, + locale: russianLocale, }); ``` diff --git a/blog/2019-10-1.5.md b/blog/2019-10-1.5.md index 6abcc6b50..af1e2ac41 100644 --- a/blog/2019-10-1.5.md +++ b/blog/2019-10-1.5.md @@ -61,7 +61,7 @@ following CSS to your app: ```css .uppy-DashboardItem-sourceIcon { - display: inline-block; + display: inline-block; } ``` diff --git a/blog/2019-11-1.6.md b/blog/2019-11-1.6.md index 4aa8bcdfc..273f5f2aa 100644 --- a/blog/2019-11-1.6.md +++ b/blog/2019-11-1.6.md @@ -25,12 +25,12 @@ Here’s how the magic works: ```js const uppy = Uppy({ - restrictions: { - maxNumberOfFiles: 3, - }, + restrictions: { + maxNumberOfFiles: 3, + }, }); uppy.use(Dashboard, { - note: 'You can upload up to 3 files', + note: 'You can upload up to 3 files', }); ``` @@ -39,14 +39,14 @@ Now, based on some condition in our app, we want to allow more files: ```js // Updating Uppy options uppy.setOptions({ - restrictions: { - maxNumberOfFiles: 5, - }, + restrictions: { + maxNumberOfFiles: 5, + }, }); // Updating Dashboard options uppy - .getPlugin('Dashboard') - .setOptions({ note: 'You can upload up to 5 files' }); + .getPlugin('Dashboard') + .setOptions({ note: 'You can upload up to 5 files' }); ``` Say, later on, the user changed their locale and we would like to reflect that @@ -56,7 +56,7 @@ in Uppy: const fi_FI = require('@uppy/locales/lib/fi_FI'); uppy.setOptions({ - locale: fi_FI, + locale: fi_FI, }); ``` diff --git a/blog/2020-03-1.9.md b/blog/2020-03-1.9.md index 7a51027de..f3306bbb9 100644 --- a/blog/2020-03-1.9.md +++ b/blog/2020-03-1.9.md @@ -63,7 +63,7 @@ type: ```typescript import Uppy = require('@uppy/core'); const uppy = Uppy({ - // options here + // options here }); ``` @@ -72,13 +72,13 @@ instance anywhere. For example, inside a class: ```typescript class UppyProvider extends React.Component { - private uppy: Uppy; - constructor(props) { - super(props); - this.uppy = Uppy({ - // etc - }); - } + private uppy: Uppy; + constructor(props) { + super(props); + this.uppy = Uppy({ + // etc + }); + } } ``` @@ -100,7 +100,7 @@ const { DragDrop } = components; declare var uppy: Uppy; function MyComponent() { - return ; + return ; } ``` diff --git a/blog/2020-03-custom-providers.md b/blog/2020-03-custom-providers.md index 893ea72dc..173dc165a 100644 --- a/blog/2020-03-custom-providers.md +++ b/blog/2020-03-custom-providers.md @@ -56,17 +56,17 @@ with all that done, my package.json file looks something like this: ```json { - "name": "custom-provider", - "dependencies": { - "body-parser": "^1.18.2", - "express": "^4.16.2", - "express-session": "^1.15.6", - "request": "^2.88.0", - "uppy": "^1.16.1", - "@uppy/companion": "^2.0.0" - }, - "private": true, - "scripts": {} + "name": "custom-provider", + "dependencies": { + "body-parser": "^1.18.2", + "express": "^4.16.2", + "express-session": "^1.15.6", + "request": "^2.88.0", + "uppy": "^1.16.1", + "@uppy/companion": "^2.0.0" + }, + "private": true, + "scripts": {} } ``` @@ -83,48 +83,48 @@ const app = express(); app.use(bodyParser.json()); app.use( - session({ - secret: 'some-secret', - resave: true, - saveUninitialized: true, - }), + session({ + secret: 'some-secret', + resave: true, + saveUninitialized: true, + }), ); app.use((req, res, next) => { - res.setHeader('Access-Control-Allow-Origin', req.headers.origin || '*'); - res.setHeader( - 'Access-Control-Allow-Methods', - 'GET, POST, OPTIONS, PUT, PATCH, DELETE', - ); - res.setHeader( - 'Access-Control-Allow-Headers', - 'Authorization, Origin, Content-Type, Accept', - ); - next(); + res.setHeader('Access-Control-Allow-Origin', req.headers.origin || '*'); + res.setHeader( + 'Access-Control-Allow-Methods', + 'GET, POST, OPTIONS, PUT, PATCH, DELETE', + ); + res.setHeader( + 'Access-Control-Allow-Headers', + 'Authorization, Origin, Content-Type, Accept', + ); + next(); }); // initialize uppy const companionOptions = { - providerOptions: { - dropbox: { - key: 'your Dropbox key', - secret: 'your Dropbox secret', - }, - }, - server: { - host: 'localhost:3020', - protocol: 'http', - }, - filePath: './output', - secret: 'some-secret', - debug: true, + providerOptions: { + dropbox: { + key: 'your Dropbox key', + secret: 'your Dropbox secret', + }, + }, + server: { + host: 'localhost:3020', + protocol: 'http', + }, + filePath: './output', + secret: 'some-secret', + debug: true, }; app.use(companion.app(companionOptions)); // handle 404 app.use((req, res, next) => { - return res.status(404).json({ message: 'Not Found' }); + return res.status(404).json({ message: 'Not Found' }); }); companion.socket(app.listen(3020)); @@ -176,10 +176,10 @@ The constructor of our class will look something like this: ```js class MyCustomProvider { - constructor(options) { - this.authProvider = 'myunsplash'; // the name of our provider (lowercased) - } - // ... + constructor(options) { + this.authProvider = 'myunsplash'; // the name of our provider (lowercased) + } + // ... } ``` @@ -305,103 +305,103 @@ const request = require('request'); const BASE_URL = 'https://api.unsplash.com'; class MyCustomProvider { - constructor(options) { - this.authProvider = 'myunsplash'; - } - - list({ token, directory }, done) { - const path = directory ? `/${directory}/photos` : ''; - const options = { - url: `${BASE_URL}/collections${path}`, - method: 'GET', - json: true, - headers: { - Authorization: `Bearer ${token}`, - }, - }; - - request(options, (err, resp, body) => { - if (err) { - console.log(err); - done(err); - return; - } - - done(null, this._adaptData(body)); - }); - } - - download({ id, token }, onData) { - const options = { - url: `${BASE_URL}/photos/${id}`, - method: 'GET', - json: true, - headers: { - Authorization: `Bearer ${token}`, - }, - }; - - request(options, (err, resp, body) => { - if (err) { - console.log(err); - return; - } - - const url = body.links.download; - request - .get(url) - .on('data', (chunk) => onData(null, chunk)) - .on('end', () => onData(null, null)) - .on('error', (err) => console.log(err)); - }); - } - - size({ id, token }, done) { - const options = { - url: `${BASE_URL}/photos/${id}`, - method: 'GET', - json: true, - headers: { - Authorization: `Bearer ${token}`, - }, - }; - - request(options, (err, resp, body) => { - if (err) { - console.log(err); - done(err); - return; - } - - done(null, body.width * body.height); - }); - } - - _adaptData(res) { - const data = { - username: null, - items: [], - nextPagePath: null, - }; - - const items = res; - items.forEach((item) => { - const isFolder = !!item.published_at; - data.items.push({ - isFolder, - icon: isFolder ? item.cover_photo.urls.thumb : item.urls.thumb, - name: item.title || item.description, - mimeType: isFolder ? null : 'image/jpeg', - id: item.id, - thumbnail: isFolder ? item.cover_photo.urls.thumb : item.urls.thumb, - requestPath: item.id, - modifiedDate: item.updated_at, - size: null, - }); - }); - - return data; - } + constructor(options) { + this.authProvider = 'myunsplash'; + } + + list({ token, directory }, done) { + const path = directory ? `/${directory}/photos` : ''; + const options = { + url: `${BASE_URL}/collections${path}`, + method: 'GET', + json: true, + headers: { + Authorization: `Bearer ${token}`, + }, + }; + + request(options, (err, resp, body) => { + if (err) { + console.log(err); + done(err); + return; + } + + done(null, this._adaptData(body)); + }); + } + + download({ id, token }, onData) { + const options = { + url: `${BASE_URL}/photos/${id}`, + method: 'GET', + json: true, + headers: { + Authorization: `Bearer ${token}`, + }, + }; + + request(options, (err, resp, body) => { + if (err) { + console.log(err); + return; + } + + const url = body.links.download; + request + .get(url) + .on('data', (chunk) => onData(null, chunk)) + .on('end', () => onData(null, null)) + .on('error', (err) => console.log(err)); + }); + } + + size({ id, token }, done) { + const options = { + url: `${BASE_URL}/photos/${id}`, + method: 'GET', + json: true, + headers: { + Authorization: `Bearer ${token}`, + }, + }; + + request(options, (err, resp, body) => { + if (err) { + console.log(err); + done(err); + return; + } + + done(null, body.width * body.height); + }); + } + + _adaptData(res) { + const data = { + username: null, + items: [], + nextPagePath: null, + }; + + const items = res; + items.forEach((item) => { + const isFolder = !!item.published_at; + data.items.push({ + isFolder, + icon: isFolder ? item.cover_photo.urls.thumb : item.urls.thumb, + name: item.title || item.description, + mimeType: isFolder ? null : 'image/jpeg', + id: item.id, + thumbnail: isFolder ? item.cover_photo.urls.thumb : item.urls.thumb, + requestPath: item.id, + modifiedDate: item.updated_at, + size: null, + }); + }); + + return data; + } } module.exports = MyCustomProvider; @@ -412,33 +412,33 @@ Now we can go back to `server/index.js` to enable our custom provider: ```js // initialize uppy const uppyOptions = { - providerOptions: { - dropbox: { - key: 'your Dropbox key', - secret: 'your Dropbox secret', - }, - }, - customProviders: { - myunsplash: { - config: { - // source https://unsplash.com/documentation#user-authentication - authorize_url: 'https://unsplash.com/oauth/authorize', - access_url: 'https://unsplash.com/oauth/token', - oauth: 2, - key: 'YOUR UNSPLASH API KEY', - secret: 'YOUR UNSPLASH API SECRET', - }, - // you provider module - module: require('./customprovider'), - }, - }, - server: { - host: 'localhost:3020', - protocol: 'http', - }, - filePath: './output', - secret: 'some-secret', - debug: true, + providerOptions: { + dropbox: { + key: 'your Dropbox key', + secret: 'your Dropbox secret', + }, + }, + customProviders: { + myunsplash: { + config: { + // source https://unsplash.com/documentation#user-authentication + authorize_url: 'https://unsplash.com/oauth/authorize', + access_url: 'https://unsplash.com/oauth/token', + oauth: 2, + key: 'YOUR UNSPLASH API KEY', + secret: 'YOUR UNSPLASH API SECRET', + }, + // you provider module + module: require('./customprovider'), + }, + }, + server: { + host: 'localhost:3020', + protocol: 'http', + }, + filePath: './output', + secret: 'some-secret', + debug: true, }; ``` @@ -461,61 +461,61 @@ const { ProviderViews } = require('@uppy/provider-views'); const { h } = require('preact'); module.exports = class MyCustomProvider extends UIPlugin { - constructor(uppy, opts) { - super(uppy, opts); - this.type = 'acquirer'; - this.id = this.opts.id || 'MyCustomProvider'; - Provider.initPlugin(this, opts); - - this.title = 'MyUnsplash'; - this.icon = () => ( - - - - ); - - this.provider = new Provider(uppy, { - companionUrl: this.opts.companionUrl, - companionHeaders: this.opts.companionHeaders, - provider: 'myunsplash', - pluginId: this.id, - }); - - this.files = []; - this.onFirstRender = this.onFirstRender.bind(this); - this.render = this.render.bind(this); - - // merge default options with the ones set by user - this.opts = { ...opts }; - } - - install() { - this.view = new ProviderViews(this, { - provider: this.provider, - }); - - const { target } = this.opts; - if (target) { - this.mount(target, this); - } - } - - uninstall() { - this.view.tearDown(); - this.unmount(); - } - - onFirstRender() { - return this.view.getFolder(); - } - - render(state) { - return this.view.render(state); - } + constructor(uppy, opts) { + super(uppy, opts); + this.type = 'acquirer'; + this.id = this.opts.id || 'MyCustomProvider'; + Provider.initPlugin(this, opts); + + this.title = 'MyUnsplash'; + this.icon = () => ( + + + + ); + + this.provider = new Provider(uppy, { + companionUrl: this.opts.companionUrl, + companionHeaders: this.opts.companionHeaders, + provider: 'myunsplash', + pluginId: this.id, + }); + + this.files = []; + this.onFirstRender = this.onFirstRender.bind(this); + this.render = this.render.bind(this); + + // merge default options with the ones set by user + this.opts = { ...opts }; + } + + install() { + this.view = new ProviderViews(this, { + provider: this.provider, + }); + + const { target } = this.opts; + if (target) { + this.mount(target, this); + } + } + + uninstall() { + this.view.tearDown(); + this.unmount(); + } + + onFirstRender() { + return this.view.getFolder(); + } + + render(state) { + return this.view.render(state); + } }; ``` @@ -540,21 +540,21 @@ const Dashboard = require('@uppy/dashboard'); const MyCustomProvider = require('./MyCustomProvider'); const uppy = Uppy({ - debug: true, + debug: true, }); uppy.use(Dropbox, { - companionUrl: 'http://localhost:3020', + companionUrl: 'http://localhost:3020', }); uppy.use(MyCustomProvider, { - companionUrl: 'http://localhost:3020', + companionUrl: 'http://localhost:3020', }); uppy.use(Dashboard, { - inline: true, - target: 'body', - plugins: ['Dropbox', 'MyCustomProvider'], + inline: true, + target: 'body', + plugins: ['Dropbox', 'MyCustomProvider'], }); uppy.use(Tus, { endpoint: 'https://master.tus.io/files/' }); @@ -568,21 +568,21 @@ we'd install [budo](https://www.npmjs.com/package/budo): ```js module.exports = (api) => { - api.env('test'); - return { - presets: [ - [ - '@babel/preset-env', - { - modules: false, - loose: true, - }, - ], - ], - plugins: [['@babel/plugin-transform-react-jsx', { pragma: 'h' }]].filter( - Boolean, - ), - }; + api.env('test'); + return { + presets: [ + [ + '@babel/preset-env', + { + modules: false, + loose: true, + }, + ], + ], + plugins: [['@babel/plugin-transform-react-jsx', { pragma: 'h' }]].filter( + Boolean, + ), + }; }; ``` @@ -592,18 +592,18 @@ module.exports = (api) => { ```html - - - - Uppy Custom provider Example - - - - - + + + + Uppy Custom provider Example + + + + + ``` diff --git a/blog/2020-04-1.10.md b/blog/2020-04-1.10.md index 48912d9be..43ef62d37 100644 --- a/blog/2020-04-1.10.md +++ b/blog/2020-04-1.10.md @@ -15,12 +15,12 @@ Uppy `1.10.1` adds long-awaited support for [Facebook](/docs/facebook/) and const uppy = Uppy(); uppy.use(Dashboard); uppy.use(Facebook, { - target: Dashboard, - companionUrl: 'https://companion.uppy.io/', + target: Dashboard, + companionUrl: 'https://companion.uppy.io/', }); uppy.use(OneDrive, { - target: Dashboard, - companionUrl: 'https://companion.uppy.io/', + target: Dashboard, + companionUrl: 'https://companion.uppy.io/', }); ``` diff --git a/blog/2020-04-1.13.md b/blog/2020-04-1.13.md index 096e2dc88..bc46d2577 100644 --- a/blog/2020-04-1.13.md +++ b/blog/2020-04-1.13.md @@ -31,7 +31,7 @@ There are three options available: ```js uppy.use(Dashboard, { - theme: 'dark', + theme: 'dark', }); ``` @@ -47,25 +47,25 @@ Dashboard meta editor, such as ``, `