adrianmejias/html5-uploader

HTML5 file uploader.

0.0.16 2017-01-20 20:23 UTC

Requires

• jquery/jquery: 1.11.*

Replaces

• adrianmejias/html5-uploader: 0.0.16

Public Domain

• Adrian Mejias

• file
• jquery
• JS
• HTML5
• uploader

README

Upload files using html5.

Table of contents

• Quick start
• What's included
• Example
• Available options

Quick start

Several quick start options are available:

• Download the latest release.
• Clone the repo: git clone https://github.com/adrianmejias/html5-uploader.git.
• Install with Bower: bower install html5-uploader.

What's included

Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:

html5-uploader/
├── html5-uploader.js
├── html5-uploader.min.js

Example

Example file upload and usage:

Demo: https://adrianmejias.com/html5-uploader

<!-- Include jQuery Beforehand -->
<script src="html5-uploader.js"></script>
<form>
    <input type="file" name="file"/>
</form>

$('input[type=file]').html5uploader();

To override loaded javascript configuration settings, you will need to add data-* tags to the file (input) field. The setting accept may be set without data- attribute prefix.

Available options

• accept: array|string Mime-types that you wish to accept.
  • Alternatively you may provide accept tag in the file (input) field that will be translated internally. (Nothing fancy though...)
• fields: array|string Extra fields you wish to post.
  • Alternatively you may provide a string assigned as key=value|key=value|.. in a data-fields attribute.
• holder: string Element name where you drag and drop files to.
• preview: object|string Create your own preview function.
• progress: object|string Create your own progress function.
• url: string The url where the form data will post to.
• name: string The name of the form data will post as.
• complete: object|string Create your own completion function.
• debug: boolean Show console.log report in browser.

<input type="file" accept="image/png|image/jpeg|image/gif" data-url="upload.asp" data-fields="customFields" data-holder=".drag-n-dro-here" data-progress="customProgress" data-preview="customPreview" data-complete="customComplete">

or

<!-- alternate data-fields -->
..data-fields="token=ju3Fn55d24sADfa|type=image"..

$('input[type=file]').html5Uploader({
  name: 'file',
  accept: [
    'image/png',
    'image/jpeg',
    'image/gif'
  ],
  url: 'upload.asp',
  fields: [
    token: 'ju3Fn55d24sADfa'
  ],
  holder: '.drag-n-drop-here',
  progress: function(complete) {
    console.log('File is uploading. Currently at '+complete+'%');
  },
  preview: function(file){
    console.log('Would you look at this file.', file);
  },
  complete: function(file, response) {
    console.log('File uploaded.');
  },
  debug: false
});