Provider views rewrite (.files, .folders => .partialTree)

packages/@uppy/angular/projects/uppy/angular/package.json

@@ -25,7 +25,7 @@
     "tslib": "^2.0.0"
   },
   "peerDependencies": {
-    "@angular/common": "ˆ17.0.0 || ^18.0.0",
+    "@angular/common": "*",
     "@angular/core": "^17.0.0 || ^18.0.0",
     "@uppy/core": "workspace:^",
     "@uppy/dashboard": "workspace:^",

packages/@uppy/companion-client/src/Provider.ts

@@ -366,7 +366,7 @@ export default class Provider<M extends Meta, B extends Body>
   }
 
   list<ResBody>(
-    directory: string | undefined,
+    directory: string | null,
     options: RequestOptions,
   ): Promise<ResBody> {
     return this.get<ResBody>(`${this.id}/list/${directory || ''}`, options)

packages/@uppy/companion/src/server/provider/drive/index.js

@@ -97,7 +97,7 @@ class Drive extends Provider {
           q,
           // We can only do a page size of 1000 because we do not request permissions in DRIVE_FILES_FIELDS.
           // Otherwise we are limited to 100. Instead we get the user info from `this.user()`
-          pageSize: 1000,
+          pageSize: 10,
           orderBy: 'folder,name',
           includeItemsFromAllDrives: true,
           supportsAllDrives: true,

packages/@uppy/companion/src/server/provider/instagram/graph/index.js

@@ -37,7 +37,7 @@ class Instagram extends Provider {
 
   async list ({ directory, token, query = { cursor: null } }) {
     return this.#withErrorHandling('provider.instagram.list.error', async () => {
-      const qs = { fields: 'id,media_type,thumbnail_url,media_url,timestamp,children{media_type,media_url,thumbnail_url,timestamp}' }
+      const qs = { fields: 'id,media_type,thumbnail_url,media_url,timestamp,children{media_type,media_url,thumbnail_url,timestamp}', limit: 5 }
 
       if (query.cursor) qs.after = query.cursor
 

packages/@uppy/core/src/Restricter.ts

@@ -98,25 +98,17 @@ class Restricter<M extends Meta, B extends Body> {
     }
 
     if (maxTotalFileSize) {
-      let totalFilesSize = existingFiles.reduce(
-        (total, f) => (total + (f.size ?? 0)) as number,
+      const totalFilesSize = [...existingFiles, ...addingFiles].reduce(
+        (total, f) => total + (f.size ?? 0),
         0,
       )
-
-      for (const addingFile of addingFiles) {
-        if (addingFile.size != null) {
-          // We can't check maxTotalFileSize if the size is unknown.
-          totalFilesSize += addingFile.size
-
-          if (totalFilesSize > maxTotalFileSize) {
-            throw new RestrictionError(
-              this.getI18n()('exceedsSize', {
-                size: prettierBytes(maxTotalFileSize),
-                file: addingFile.name,
-              }),
-            )
-          }
-        }
+      if (totalFilesSize > maxTotalFileSize) {
+        throw new RestrictionError(
+          this.getI18n()('aggregateExceedsSize', {
+            sizeAllowed: prettierBytes(maxTotalFileSize),
+            size: prettierBytes(totalFilesSize),
+          }),
+        )
       }
     }
   }

packages/@uppy/core/src/Uppy.test.ts

@@ -2157,7 +2157,7 @@ describe('src/Core', () => {
     it('should enforce the maxTotalFileSize rule', () => {
       const core = new Core({
         restrictions: {
-          maxTotalFileSize: 34000,
+          maxTotalFileSize: 20000,
         },
       })
 
@@ -2176,11 +2176,13 @@ describe('src/Core', () => {
           data: testImage,
         })
       }).toThrowError(
-        new Error('foo1.jpg exceeds maximum allowed size of 33 KB'),
+        new Error(
+          'You selected 34 KB of files, but maximum allowed size is 20 KB',
+        ),
       )
     })
 
-    it('should check if a file validateRestrictions', () => {
+    it('should report error on validateSingleFile', () => {
       const core = new Core({
         restrictions: {
           minFileSize: 300000,
@@ -2205,17 +2207,13 @@ describe('src/Core', () => {
         size: 270733,
       }
 
-      // @ts-ignore
-      const validateRestrictions1 = core.validateRestrictions(newFile)
-      // @ts-ignore
-      const validateRestrictions2 = core2.validateRestrictions(newFile)
+      const validateRestrictions1 = core.validateSingleFile(newFile)
+      const validateRestrictions2 = core2.validateSingleFile(newFile)
 
-      expect(validateRestrictions1!.message).toEqual(
+      expect(validateRestrictions1).toEqual(
         'This file is smaller than the allowed size of 293 KB',
       )
-      expect(validateRestrictions2!.message).toEqual(
-        'You can only upload: image/png',
-      )
+      expect(validateRestrictions2).toEqual('You can only upload: image/png')
     })
 
     it('should emit `restriction-failed` event when some rule is violated', () => {

packages/@uppy/core/src/Uppy.ts

@@ -61,23 +61,86 @@ export type UnknownPlugin<
   PluginState extends Record<string, unknown> = Record<string, unknown>,
 > = BasePlugin<any, M, B, PluginState>
 
-// `OmitFirstArg<typeof someArray>` is the type of the returned value of `someArray.slice(1)`.
-type OmitFirstArg<T> = T extends [any, ...infer U] ? U : never
+/**
+ * ids are always `string`s, except the root folder's id can be `null`
+ */
+export type PartialTreeId = string | null
+
+export type PartialTreeStatusFile = 'checked' | 'unchecked'
+export type PartialTreeStatus = PartialTreeStatusFile | 'partial'
+
+export type PartialTreeFile = {
+  type: 'file'
+  id: string
+
+  /**
+   * There exist two types of restrictions:
+   * - individual restrictions (`allowedFileTypes`, `minFileSize`, `maxFileSize`), and
+   * - aggregate restrictions (`maxNumberOfFiles`, `maxTotalFileSize`).
+   *
+   * `.restrictionError` reports whether this file passes individual restrictions.
+   *
+   */
+  restrictionError: string | null
+
+  status: PartialTreeStatusFile
+  parentId: PartialTreeId
+  data: CompanionFile
+}
+
+export type PartialTreeFolderNode = {
+  type: 'folder'
+  id: string
+
+  /**
+   * Consider `(.nextPagePath, .cached)` a composite key that can represent 4 states:
+   * - `{ cached: true, nextPagePath: null }` - we fetched all pages in this folder
+   * - `{ cached: true, nextPagePath: 'smth' }` - we fetched 1st page, and there are still pages left to fetch in this folder
+   * - `{ cached: false, nextPagePath: null }` - we didn't fetch the 1st page in this folder
+   * - `{ cached: false, nextPagePath: 'someString' }` - ❌ CAN'T HAPPEN ❌
+   */
+  cached: boolean
+  nextPagePath: PartialTreeId
+
+  status: PartialTreeStatus
+  parentId: PartialTreeId
+  data: CompanionFile
+}
+
+export type PartialTreeFolderRoot = {
+  type: 'root'
+  id: PartialTreeId
+
+  cached: boolean
+  nextPagePath: PartialTreeId
+}
+
+export type PartialTreeFolder = PartialTreeFolderNode | PartialTreeFolderRoot
+
+/**
+ * PartialTree has the following structure.
+ *
+ *           FolderRoot
+ *         ┌─────┴─────┐
+ *     FolderNode     File
+ *   ┌─────┴────┐
+ *  File      File
+ *
+ * Root folder is called `PartialTreeFolderRoot`,
+ * all other folders are called `PartialTreeFolderNode`, because they are "internal nodes".
+ *
+ * It's possible for `PartialTreeFolderNode` to be a leaf node if it doesn't contain any files.
+ */
+export type PartialTree = (PartialTreeFile | PartialTreeFolder)[]
 
 export type UnknownProviderPluginState = {
   authenticated: boolean | undefined
-  breadcrumbs: {
-    requestPath?: string
-    name?: string
-    id?: string
-  }[]
   didFirstRender: boolean
-  currentSelection: CompanionFile[]
-  filterInput: string
+  searchString: string
   loading: boolean | string
-  folders: CompanionFile[]
-  files: CompanionFile[]
-  isSearchVisible: boolean
+  partialTree: PartialTree
+  currentFolderId: PartialTreeId
+  username: string | null
 }
 /*
  * UnknownProviderPlugin can be any Companion plugin (such as Google Drive).
@@ -92,8 +155,8 @@ export type UnknownProviderPlugin<
   M extends Meta,
   B extends Body,
 > = UnknownPlugin<M, B, UnknownProviderPluginState> & {
-  rootFolderId: string | null
   title: string
+  rootFolderId: string | null
   files: UppyFile<M, B>[]
   icon: () => h.JSX.Element
   provider: CompanionClientProvider
@@ -114,16 +177,10 @@ export type UnknownProviderPlugin<
  * `SearchProvider` does operate on Companion plugins with `uppy.getPlugin()`.
  */
 export type UnknownSearchProviderPluginState = {
-  isInputMode?: boolean
-  searchTerm?: string | null
+  isInputMode: boolean
 } & Pick<
   UnknownProviderPluginState,
-  | 'loading'
-  | 'files'
-  | 'folders'
-  | 'currentSelection'
-  | 'filterInput'
-  | 'didFirstRender'
+  'loading' | 'searchString' | 'partialTree' | 'currentFolderId'
 >
 export type UnknownSearchProviderPlugin<
   M extends Meta,
@@ -300,6 +357,9 @@ export interface UppyEventMap<M extends Meta, B extends Body>
   'upload-start': (files: UppyFile<M, B>[]) => void
 }
 
+/** `OmitFirstArg<typeof someArray>` is the type of the returned value of `someArray.slice(1)`. */
+type OmitFirstArg<T> = T extends [any, ...infer U] ? U : never
+
 const defaultUploadState = {
   totalProgress: 0,
   allowNewUpload: true,
@@ -799,14 +859,23 @@ export class Uppy<M extends Meta, B extends Body> {
     }
   }
 
-  validateRestrictions(
-    file: ValidateableFile<M, B>,
-    files: ValidateableFile<M, B>[] = this.getFiles(),
-  ): RestrictionError<M, B> | null {
+  validateSingleFile(file: ValidateableFile<M, B>): string | null {
+    try {
+      this.#restricter.validateSingleFile(file)
+    } catch (err) {
+      return err.message
+    }
+    return null
+  }
+
+  validateAggregateRestrictions(
+    files: ValidateableFile<M, B>[],
+  ): string | null {
+    const existingFiles = this.getFiles()
     try {
-      this.#restricter.validate(files, [file])
+      this.#restricter.validateAggregateRestrictions(existingFiles, files)
     } catch (err) {
-      return err as any
+      return err.message
     }
     return null
   }

packages/@uppy/core/src/_common.scss

@@ -127,7 +127,7 @@
   background-color: $blue;
   border-radius: 4px;
 
-  &:hover {
+  &:not(:disabled):hover {
     background-color: darken($blue, 10%);
   }
 
@@ -145,6 +145,10 @@
 
     @include blue-border-focus--dark;
   }
+
+  &.uppy-c-btn--disabled {
+    background-color: rgb(142, 178, 219);
+  }
 }
 
 .uppy-c-btn-link {

packages/@uppy/core/src/locale.ts

@@ -12,6 +12,8 @@ export default {
       0: 'You have to select at least %{smart_count} file',
       1: 'You have to select at least %{smart_count} files',
     },
+    aggregateExceedsSize:
+      'You selected %{size} of files, but maximum allowed size is %{sizeAllowed}',
     exceedsSize: '%{file} exceeds maximum allowed size of %{size}',
     missingRequiredMetaField: 'Missing required meta fields',
     missingRequiredMetaFieldOnFile:

packages/@uppy/facebook/src/Facebook.tsx

@@ -103,19 +103,16 @@ export default class Facebook<M extends Meta, B extends Body> extends UIPlugin<
   }
 
   render(state: unknown): ComponentChild {
-    const viewOptions: {
-      viewType?: string
-      showFilter?: boolean
-      showTitles?: boolean
-    } = {}
-    if (
-      this.getPluginState().files.length &&
-      !this.getPluginState().folders.length
-    ) {
-      viewOptions.viewType = 'grid'
-      viewOptions.showFilter = false
-      viewOptions.showTitles = false
+    const { partialTree } = this.getPluginState()
+    const folders = partialTree.filter((i) => i.type === 'folder')
+
+    if (folders.length === 0) {
+      return this.view.render(state, {
+        viewType: 'grid',
+        showFilter: false,
+        showTitles: false,
+      })
     }
-    return this.view.render(state, viewOptions)
+    return this.view.render(state)
   }
 }

packages/@uppy/google-drive/src/GoogleDrive.tsx

@@ -9,8 +9,7 @@ import { ProviderViews } from '@uppy/provider-views'
 import { h, type ComponentChild } from 'preact'
 
 import type { UppyFile, Body, Meta } from '@uppy/utils/lib/UppyFile'
-import type { UnknownProviderPluginState } from '@uppy/core/lib/Uppy'
-import DriveProviderViews from './DriveProviderViews.ts'
+import type { UnknownProviderPluginState } from '@uppy/core/lib/Uppy.ts'
 import locale from './locale.ts'
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore We don't want TS to generate types for the package.json
@@ -78,6 +77,7 @@ export default class GoogleDrive<
         </g>
       </svg>
     )
+    this.rootFolderId = 'root'
 
     this.opts.companionAllowedHosts = getAllowedHosts(
       this.opts.companionAllowedHosts,
@@ -102,9 +102,9 @@ export default class GoogleDrive<
   }
 
   install(): void {
-    this.view = new DriveProviderViews(this, {
+    this.view = new ProviderViews(this, {
       provider: this.provider,
-      loadAllFiles: true,
+      loadAllFiles: false,
     })
 
     const { target } = this.opts