Merge pull request #456 from transloadit/doc/missing-plugins

Add docs for remaining plugins

website/src/docs/fileinput.md

@@ -0,0 +1,48 @@
+---
+type: docs
+order: 25
+title: "FileInput"
+permalink: docs/fileinput/
+---
+
+`FileInput` is the most barebones UI for selecting files—it shows a single button that, when clicked, opens up the browser's file selector.
+
+[Try it live](/examples/xhrupload) - The XHRUpload example uses a `FileInput`.
+
+## Options
+
+```js
+uppy.use(FileInput, {
+  target: '.UppyForm',
+  getMetaFromForm: true,
+  replaceTargetContent: true,
+  multipleFiles: true,
+  pretty: true,
+  locale: {
+    strings: {
+      selectToUpload: 'Select to upload'
+    }
+  },
+  inputName: 'files[]'
+})
+```
+
+### `target: null`
+
+DOM element, CSS selector, or plugin to mount the file input into.
+
+### `multipleFiles: true`
+
+Whether to allow the user to select multiple files at once.
+
+### `pretty: true`
+
+When true, display a styled button (see [example](/examples/xhrupload)) that, when clicked, opens the file selector UI. When false, a plain old browser `<input type="file">` element is shown.
+
+### `inputName: 'files[]'`
+
+The `name` attribute for the `<input type="file">` element.
+
+### `locale: {}`
+
+Custom text to show on the button when `pretty` is true. There is only one string that can be configured: `strings.selectToUpload`.

website/src/docs/informer.md

@@ -0,0 +1,31 @@
+---
+type: docs
+order: 24
+title: "Informer"
+permalink: docs/informer/
+---
+
+The Informer is a pop-up bar for showing notifications. When plugins have some exciting news (or error) to share, they can show a notification here.
+
+[Try it live](/examples/dashboard/) - The Informer is included in the Dashboard by default.
+
+## Options
+
+### `target: null`
+
+DOM element, CSS selector, or plugin to mount the informer into.
+
+### `typeColors: {}`
+
+Customize the background and foreground colors for different types of notifications. Supported types are `info`, `warning`, `error`, and `success`. To customize colors, pass an object containing `{ bg, text }` color pairs for each type of notification:
+
+```js
+uppy.use(Informer, {
+  typeColors: {
+    info:    { text: '#fff', bg: '#000000' },
+    warning: { text: '#fff', bg: '#f6a623' },
+    error:   { text: '#fff', bg: '#e74c3c' },
+    success: { text: '#fff', bg: '#7ac824' }
+  }
+})
+```

website/src/docs/plugins.md

@@ -7,19 +7,20 @@ order: 10
 
 Plugins are what makes Uppy useful: they help select, manipulate and upload files.
 
-- **Acquirers (neat UIs for picking files):**
+- **Acquirers (various ways of picking files):**
   - [Dashboard](/docs/dashboard) — full featured sleek UI with file previews, metadata editing, upload/pause/resume/cancel buttons and more
   - [DragDrop](/docs/dragdrop) — plain and simple drag and drop area
-  - FileInput — even more plain and simple, just a button
+  - [FileInput](/docs/fileinput) — even more plain and simple, just a button
   - [Provider Plugins](#Provider-Plugins) (remote sources that work through [Uppy Server](/docs/uppy-server/)): Instagram, GoogleDrive, Dropbox
+  - [Webcam](/docs/webcam) — upload selfies or audio / video recordings
 - **Uploaders:**
   - [Tus](/docs/tus) — uploads using the [tus](https://tus.io) resumable upload protocol
   - [XHRUpload](/docs/xhrupload) — classic multipart form uploads or binary uploads using XMLHTTPRequest
   - [AwsS3](/docs/aws-s3) — uploader for AWS S3
 - **Progress:**
-  - ProgressBar — add a small YouTube-style progress bar at the top of the page
+  - [ProgressBar](/docs/progressbar) — add a small YouTube-style progress bar at the top of the page
   - [StatusBar](/docs/statusbar) — advanced upload progress status bar
-  - Informer — show notifications
+  - [Informer](/docs/informer) — show notifications
 - **Helpers:**
   - [GoldenRetriever](/docs/golden-retriever) — restore files and continue uploading after a page refresh or a browser crash
 - **Encoding Services:**

website/src/docs/progressbar.md

@@ -0,0 +1,34 @@
+---
+type: docs
+order: 23
+title: "ProgressBar"
+permalink: docs/progressbar/
+---
+
+ProgressBar is a minimalist plugin that shows the current upload progress in a thin bar element, similar to the ones used by YouTube and GitHub when navigating between pages.
+
+[Try it live](/examples/dragdrop/) - The DragDrop example uses ProgressBars to show progress.
+
+## Options
+
+```js
+uppy.use(ProgressBar, {
+  target: '.UploadForm',
+  fixed: false
+})
+```
+
+### `target: null`
+
+DOM element, CSS selector, or plugin to mount the progress bar into.
+
+### `fixed: false`
+
+When true, show the progress bar at the top of the page with `position: fixed`. When false, show the progress bar inline wherever it is mounted.
+
+```js
+uppy.use(ProgressBar, {
+  target: 'body',
+  fixed: true
+})
+```

website/src/docs/webcam.md

@@ -0,0 +1,57 @@
+---
+type: docs
+order: 26
+title: "Webcam"
+permalink: docs/webcam/
+---
+
+
+[Try it live](/examples/dashboard/) - The Informer is included in the Dashboard by default.
+
+## Options
+
+```js
+uppy.use(Webcam, {
+  onBeforeSnapshot: () => Promise.resolve(),
+  countdown: false,
+  modes: [
+    'video-audio',
+    'video-only',
+    'audio-only',
+    'picture'
+  ],
+  locale: {
+    strings: {
+      smile: 'Smile!'
+    }
+  }
+})
+```
+
+### `target: null`
+
+DOM element, CSS selector, or plugin to mount the informer into.
+
+### `countdown: false`
+
+When taking a picture: the amount of seconds to wait before actually taking a snapshot. If `false` or 0, the timeout is disabled entirely.
+This also shows a 'Smile!' message in the [Informer](/docs/informer) before the picture is taken.
+
+### `onBeforeSnapshot: () => Promise.resolve()`
+
+A hook function to call before a snapshot is taken. The Webcam plugin will wait for the returned Promise to resolve before taking the snapshot. This can be used to implement variations on the `countdown` option for example.
+
+### `modes: []`
+
+The types of recording modes to allow.
+
+ - `video-audio` - Record a video file, capturing both audio and video.
+ - `video-only` - Record a video file with the webcam, but don't record audio.
+ - `audio-only` - Record an audio file with the user's microphone.
+ - `picture` - Take a picture with the webcam.
+
+By default, all modes are allowed, and the Webcam plugin will show controls for recording video as well as taking pictures.
+
+### `locale: {}`
+
+There is only one localizable string: `strings.smile`. It's shown before a picture is taken, when the `countdown` option is set to true.