pekeUpload

What is pekeUpload?

is a jQuery plugin that allows you to easily add multiple or single file upload functionality to your website. This plugin uses html5 only.

Some Features include:

1. Theming (Twitter Bootstrap ready)
2. Set File size limit
3. Set File extensions restrictions
4. Set custom error messages
5. Real-Time Progress Indicators
6. Drag & Drop File Upload support
7. Preview your media file (images,audios and videos)
8. And others more...

Do you like this plugin?

New Version 2.0!!

This version has been re-coded from scratch, and include new functionalities and has been updated to support jQuery 2.x.x and Bootstrap 3.x.x, there has been a lot of changes from v 1.0.6. Here's some of the new features:

1. New dragMode feature, you can now support drag & drop uploads
2. Updated support for the latest libraries of jQuery and Twitter Bootstrap
3. You can return data from the server-side script
4. Preview Option, you can now on the queue view a preview of the file that you are uploading
5. Set limit of the file uploads

Requirements

1. jQuery 1.4.x or greater
2. Web browser capable to render HTML5
3. If you're using Bootstrap, you will need bootstrap.css from v3.0.x or greater
4. A server processing script for the files

Implementation

1. Download pekeUpload zip
2. Unzip pekeUpload zip
3. Then add a reference to the jQuery library.

 <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>

4. Below the reference to jQuery, add a reference to the pekeUpload script

 <script type="text/javascript" src="js/pekeUpload.js"></script>

5. On the page, add a file input.

 <input id="file" type="file" name="file" />

7. Initialize pekeUpload on the file input

  $("#file").pekeUpload();

Plugin Options

| Option | Default | Format | Description| | ------ | ------- | ------- | ---------- | | dragMode| false | true/false | Set the mode of uploading the files, if you prefer the user drags & drops, or to click on a button and browse for the file | | dragText| "Drag and Drop your files here" | string | Set the text for the drag & drop area | | bootstrap | false | true/false | Set the theme for the uploader, false if you want to use your custom css, or true if you prefer the Twitter bootstrap-ready functionality, you can check css/custom.css to customize your uploader | | btnText| "Browse files..." | string | Set the text of the upload button | | allowedExtensions | "" | "ext1" | Sets the file extensions allowed to upload | | invalidExtError | "Invalid File Type" | string | Sets the error message when the file has an unsupported extension | | maxSize | 0 | float | Set the file size limit in MB, 0 means no limit | | sizeError | "Size of the file is greather than allowed" | string | Sets the error message when the file is bigger than size allowed | | showPreview| true | true/false | Sets if you want to show a preview (if the file is an audio,image or video) on the uploader queue | | showFilename | true | true/false | Sets if you want to show the file name on the uploader queue | | showPercent | true | true/false | Sets if you want to show the percent on the uploader queue | | showErrorAlerts | true | true/false | Sets if you want to show error alerts on the uploader queue | | errorOnResponse | "There has been an error uploading your file" | string | Sets the message when the file is uploaded and the response script returns that there is an error but a error message on the response was not found | | onSubmit| false | true/false | Gives you the option of upload the files when the files are selected or when you submit the form. | | url| "upload.php" | string | Set the url of upload script | | data | null | {var1:"value"} | Set POST additional data associated to the file | | limit | 0 | integer | Sets the limits of files that an user can uploads, 0 is unlimited | | limitError | "You have reached the limit of files that you can upload" | string | Sets the error message when a user tried to upload more files than the limit | | delfiletext | "Remove from queue" | string | Sets the default message of the button which allows to delete a file from a queue of uploads | | onFileError | function(file,error){} | function(file,error){} | Event triggered when some error ocurs, returns error (string), file (object). file returns file.name and file.size | | onFileSuccess | function(file,data){} | function(file,data){} | Event triggered when the file has been uploaded succesfully, returns data (string), file (object). file returns file.name and file.size |

Sever side script considerations

The file is received by the server side script with the name of the input, for example: if you set that the name of the input is image, then you must expect on the server-side script an input called image.

The server side script must return '1' or '{success:1}', if you wish to attach more data to the response just print a json string, if you want to set your custom error message, return the error property on the json string. See upload.php