From 4137df44a1a45333ae58a7f577de116bc4a85ccb Mon Sep 17 00:00:00 2001 From: Tom Andrews Date: Fri, 9 Dec 2016 15:38:53 +0000 Subject: [PATCH 1/4] Uploads to azure --- src/wrappers/azure.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 src/wrappers/azure.js diff --git a/src/wrappers/azure.js b/src/wrappers/azure.js new file mode 100644 index 0000000..bf57212 --- /dev/null +++ b/src/wrappers/azure.js @@ -0,0 +1,14 @@ +import BaseWrapper from './base-wrapper' +import qq from 'fine-uploader/lib/core/azure' +import { traditional as callbackNames } from './callback-names' + +export default class FineUploaderAzure extends BaseWrapper { + constructor({ options }) { + super({ + callbackNames, + options, + qq, + type: 'azure' + }) + } +} From 00e55163e8dca58a822541a8993271e931f2bc70 Mon Sep 17 00:00:00 2001 From: Tom Andrews Date: Fri, 9 Dec 2016 17:06:14 +0000 Subject: [PATCH 2/4] Add azure documentation --- README.md | 83 +++++++++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 72 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index 2832a64..9ef8b02 100644 --- a/README.md +++ b/README.md @@ -17,20 +17,20 @@ Makes using [Fine Uploader](http://fineuploader.com) in a React app simple. Drop ## Docs -### Overview +### Overview React Fine Uploader makes using Fine Uploader and all of its unique features very simple in a React-based project. Thie library provides useful resources that can be divided into three sections: -#### Individual focused components (like `` and ``). +#### 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. -#### Higher-order components (like ``) +#### Higher-order components (like ``) 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. -#### Wrapper classes +#### Wrapper classes These wrap a Fine Uploader instance for use in React 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. @@ -39,6 +39,7 @@ These wrap a Fine Uploader instance for use in React Fine Uploader. They provide - [Installing](#installing) - [Wrapper Classes](#wrapper-classes) - [S3](#s3) - upload files to directly to an Amazon Simple Storage Service (S3) bucket. Your server must sign requests using a private key. + - [Azure](#azure) - upload files directly to Azure storage - [Traditional](#traditional) - upload files to a server you created and control. - [High-level Components](#high-level-components) - [``](#gallery-) @@ -87,7 +88,7 @@ const uploader = new FineUploaderS3({ ##### `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). +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) => { @@ -123,6 +124,66 @@ uploader.methods.addFiles(myFiles) uploader.methods.deleteFile(3) ``` +#### Azure + +This enables you to upload to Azure directly. Your server must provide signature and done endpoints. + +##### `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 'react-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) +``` + #### 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). @@ -150,7 +211,7 @@ const uploader = new FineUploaderTraditional({ ##### `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). +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) => { @@ -463,11 +524,11 @@ You may pass _any_ standard [`