-
-
-
-
-
diff --git a/README.md b/README.md
index e0470dd..b81d850 100644
--- a/README.md
+++ b/README.md
@@ -1,110 +1,875 @@
-# vue-fineuploader
+
+
+
+
-[](https://travis-ci.org/Elhebert/vue-fineuploader)
-[](https://david-dm.org/Elhebert/vue-fineuploader)
-[](https://david-dm.org/Elhebert/vue-fineuploader?type=dev)
+[//]: # "[](https://www.npmjs.com/package/vue-fineuploader)"
+[](LICENSE)
+[](http://stackoverflow.com/questions/tagged/fine-uploader)
-A VueJS 2 Component for Fine Uploader's core.
+Makes using [Fine Uploader](http://fineuploader.com) in a VueJS 2 app simple. Drop-in high-level components for a turn-key UI. Use small focused components to build a more custom UI.
-## New Version In Progress
+**This is a in-progress project, that is based on [react-fine-uploader](https://github.com/FineUploader/react-fine-uploader), which is still an unstable in-progress project**
-I'm refactoring the `vue-fineuploader` component to be more customisable and to use all the options that fineuploader offer.
-You can see the **WIP** here [vue-fineuploader/feature/refactor](https://github.com/Elhebert/vue-fineuploader/tree/feature/refactor). This new version is based on the react components (https://github.com/FineUploader/react-fine-uploader).
-It'll offer a wrapper for each endpoints of fineuploader, and a component for all the UI options (dropzone, fileinput, cancel-button, ...).
+## Docs
-Be sure to check it out, and help in anyway you can, porting a component or the documenation, everyone can help !
+### Overview
-ETA: end of January.
+Vue Fine Uploader makes using Fine Uploader and all of its unique features very simple in a Vue-based project. Thie library provides useful resources that can be divided into three sections:
----
+#### Individual focused components (like `` and ``).
+These allow you to easily build a highly customizable and powerful UI for your upload widget, backed by Fine Uploader's core feature set. Most of these components are unstyled (i.e. ready to be styled by you). Focused component-specific stylesheets may be provided at a later date.
-## Usage
-### Installation
+#### Higher-order components (like ``)
-Get the `FineUploader` component:
+These combine many focused components that provide style (which can be adjusted via your own stylesheet) and enhanced UI-specific features. These components are essentially "turn-key", which means that you can get a fully functional upload widget up and running in your project with a few lines of code. Keep in mind that you of course still need a server to handle the requests sent by Fine Uploader and to server up the JavaScript and CSS files.
-- with npm:
+#### Wrapper classes
+
+These wrap a Fine Uploader instance for use in Vue Fine Uploader. They provide additional features such as the ability to dynamically register multiple event/callback listeners. All individual and higher-order/focused components require you to pass a constructed wrapper class instance.
+
+### Quick Reference
+
+- [Installing](#installing)
+- [Wrapper Classes](#wrapper-classes)
+ - [Azure](#azure) - upload files directly to Azure storage
+ - [S3](#s3) - upload files to directly to an Amazon Simple Storage Service (S3) bucket. Your server must sign requests using a private key.
+ - [Traditional](#traditional) - upload files to a server you created and control.
+- [High-level Components](#high-level-components)
+ - [``](#gallery-)
+- [Low-level Components](#low-level-components)
+ - [``](#cancel-button-)
+ - [``](#delete-button-)
+ - [``](#dropzone-)
+ - [``](#file-input-)
+ - [``](#filename-)
+ - [``](#filesize-)
+ - [``](#pause-resume-button-)
+ - [``](#progress-bar-)
+ - [``](#retry-button-)
+ - [``](#status-)
+ - [``](#thumbnail-)
+
+### Installing
+
+Two dependencies that you will need to install yourself: an A+/Promise spec compliant polyfill (for IE11) and VueJS 2 (which is a peer dependency). This version is still in beta, thus, not yet available on npm, clone this repository to use it.
+
+[//]: # "Simply `npm install vue-fine-uploader` and see the documentation for your specific integration instructions (based on your needs)."
+
+### Wrapper Classes
+
+#### Azure
+
+This enables you to upload to Azure directly. Your server must provide signature and done endpoints. The Azure uploading workflow is documented on the [Azure feature page](http://docs.fineuploader.com/branch/master/features/azure.html). Some examples servers can be found in the [server-examples repository](https://github.com/FineUploader/server-examples).
+
+##### `constructor({ options })`
+
+When creating a new instance of the Azure endpoint wrapper class, pass in an object that mirrors the format of the [Fine Uploader Azure Core options object](http://docs.fineuploader.com/branch/master/api/options-azure.html). This options property is entirely optional.
+
+```javascript
+import FineUploaderAzure from 'vue-fine-uploader/wrappers/azure'
+
+const uploader = new FineUploaderAzure({
+ options: {
+ signature: {
+ endpoint: '/upload/signature',
+ },
+ uploadSuccess: {
+ endpoint: '/upload/done',
+ }
+ }
+})
+```
+
+##### `on(eventName, handlerFunction)`
+
+Register a new callback/event handler. The `eventName` can be formatted with _or_ without the 'on' prefix. If you do use the 'on', prefix, be sure to follow lower-camel-case exactly ('onSubmit', not 'onsubmit'). If a handler has already been registered for this event, yours will be added to the "pipeline" for this event. If a previously registered handler for this event fails for some reason or returns `false`, you handler will _not_ be called. Your handler function may return a `Promise` if it is [listed as an event type that supports promissory/thenable return values](http://docs.fineuploader.com/branch/master/features/async-tasks-and-promises.html#promissory-callbacks).
+
+```javascript
+uploader.on('complete', (id, name, response) => {
+ // handle completed upload
+})
+```
+
+##### `off(eventName, handlerFunction)`
+
+Unregister a previously registered callback/event handler. Same rules for `eventName` as the `on` method apply here. The `handlerFunction` _must_ be the _exact_ `handlerFunction` passed to the `on` method when you initially registered said function.
+
+```javascript
+const completeHandler = (id, name, response) => {
+ // handle completed upload
+})
+
+uploader.on('complete', completeHandler)
+
+// ...later
+uploader.off('complete', completeHandler)
+```
+
+##### `options`
+
+The `options` property you used when constructing a new instance, sans any `callbacks`.
+
+##### `methods`
+
+Use this property to access any [core API methods exposed by Fine Uploader Azure](http://docs.fineuploader.com/branch/master/api/methods-azure.html).
+
+```javascript
+uploader.methods.getResumableFilesData(myFiles)
+```
+
+
+#### S3
+
+Use the traditional endpoint wrapper class if you would like to upload files directly to an Amazon Simple Storage Service (S3 bucket). Your server must be able to sign requests sent by Fine Uploader. If you enable the delete file feature, your server must handle these as well. You can read more about [S3 server requests in the documentation](http://docs.fineuploader.com/branch/master/endpoint_handlers/amazon-s3.html). The S3 uploading workflow is documented on the [S3 feature page](http://docs.fineuploader.com/branch/master/features/s3.html). Some examples servers can be found in the [server-examples repository](https://github.com/FineUploader/server-examples).
+
+##### `constructor({ options })`
+
+When creating a new instance of the S3 endpoint wrapper class, pass in an object that mirrors the format of the [Fine Uploader S3 Core options object](http://docs.fineuploader.com/branch/master/api/options-s3.html). You may also include a `callbacks` property to include any initial [core callback handlers](http://docs.fineuploader.com/branch/master/api/events-s3.html) that you might need. This options property is entirely optional though :laughing:.
+
+```javascript
+import FineUploaderS3 from 'vue-fine-uploader/wrappers/s3'
+
+const uploader = new FineUploaderS3({
+ options: {
+ request: {
+ endpoint: "http://fineuploadertest.s3.amazonaws.com",
+ accessKey: "AKIAIXVR6TANOGNBGANQ"
+ },
+ signature: {
+ endpoint: "/vendor/fineuploader/php-s3-server/endpoint.php"
+ }
+ }
+})
+```
+
+##### `on(eventName, handlerFunction)`
+
+Register a new callback/event handler. The `eventName` can be formatted with _or_ without the 'on' prefix. If you do use the 'on', prefix, be sure to follow lower-camel-case exactly ('onSubmit', not 'onsubmit'). If a handler has already been registered for this event, yours will be added to the "pipeline" for this event. If a previously registered handler for this event fails for some reason or returns `false`, you handler will _not_ be called. Your handler function may return a `Promise` if it is [listed as an event type that supports promissory/thenable return values](http://docs.fineuploader.com/branch/master/features/async-tasks-and-promises.html#promissory-callbacks).
+
+```javascript
+uploader.on('complete', (id, name, response) => {
+ // handle completed upload
+})
+```
+
+##### `off(eventName, handlerFunction)`
+
+Unregister a previously registered callback/event handler. Same rules for `eventName` as the `on` method apply here. The `handlerFunction` _must_ be the _exact_ `handlerFunction` passed to the `on` method when you initially registered said function.
+
+```javascript
+const completeHandler = (id, name, response) => {
+ // handle completed upload
+})
+
+uploader.on('complete', completeHandler)
+
+// ...later
+uploader.off('complete', completeHandler)
+```
+
+##### `options`
+
+The `options` property you used when constructing a new instance, sans any `callbacks`.
+
+##### `methods`
+
+Use this property to access any [core API methods exposed by Fine Uploader S3](http://docs.fineuploader.com/branch/master/api/methods-s3.html).
+
+```javascript
+uploader.methods.addFiles(myFiles)
+uploader.methods.deleteFile(3)
+```
+
+#### Traditional
+
+Use the traditional endpoint wrapper class if you would like to upload files to a server you control. Your server must handle _all_ requests sent by Fine Uploader, such as upload, delete file (optional), and chunking success (optional). You can read more about [traditional server requests in the documentation](http://docs.fineuploader.com/branch/master/endpoint_handlers/traditional.html). Some examples servers can be found in the [server-examples repository](https://github.com/FineUploader/server-examples).
+
+##### `constructor({ options })`
+
+When creating a new instance of the traditional endpoint wrapper class, pass in an object that mirrors the format of the [Fine Uploader Core options object](http://docs.fineuploader.com/branch/master/api/options.html). You may also include a `callbacks` property to include any initial [core callback handlers](http://docs.fineuploader.com/branch/master/api/events.html) that you might need. This options property is entirely optional.
+
+```javascript
+import FineUploaderTraditional from 'vue-fine-uploader'
+
+const uploader = new FineUploaderTraditional({
+ options: {
+ request: {
+ endpoint: 'my/upload/endpoint'
+ },
+ callbacks: {
+ onComplete: (id, name, response) => {
+ // handle completed upload
+ }
+ }
+ }
+})
```
-npm install --save vue-fineuploader
+
+##### `on(eventName, handlerFunction)`
+
+Register a new callback/event handler. The `eventName` can be formatted with _or_ without the 'on' prefix. If you do use the 'on', prefix, be sure to follow lower-camel-case exactly ('onSubmit', not 'onsubmit'). If a handler has already been registered for this event, yours will be added to the "pipeline" for this event. If a previously registered handler for this event fails for some reason or returns `false`, you handler will _not_ be called. Your handler function may return a `Promise` iff it is [listed as an event type that supports promissory/thenable return values](http://docs.fineuploader.com/branch/master/features/async-tasks-and-promises.html#promissory-callbacks).
+
+```javascript
+uploader.on('complete', (id, name, response) => {
+ // handle completed upload
+})
```
-- clone this repository and copy the `FineUploader.vue` into your project:
+
+##### `off(eventName, handlerFunction)`
+
+Unregister a previously registered callback/event handler. Same rules for `eventName` as the `on` method apply here. The `handlerFunction` _must_ be the _exact_ `handlerFunction` passed to the `on` method when you initially registered said function.
+
+```javascript
+const completeHandler = (id, name, response) => {
+ // handle completed upload
+})
+
+uploader.on('complete', completeHandler)
+
+// ...later
+uploader.off('complete', completeHandler)
```
-git clone https://github.com/Elhebert/vue-fineuploader.git
+
+##### `options`
+
+The `options` property you used when constructing a new instance, sans any `callbacks`.
+
+##### `methods`
+
+Use this property to access any [core API methods exposed by Fine Uploader](http://docs.fineuploader.com/branch/master/api/methods.html).
+
+```javascript
+uploader.methods.addFiles(myFiles)
+uploader.methods.deleteFile(3)
```
-### Properties
+### High-level Components
+
+#### ``
+
+Not implemented yet.
+
+### Low-level Components
+
+#### ``
+
+The `` component allows you to easily render a useable cancel button for a submitted file. An file can be "canceled" at any time, except after it has uploaded successfully, and before it has passed validation (and of course after it has already been canceled).
+
+By default, the `` will be rendered and clickable only when the associated file is eligible for cancelation. Otherwise, the component will _not_ render a button. In other words, once, for example, the associated file has been canceled or has uploaded successfully, the button will essentially disappear. You can change this behavior by setting appropriate options.
+
+##### Slots
+
+- *unamed* - child elements/components of ``. Use this for any text of graphics that you would like to display inside the rendered button. If the component is childless, the button will be rendered with a simple text node of "Cancel".
+
+##### Properties
+
+- `id` - The Fine Uploader ID of the submitted file. (required)
+
+- `onlyRenderIfCancelable` - Defaults to `true`. If set to `false`, the element will be rendered as a disabled button if the associated file is not cancelable.
+
+- `uploader` - A Fine Uploader [wrapper class](#wrapper-classes). (required)
+
+The example below will include a cancel button for each submitted file along with a [``](#thumbnail-), and will ensure the elements representing a file are removed if the file is canceled.
+
+```html
+
+
+
+
+
+
+
+
+```
-From the official documentation :
-> Fine Uploader's event system enables integrators to execute any operations at almost any point in the upload process. Knowing how these callbacks work, and when they are called, is crucial to unlocking the full potential of Fine Uploader.
+You may pass _any_ standard [`
+
+