@uppy/provider-views
Advanced tools
Comparing version 3.7.0 to 3.8.0
# @uppy/provider-views | ||
## 3.8.0 | ||
Released: 2023-12-12 | ||
Included in: Uppy v3.21.0 | ||
- @uppy/provider-views: fix uploadRemoteFile undefined (Mikael Finstad / #4814) | ||
## 3.5.0 | ||
@@ -4,0 +11,0 @@ |
import { h } from 'preact'; | ||
import { useCallback } from 'preact/hooks'; | ||
function GoogleIcon() { | ||
@@ -36,12 +37,50 @@ return h("svg", { | ||
} | ||
const DefaultForm = _ref => { | ||
let { | ||
pluginName, | ||
i18n, | ||
onAuth | ||
} = _ref; | ||
// In order to comply with Google's brand we need to create a different button | ||
// for the Google Drive plugin | ||
const isGoogleDrive = pluginName === 'Google Drive'; | ||
const onSubmit = useCallback(e => { | ||
e.preventDefault(); | ||
onAuth(); | ||
}, [onAuth]); | ||
return h("form", { | ||
onSubmit: onSubmit | ||
}, isGoogleDrive ? h("button", { | ||
type: "submit", | ||
className: "uppy-u-reset uppy-c-btn uppy-c-btn-primary uppy-Provider-authBtn uppy-Provider-btn-google", | ||
"data-uppy-super-focusable": true | ||
}, h(GoogleIcon, null), i18n('signInWithGoogle')) : h("button", { | ||
type: "submit", | ||
className: "uppy-u-reset uppy-c-btn uppy-c-btn-primary uppy-Provider-authBtn", | ||
"data-uppy-super-focusable": true | ||
}, i18n('authenticateWith', { | ||
pluginName | ||
}))); | ||
}; | ||
const defaultRenderForm = _ref2 => { | ||
let { | ||
pluginName, | ||
i18n, | ||
onAuth | ||
} = _ref2; | ||
return h(DefaultForm, { | ||
pluginName: pluginName, | ||
i18n: i18n, | ||
onAuth: onAuth | ||
}); | ||
}; | ||
function AuthView(props) { | ||
const { | ||
loading, | ||
pluginName, | ||
pluginIcon, | ||
i18nArray, | ||
handleAuth | ||
i18n, | ||
handleAuth, | ||
renderForm = defaultRenderForm | ||
} = props; | ||
// In order to comply with Google's brand we need to create a different button | ||
// for the Google Drive plugin | ||
const isGoogleDrive = pluginName === 'Google Drive'; | ||
const pluginNameComponent = h("span", { | ||
@@ -56,18 +95,13 @@ className: "uppy-Provider-authTitleName" | ||
className: "uppy-Provider-authTitle" | ||
}, i18nArray('authenticateWithTitle', { | ||
}, i18n('authenticateWithTitle', { | ||
pluginName: pluginNameComponent | ||
})), isGoogleDrive ? h("button", { | ||
type: "button", | ||
className: "uppy-u-reset uppy-c-btn uppy-c-btn-primary uppy-Provider-authBtn uppy-Provider-btn-google", | ||
onClick: handleAuth, | ||
"data-uppy-super-focusable": true | ||
}, h(GoogleIcon, null), i18nArray('signInWithGoogle')) : h("button", { | ||
type: "button", | ||
className: "uppy-u-reset uppy-c-btn uppy-c-btn-primary uppy-Provider-authBtn", | ||
onClick: handleAuth, | ||
"data-uppy-super-focusable": true | ||
}, i18nArray('authenticateWith', { | ||
pluginName | ||
})), h("div", { | ||
className: "uppy-Provider-authForm" | ||
}, renderForm({ | ||
pluginName, | ||
i18n, | ||
loading, | ||
onAuth: handleAuth | ||
}))); | ||
} | ||
export default AuthView; |
@@ -10,7 +10,6 @@ function _classPrivateFieldLooseBase(receiver, privateKey) { if (!Object.prototype.hasOwnProperty.call(receiver, privateKey)) { throw new TypeError("attempted to use private field on non-instance"); } return receiver; } | ||
import Browser from "../Browser.js"; | ||
import LoaderView from "../Loader.js"; | ||
import CloseWrapper from '../CloseWrapper.js'; | ||
import View from '../View.js'; | ||
const packageJson = { | ||
"version": "3.7.0" | ||
"version": "3.8.0" | ||
}; | ||
@@ -97,3 +96,4 @@ function formatBreadcrumbs(breadcrumbs) { | ||
this.plugin.setPluginState({ | ||
authenticated: false, | ||
authenticated: undefined, | ||
// we don't know yet | ||
files: [], | ||
@@ -106,2 +106,3 @@ folders: [], | ||
}); | ||
this.registerRequestClient(); | ||
} | ||
@@ -166,2 +167,10 @@ | ||
} catch (err) { | ||
// This is the first call that happens when the provider view loads, after auth, so it's probably nice to show any | ||
// error occurring here to the user. | ||
if ((err == null ? void 0 : err.name) === 'UserFacingApiError') { | ||
this.plugin.uppy.info({ | ||
message: this.plugin.uppy.i18n(err.message) | ||
}, 'warning', 5000); | ||
return; | ||
} | ||
this.handleError(err); | ||
@@ -224,14 +233,25 @@ } finally { | ||
} | ||
async handleAuth() { | ||
const clientVersion = `@uppy/provider-views=${ProviderView.VERSION}`; | ||
async handleAuth(authFormData) { | ||
try { | ||
await this.provider.login({ | ||
uppyVersions: clientVersion | ||
await _classPrivateFieldLooseBase(this, _withAbort)[_withAbort](async signal => { | ||
this.setLoading(true); | ||
await this.provider.login({ | ||
authFormData, | ||
signal | ||
}); | ||
this.plugin.setPluginState({ | ||
authenticated: true | ||
}); | ||
this.preFirstRender(); | ||
}); | ||
this.plugin.setPluginState({ | ||
authenticated: true | ||
}); | ||
this.preFirstRender(); | ||
} catch (e) { | ||
this.plugin.uppy.log(`login failed: ${e.message}`); | ||
} catch (err) { | ||
if (err.name === 'UserFacingApiError') { | ||
this.plugin.uppy.info({ | ||
message: this.plugin.uppy.i18n(err.message) | ||
}, 'warning', 5000); | ||
return; | ||
} | ||
this.plugin.uppy.log(`login failed: ${err.message}`); | ||
} finally { | ||
this.setLoading(false); | ||
} | ||
@@ -350,3 +370,3 @@ } | ||
this.plugin.uppy.log('Adding files from a remote provider'); | ||
this.plugin.uppy.addFiles(newFiles.map(file => this.getTagFile(file))); | ||
this.plugin.uppy.addFiles(newFiles.map(file => this.getTagFile(file, this.requestClientId))); | ||
this.plugin.setPluginState({ | ||
@@ -415,3 +435,2 @@ filterInput: '' | ||
folders: hasInput ? filterItems(folders) : folders, | ||
username: this.username, | ||
getNextFolder: this.getNextFolder, | ||
@@ -443,15 +462,8 @@ getFolder: this.getFolder, | ||
return _this.plugin.uppy.validateRestrictions(...arguments); | ||
} | ||
}, | ||
isLoading: loading | ||
}; | ||
if (loading) { | ||
if (authenticated === false) { | ||
return h(CloseWrapper, { | ||
onUnmount: this.clearSelection | ||
}, h(LoaderView, { | ||
i18n: this.plugin.uppy.i18n, | ||
loading: loading | ||
})); | ||
} | ||
if (!authenticated) { | ||
return h(CloseWrapper, { | ||
onUnmount: this.clearSelection | ||
}, h(AuthView, { | ||
@@ -461,4 +473,5 @@ pluginName: this.plugin.title, | ||
handleAuth: this.handleAuth, | ||
i18n: this.plugin.uppy.i18n, | ||
i18nArray: this.plugin.uppy.i18nArray | ||
i18n: this.plugin.uppy.i18nArray, | ||
renderForm: this.opts.renderAuthForm, | ||
loading: loading | ||
})); | ||
@@ -465,0 +478,0 @@ } |
@@ -10,3 +10,3 @@ function _classPrivateFieldLooseBase(receiver, privateKey) { if (!Object.prototype.hasOwnProperty.call(receiver, privateKey)) { throw new TypeError("attempted to use private field on non-instance"); } return receiver; } | ||
const packageJson = { | ||
"version": "3.7.0" | ||
"version": "3.8.0" | ||
}; | ||
@@ -64,2 +64,3 @@ /** | ||
this.plugin.setPluginState(this.defaultState); | ||
this.registerRequestClient(); | ||
} | ||
@@ -66,0 +67,0 @@ |
@@ -142,2 +142,6 @@ import getFileType from '@uppy/utils/lib/getFileType'; | ||
} | ||
registerRequestClient() { | ||
this.requestClientId = this.provider.provider; | ||
this.plugin.uppy.registerRequestClient(this.requestClientId, this.provider); | ||
} | ||
@@ -164,14 +168,6 @@ // todo document what is a "tagFile" or get rid of this concept | ||
providerName: this.provider.name, | ||
provider: this.provider.provider | ||
provider: this.provider.provider, | ||
requestClientId: this.requestClientId | ||
} | ||
}; | ||
// all properties on this object get saved into the Uppy store. | ||
// Some users might serialize their store (for example using JSON.stringify), | ||
// or when using Golden Retriever it will serialize state into e.g. localStorage. | ||
// However RequestClient is not serializable so we need to prevent it from being serialized. | ||
Object.defineProperty(tagFile.remote, 'requestClient', { | ||
value: this.provider, | ||
enumerable: false | ||
}); | ||
const fileType = getFileType(tagFile); | ||
@@ -178,0 +174,0 @@ |
{ | ||
"name": "@uppy/provider-views", | ||
"description": "View library for Uppy remote provider plugins.", | ||
"version": "3.7.0", | ||
"version": "3.8.0", | ||
"license": "MIT", | ||
@@ -23,3 +23,3 @@ "main": "lib/index.js", | ||
"dependencies": { | ||
"@uppy/utils": "^5.6.0", | ||
"@uppy/utils": "^5.7.0", | ||
"classnames": "^2.2.6", | ||
@@ -31,4 +31,4 @@ "nanoid": "^4.0.0", | ||
"peerDependencies": { | ||
"@uppy/core": "^3.7.0" | ||
"@uppy/core": "^3.8.0" | ||
} | ||
} |
import { h } from 'preact' | ||
import { useCallback } from 'preact/hooks' | ||
@@ -39,4 +40,3 @@ function GoogleIcon () { | ||
function AuthView (props) { | ||
const { pluginName, pluginIcon, i18nArray, handleAuth } = props | ||
const DefaultForm = ({ pluginName, i18n, onAuth }) => { | ||
// In order to comply with Google's brand we need to create a different button | ||
@@ -46,36 +46,56 @@ // for the Google Drive plugin | ||
const pluginNameComponent = ( | ||
<span className="uppy-Provider-authTitleName"> | ||
{pluginName} | ||
<br /> | ||
</span> | ||
) | ||
const onSubmit = useCallback((e) => { | ||
e.preventDefault() | ||
onAuth() | ||
}, [onAuth]) | ||
return ( | ||
<div className="uppy-Provider-auth"> | ||
<div className="uppy-Provider-authIcon">{pluginIcon()}</div> | ||
<div className="uppy-Provider-authTitle"> | ||
{i18nArray('authenticateWithTitle', { | ||
pluginName: pluginNameComponent, | ||
})} | ||
</div> | ||
<form onSubmit={onSubmit}> | ||
{isGoogleDrive ? ( | ||
<button | ||
type="button" | ||
type="submit" | ||
className="uppy-u-reset uppy-c-btn uppy-c-btn-primary uppy-Provider-authBtn uppy-Provider-btn-google" | ||
onClick={handleAuth} | ||
data-uppy-super-focusable | ||
> | ||
<GoogleIcon /> | ||
{i18nArray('signInWithGoogle')} | ||
{i18n('signInWithGoogle')} | ||
</button> | ||
) : ( | ||
<button | ||
type="button" | ||
type="submit" | ||
className="uppy-u-reset uppy-c-btn uppy-c-btn-primary uppy-Provider-authBtn" | ||
onClick={handleAuth} | ||
data-uppy-super-focusable | ||
> | ||
{i18nArray('authenticateWith', { pluginName })} | ||
{i18n('authenticateWith', { pluginName })} | ||
</button> | ||
)} | ||
</form> | ||
) | ||
} | ||
const defaultRenderForm = ({ pluginName, i18n, onAuth }) => ( | ||
<DefaultForm pluginName={pluginName} i18n={i18n} onAuth={onAuth} /> | ||
) | ||
function AuthView (props) { | ||
const { loading, pluginName, pluginIcon, i18n, handleAuth, renderForm = defaultRenderForm } = props | ||
const pluginNameComponent = ( | ||
<span className="uppy-Provider-authTitleName"> | ||
{pluginName} | ||
<br /> | ||
</span> | ||
) | ||
return ( | ||
<div className="uppy-Provider-auth"> | ||
<div className="uppy-Provider-authIcon">{pluginIcon()}</div> | ||
<div className="uppy-Provider-authTitle"> | ||
{i18n('authenticateWithTitle', { | ||
pluginName: pluginNameComponent, | ||
})} | ||
</div> | ||
<div className="uppy-Provider-authForm"> | ||
{renderForm({ pluginName, i18n, loading, onAuth: handleAuth })} | ||
</div> | ||
</div> | ||
@@ -82,0 +102,0 @@ ) |
@@ -9,3 +9,2 @@ import { h } from 'preact' | ||
import Browser from '../Browser.jsx' | ||
import LoaderView from '../Loader.jsx' | ||
import CloseWrapper from '../CloseWrapper.js' | ||
@@ -72,3 +71,3 @@ import View from '../View.js' | ||
this.plugin.setPluginState({ | ||
authenticated: false, | ||
authenticated: undefined, // we don't know yet | ||
files: [], | ||
@@ -81,2 +80,4 @@ folders: [], | ||
}) | ||
this.registerRequestClient() | ||
} | ||
@@ -192,2 +193,9 @@ | ||
} catch (err) { | ||
// This is the first call that happens when the provider view loads, after auth, so it's probably nice to show any | ||
// error occurring here to the user. | ||
if (err?.name === 'UserFacingApiError') { | ||
this.plugin.uppy.info({ message: this.plugin.uppy.i18n(err.message) }, 'warning', 5000) | ||
return | ||
} | ||
this.handleError(err) | ||
@@ -248,10 +256,19 @@ } finally { | ||
async handleAuth () { | ||
const clientVersion = `@uppy/provider-views=${ProviderView.VERSION}` | ||
async handleAuth (authFormData) { | ||
try { | ||
await this.provider.login({ uppyVersions: clientVersion }) | ||
this.plugin.setPluginState({ authenticated: true }) | ||
this.preFirstRender() | ||
} catch (e) { | ||
this.plugin.uppy.log(`login failed: ${e.message}`) | ||
await this.#withAbort(async (signal) => { | ||
this.setLoading(true) | ||
await this.provider.login({ authFormData, signal }) | ||
this.plugin.setPluginState({ authenticated: true }) | ||
this.preFirstRender() | ||
}) | ||
} catch (err) { | ||
if (err.name === 'UserFacingApiError') { | ||
this.plugin.uppy.info({ message: this.plugin.uppy.i18n(err.message) }, 'warning', 5000) | ||
return | ||
} | ||
this.plugin.uppy.log(`login failed: ${err.message}`) | ||
} finally { | ||
this.setLoading(false) | ||
} | ||
@@ -392,3 +409,3 @@ } | ||
this.plugin.uppy.log('Adding files from a remote provider') | ||
this.plugin.uppy.addFiles(newFiles.map((file) => this.getTagFile(file))) | ||
this.plugin.uppy.addFiles(newFiles.map((file) => this.getTagFile(file, this.requestClientId))) | ||
@@ -439,3 +456,2 @@ this.plugin.setPluginState({ filterInput: '' }) | ||
folders: hasInput ? filterItems(folders) : folders, | ||
username: this.username, | ||
getNextFolder: this.getNextFolder, | ||
@@ -468,15 +484,8 @@ getFolder: this.getFolder, | ||
validateRestrictions: (...args) => this.plugin.uppy.validateRestrictions(...args), | ||
isLoading: loading, | ||
} | ||
if (loading) { | ||
if (authenticated === false) { | ||
return ( | ||
<CloseWrapper onUnmount={this.clearSelection}> | ||
<LoaderView i18n={this.plugin.uppy.i18n} loading={loading} /> | ||
</CloseWrapper> | ||
) | ||
} | ||
if (!authenticated) { | ||
return ( | ||
<CloseWrapper onUnmount={this.clearSelection}> | ||
<AuthView | ||
@@ -486,4 +495,5 @@ pluginName={this.plugin.title} | ||
handleAuth={this.handleAuth} | ||
i18n={this.plugin.uppy.i18n} | ||
i18nArray={this.plugin.uppy.i18nArray} | ||
i18n={this.plugin.uppy.i18nArray} | ||
renderForm={this.opts.renderAuthForm} | ||
loading={loading} | ||
/> | ||
@@ -490,0 +500,0 @@ </CloseWrapper> |
@@ -57,2 +57,4 @@ import { h } from 'preact' | ||
this.plugin.setPluginState(this.defaultState) | ||
this.registerRequestClient() | ||
} | ||
@@ -59,0 +61,0 @@ |
@@ -60,2 +60,7 @@ import getFileType from '@uppy/utils/lib/getFileType' | ||
registerRequestClient() { | ||
this.requestClientId = this.provider.provider; | ||
this.plugin.uppy.registerRequestClient(this.requestClientId, this.provider) | ||
} | ||
// todo document what is a "tagFile" or get rid of this concept | ||
@@ -82,11 +87,6 @@ getTagFile (file) { | ||
provider: this.provider.provider, | ||
requestClientId: this.requestClientId, | ||
}, | ||
} | ||
// all properties on this object get saved into the Uppy store. | ||
// Some users might serialize their store (for example using JSON.stringify), | ||
// or when using Golden Retriever it will serialize state into e.g. localStorage. | ||
// However RequestClient is not serializable so we need to prevent it from being serialized. | ||
Object.defineProperty(tagFile.remote, 'requestClient', { value: this.provider, enumerable: false }) | ||
const fileType = getFileType(tagFile) | ||
@@ -93,0 +93,0 @@ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
270784
3864
Updated@uppy/utils@^5.7.0