QingUploader

A simple upload component based on QingModule.

Installation

Install via npm:

npm install --save qing-uploader

Usage

<script type="text/javascript" src="node_modules/jquery/dist/jquery.js"></script>
<script type="text/javascript" src="node_modules/qing-module/dist/qing-module.js"></script>
<script type="text/javascript" src="node_modules/qing-uploader/dist/qing-uploader.js"></script>

<a href="javascript:;" class="link-upload">Click to upload files</a>

var uploader = qing.uploader({
  el: '.link-upload',
  url: '/upload/url'
});

Options

url String, Required

Specify the upload API url on server.

params Hash

Specify extra params which will be sent to server with file data.

fileKey String

Specify the name that server will use to get file data.

connectionCount Number, Default: 3

Specify max number of upload connection that can exist simultaneously.

el Selector/Element/jQuery Object, Optional

Specify the container where QingUploader will render a input:file field for you. The files selected by this input:file field will be uploaded automatically by QingUploader.

multiple Boolean, Default: true

Specify whether the input:file field create by QingUploader can select multiple files.

_fileFormat String, Default: null

Same as accept input attribute.

Methods

upload ([File Object]/[File Element]/[File Array])

Use this method to start uploading, accept file object or input:file element or file object arrays as the only param.

cancel ([File Object]/fileId)

Cancel uploading a specific file and remove it from the upload queue.

destroy

Cancel all uploadings and destroy the component instance.

readImageFile ([File Object], callback)

Get base64 data of an image file, which is useful to preview image before uplloading.

Events

beforeupload (e, file)

Triggered before uploading, return false to cancel uploading.

uploadprogress (e, file, loaded, total)

Triggered multiple times during uploading process.

uploadsuccess (e, file, result)

Triggered after uploading complete and response status is 200.

uploaderror (e, file, xhr, status)

Triggered after uploading complete and response status is not 200.

uploadcomplete (e, file, responseText)

Triggered after uploading complete.

uploadcancel (e, file)

Triggered when a uploading is canceled by cancel() method

Development

Clone repository from github:

git clone https://github.com/mycolorway/qing-uploader.git

Install npm dependencies:

npm install

Run default gulp task to build project, which will compile source files, run test and watch file changes for you:

gulp

Now, you are ready to go.

Publish

If you want to publish new version to npm and bower, please make sure all tests have passed before you publish new version, and you need do these preparations:

• Check the version number in bower.json and package.json.

• Add new release information in CHANGELOG.md. The format of markdown contents will matter, because build scripts will get version and release content from this file by regular expression. You can follow the format of the older release information.

• Put your personal API tokens in /.token, which is required by the build scripts to request Github API for creating new release.

• Commit changes and push.

Now you can run gulp publish task, which will request Github API to create new release.

If everything goes fine, you can see your release at https://github.com/mycolorway/qing-uploader/releases. At the End you can publish new version to npm with the command:

npm publish

Please be careful with the last step, because you cannot delete or republish a release on npm.