0
# Cloud Providers
1

2
Cloud provider plugins enable users to import files from popular cloud storage services and social media platforms. These plugins integrate with remote APIs through Uppy Companion server.
3

4
## Capabilities
5

6
### Cloud Storage Services
7

8
Plugins for importing files from major cloud storage providers.
9

10
```typescript { .api }
11
/**
12
 * Google Drive integration
13
 */
14
class GoogleDrive<M extends Meta = {}, B extends Body = {}> extends BasePlugin<GoogleDriveOptions> {
15
  constructor(uppy: Uppy<M, B>, options?: GoogleDriveOptions);
16
}
17

18
interface GoogleDriveOptions {
19
  target?: string | Element;
20
  companionUrl: string;
21
  companionHeaders?: { [key: string]: string };
22
  companionAllowedHosts?: string | RegExp | (string | RegExp)[];
23
  companionCookiesRule?: string;
24
  title?: string;
25
  storage?: CompanionClientStorage;
26
  locale?: Locale;
27
}
28

29
/**
30
 * Google Drive Picker integration using official picker API
31
 */
32
class GoogleDrivePicker<M extends Meta = {}, B extends Body = {}> extends UIPlugin<GoogleDrivePickerOptions> {
33
  constructor(uppy: Uppy<M, B>, options?: GoogleDrivePickerOptions);
34
}
35

36
interface GoogleDrivePickerOptions {
37
  target?: string | Element;
38
  apiKey: string;
39
  clientId: string;
40
  title?: string;
41
  locale?: Locale;
42
}
43

44
/**
45
 * Dropbox integration
46
 */
47
class Dropbox<M extends Meta = {}, B extends Body = {}> extends BasePlugin<DropboxOptions> {
48
  constructor(uppy: Uppy<M, B>, options?: DropboxOptions);
49
}
50

51
interface DropboxOptions {
52
  target?: string | Element;
53
  companionUrl: string;
54
  companionHeaders?: { [key: string]: string };
55
  companionAllowedHosts?: string | RegExp | (string | RegExp)[];
56
  companionCookiesRule?: string;
57
  title?: string;
58
  storage?: CompanionClientStorage;
59
  locale?: Locale;
60
}
61

62
/**
63
 * Box.com integration
64
 */
65
class Box<M extends Meta = {}, B extends Body = {}> extends BasePlugin<BoxOptions> {
66
  constructor(uppy: Uppy<M, B>, options?: BoxOptions);
67
}
68

69
interface BoxOptions {
70
  target?: string | Element;
71
  companionUrl: string;
72
  companionHeaders?: { [key: string]: string };
73
  companionAllowedHosts?: string | RegExp | (string | RegExp)[];
74
  companionCookiesRule?: string;
75
  title?: string;
76
  storage?: CompanionClientStorage;
77
  locale?: Locale;
78
}
79

80
/**
81
 * Microsoft OneDrive integration
82
 */
83
class OneDrive<M extends Meta = {}, B extends Body = {}> extends BasePlugin<OneDriveOptions> {
84
  constructor(uppy: Uppy<M, B>, options?: OneDriveOptions);
85
}
86

87
interface OneDriveOptions {
88
  target?: string | Element;
89
  companionUrl: string;
90
  companionHeaders?: { [key: string]: string };
91
  companionAllowedHosts?: string | RegExp | (string | RegExp)[];
92
  companionCookiesRule?: string;
93
  title?: string;
94
  storage?: CompanionClientStorage;
95
  locale?: Locale;
96
}
97
```
98

99
**Usage Examples:**
100

101
```typescript
102
import { Uppy, GoogleDrive, Dropbox, Box, OneDrive } from "uppy";
103

104
const uppy = new Uppy()
105
  // Google Drive with companion server
106
  .use(GoogleDrive, {
107
    companionUrl: 'https://companion.uppy.io',
108
    companionHeaders: {
109
      'Authorization': 'Bearer ' + token
110
    }
111
  })
112
  
113
  // Dropbox integration
114
  .use(Dropbox, {
115
    companionUrl: 'https://companion.uppy.io'
116
  })
117
  
118
  // Box.com integration
119
  .use(Box, {
120
    companionUrl: 'https://companion.uppy.io'
121
  })
122
  
123
  // OneDrive integration
124
  .use(OneDrive, {
125
    companionUrl: 'https://companion.uppy.io'
126
  });
127

128
// Google Drive Picker (alternative to companion-based)
129
uppy.use(GoogleDrivePicker, {
130
  apiKey: 'YOUR_GOOGLE_API_KEY',
131
  clientId: 'YOUR_GOOGLE_CLIENT_ID'
132
});
133
```
134

135
### Social Media Services
136

137
Plugins for importing media from social media platforms.
138

139
```typescript { .api }
140
/**
141
 * Instagram integration
142
 */
143
class Instagram<M extends Meta = {}, B extends Body = {}> extends BasePlugin<InstagramOptions> {
144
  constructor(uppy: Uppy<M, B>, options?: InstagramOptions);
145
}
146

147
interface InstagramOptions {
148
  target?: string | Element;
149
  companionUrl: string;
150
  companionHeaders?: { [key: string]: string };
151
  companionAllowedHosts?: string | RegExp | (string | RegExp)[];
152
  companionCookiesRule?: string;
153
  title?: string;
154
  storage?: CompanionClientStorage;
155
  locale?: Locale;
156
}
157

158
/**
159
 * Facebook integration
160
 */
161
class Facebook<M extends Meta = {}, B extends Body = {}> extends BasePlugin<FacebookOptions> {
162
  constructor(uppy: Uppy<M, B>, options?: FacebookOptions);
163
}
164

165
interface FacebookOptions {
166
  target?: string | Element;
167
  companionUrl: string;
168
  companionHeaders?: { [key: string]: string };
169
  companionAllowedHosts?: string | RegExp | (string | RegExp)[];
170
  companionCookiesRule?: string;
171
  title?: string;
172
  storage?: CompanionClientStorage;
173
  locale?: Locale;
174
}
175

176
/**
177
 * Unsplash photo library integration
178
 */
179
class Unsplash<M extends Meta = {}, B extends Body = {}> extends BasePlugin<UnsplashOptions> {
180
  constructor(uppy: Uppy<M, B>, options?: UnsplashOptions);
181
}
182

183
interface UnsplashOptions {
184
  target?: string | Element;
185
  companionUrl: string;
186
  companionHeaders?: { [key: string]: string };
187
  companionAllowedHosts?: string | RegExp | (string | RegExp)[];
188
  companionCookiesRule?: string;
189
  title?: string;
190
  storage?: CompanionClientStorage;
191
  locale?: Locale;
192
}
193
```
194

195
**Usage Examples:**
196

197
```typescript
198
// Social media integrations
199
uppy
200
  .use(Instagram, {
201
    companionUrl: 'https://companion.uppy.io'
202
  })
203
  .use(Facebook, {
204
    companionUrl: 'https://companion.uppy.io'
205
  })
206
  .use(Unsplash, {
207
    companionUrl: 'https://companion.uppy.io'
208
  });
209
```
210

211
### URL Import and Video Services
212

213
Plugins for importing files from URLs and video platforms.
214

215
```typescript { .api }
216
/**
217
 * Import files from URLs
218
 */
219
class Url<M extends Meta = {}, B extends Body = {}> extends BasePlugin<UrlOptions> {
220
  constructor(uppy: Uppy<M, B>, options?: UrlOptions);
221
}
222

223
interface UrlOptions {
224
  target?: string | Element;
225
  companionUrl: string;
226
  companionHeaders?: { [key: string]: string };
227
  companionAllowedHosts?: string | RegExp | (string | RegExp)[];
228
  companionCookiesRule?: string;
229
  title?: string;
230
  storage?: CompanionClientStorage;
231
  locale?: Locale;
232
}
233

234
/**
235
 * Zoom integration for recordings
236
 */
237
class Zoom<M extends Meta = {}, B extends Body = {}> extends BasePlugin<ZoomOptions> {
238
  constructor(uppy: Uppy<M, B>, options?: ZoomOptions);
239
}
240

241
interface ZoomOptions {
242
  target?: string | Element;
243
  companionUrl: string;
244
  companionHeaders?: { [key: string]: string };
245
  companionAllowedHosts?: string | RegExp | (string | RegExp)[];
246
  companionCookiesRule?: string;
247
  title?: string;
248
  storage?: CompanionClientStorage;
249
  locale?: Locale;
250
}
251
```
252

253
**Usage Examples:**
254

255
```typescript
256
// URL import
257
uppy.use(Url, {
258
  companionUrl: 'https://companion.uppy.io'
259
});
260

261
// Zoom recordings
262
uppy.use(Zoom, {
263
  companionUrl: 'https://companion.uppy.io'
264
});
265
```
266

267
### Remote Sources Container
268

269
Unified container plugin for multiple remote sources.
270

271
```typescript { .api }
272
/**
273
 * Container plugin that combines multiple remote sources
274
 */
275
class RemoteSources<M extends Meta = {}, B extends Body = {}> extends UIPlugin<RemoteSourcesOptions> {
276
  constructor(uppy: Uppy<M, B>, options?: RemoteSourcesOptions);
277
}
278

279
interface RemoteSourcesOptions {
280
  companionUrl: string;
281
  companionHeaders?: { [key: string]: string };
282
  companionAllowedHosts?: string | RegExp | (string | RegExp)[];
283
  companionCookiesRule?: string;
284
  sources: string[]; // Array of provider names: ['GoogleDrive', 'Dropbox', 'Instagram', etc.]
285
  storage?: CompanionClientStorage;
286
  locale?: Locale;
287
}
288
```
289

290
**Usage Example:**
291

292
```typescript
293
// Combined remote sources
294
uppy.use(RemoteSources, {
295
  companionUrl: 'https://companion.uppy.io',
296
  sources: [
297
    'GoogleDrive',
298
    'Dropbox', 
299
    'Box',
300
    'OneDrive',
301
    'Instagram',
302
    'Facebook',
303
    'Unsplash',
304
    'Url'
305
  ]
306
});
307
```
308

309
## Companion Integration
310

311
```typescript { .api }
312
/**
313
 * Companion client configuration
314
 */
315
interface CompanionClientOptions {
316
  companionUrl: string;
317
  companionHeaders?: { [key: string]: string };
318
  companionAllowedHosts?: string | RegExp | (string | RegExp)[];
319
  companionCookiesRule?: 'same-origin' | 'include' | 'omit';
320
  storage?: CompanionClientStorage;
321
}
322

323
interface CompanionClientStorage {
324
  getItem(key: string): string | null;
325
  setItem(key: string, value: string): void;
326
  removeItem(key: string): void;
327
}
328

329
/**
330
 * Provider authentication state
331
 */
332
interface ProviderAuthState {
333
  authenticated: boolean;
334
  token?: string;
335
  username?: string;
336
  email?: string;
337
}
338
```
339

340
## Cloud Provider Events
341

342
```typescript { .api }
343
// Authentication events
344
interface ProviderAuthEvents {
345
  'provider:auth': (provider: string, authData: ProviderAuthState) => void;
346
  'provider:logout': (provider: string) => void;
347
  'provider:error': (provider: string, error: Error) => void;
348
}
349

350
// File selection events
351
interface ProviderFileEvents<M extends Meta = {}, B extends Body = {}> {
352
  'provider:file-selected': (provider: string, file: RemoteFile) => void;
353
  'provider:folder-selected': (provider: string, folder: RemoteFolder) => void;
354
}
355
```
356

357
## Remote File Types
358

359
```typescript { .api }
360
interface RemoteFile {
361
  id: string;
362
  name: string;
363
  mimeType: string;
364
  size: number;
365
  modifiedDate: string;
366
  requestPath: string;
367
  thumbnail?: string;
368
  isFolder: boolean;
369
}
370

371
interface RemoteFolder {
372
  id: string;
373
  name: string;
374
  requestPath: string;
375
  items: (RemoteFile | RemoteFolder)[];
376
}
377
```