fine-uploader-wrappers

These wrap a Fine Uploader instance as ES6 classes and provide additional features such as the ability to dynamically register multiple event/callback listeners. These classes are requirements in projects such as React Fine Uploader and Vue Fine Uploader, among others.

Installing

If you require support for IE11, you'll need to install an A+/Promise spec compliant polyfill. To install this wrapper classes package, simply npm install fine-uploader-wrappers and see the documentation below for your specific integration instructions (based on your needs).

You'll also need to explicitly install Fine Uploader. See the peerDependencies section of this project's package.json for acceptable version.

Wrapper Classes

Note: You can access the entire qq namespace on any uploader instance. For example, if you are using Fine Uploader S3, and want to access the status object, your code may look something like this:

constuploader=newFineUploaderS3({...})

constqueuedFileStatus=uploader.qq.status.QUEUED

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. Some examples servers can be found in the server-examples repository.

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. This options property is entirely optional.

importFineUploaderAzurefrom'fine-uploader-wrappers/azure'

constuploader=newFineUploaderAzure({

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.

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 handlerFunctionmust be the exacthandlerFunction passed to the on method when you initially registered said function.

constcompleteHandler=(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

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. The S3 uploading workflow is documented on the S3 feature page. Some examples servers can be found in the server-examples repository.

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. You may also include a callbacks property to include any initial core callback handlers that you might need. This options property is entirely optional though 😆.

importFineUploaderS3from'fine-uploader-wrappers/s3'

constuploader=newFineUploaderS3({

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.

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 handlerFunctionmust be the exacthandlerFunction passed to the on method when you initially registered said function.

constcompleteHandler=(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

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. Some examples servers can be found in the server-examples repository.

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. You may also include a callbacks property to include any initial core callback handlers that you might need. This options property is entirely optional.

importFineUploaderTraditionalfrom'fine-uploader-wrappers'

constuploader=newFineUploaderTraditional({

options:{

request:{

endpoint:'my/upload/endpoint'

},

callbacks:{

onComplete:(id,name,response)=>{

// handle completed upload

}

}

}

})

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.

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 handlerFunctionmust be the exacthandlerFunction passed to the on method when you initially registered said function.

constcompleteHandler=(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.