@uppy/provider-views - npm Package Compare versions

Comparing version 3.7.0 to 3.8.0

CHANGELOG.md

 # @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 @@

lib/ProviderView/AuthView.js

 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;

lib/ProviderView/ProviderView.js

@@ -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 @@ }

lib/SearchProviderView/SearchProviderView.js

@@ -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 @@

lib/View.js

@@ -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 @@

package.json

 {
   "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"
   }
 }

src/ProviderView/AuthView.jsx

 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 @@ )

src/ProviderView/ProviderView.jsx

@@ -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>

src/SearchProviderView/SearchProviderView.jsx

@@ -57,2 +57,4 @@ import { h } from 'preact'
     this.plugin.setPluginState(this.defaultState)
+
+    this.registerRequestClient()
   }
@@ -59,0 +61,0 @@

src/View.js

@@ -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 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

270784

increased by1.48%

Lines of code

3864

increased by1.82%

Dependency changes

• Updated@uppy/utils@^5.7.0