adrianmejias/html5-uploader

HTML5 file uploader.

Friday, January 20, 2017
by adrianmejias
Repository
1 Watchers
1 Stars
21 Installations

JavaScript
0 Dependents
0 Suggesters
0 Forks
0 Open issues
17 Versions
0 % Grown

The README.md

html5-uploader

Upload files using html5., _(*1)

Quick start
What's included
Example
Available options

Quick start

Several quick start options are available:, _(*2)

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:, _(*3)

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

Example

Example file upload and usage:, _(*4)

Demo: https://adrianmejias.com/html5-uploader, _(*5)

<!-- 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., _(*6)

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, _(*7)

<!-- 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
});

The Versions

20/01 2017

dev-master

9999999-dev https://adrianmejias.com/html5-uploader

HTML5 file uploader.

library html5-uploader

HTML5 file uploader.

adrianmejias/html5-uploader

The README.md

html5-uploader

Table of contents

Quick start

What's included

Example

Available options

The Versions

dev-master

The Requires

by Adrian Mejias

0.0.16

The Requires

by Adrian Mejias

dev-develop

The Requires

by Adrian Mejias

0.0.15

The Requires

by Adrian Mejias

0.0.14

The Requires

by Adrian Mejias

0.0.13

The Requires

by Adrian Mejias

0.0.12

The Requires

by Adrian Mejias

0.0.11

The Requires

by Adrian Mejias

0.0.9

The Requires

by Adrian Mejias

0.0.8

The Requires

by Adrian Mejias

0.0.7

by Adrian Mejias

0.0.6

by Adrian Mejias

0.0.5

by Adrian Mejias

0.0.4

by Adrian Mejias

0.0.3

by Adrian Mejias

0.0.2

by Adrian Mejias

0.0.1

by Adrian Mejias