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:
- Theming (Twitter Bootstrap ready)
- Set File size limit
- Set File extensions restrictions
- Set custom error messages
- Real-Time Progress Indicators
- Drag & Drop File Upload support
- Preview your media file (images,audios and videos)
- 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:
- New dragMode feature, you can now support drag & drop uploads
- Updated support for the latest libraries of jQuery and Twitter Bootstrap
- You can return data from the server-side script
- Preview Option, you can now on the queue view a preview of the file that you are uploading
- Set limit of the file uploads
Requirements
- jQuery 1.4.x or greater
- Web browser capable to render HTML5
- If you're using Bootstrap, you will need bootstrap.css from v3.0.x or greater
- A server processing script for the files
Implementation
- Download pekeUpload zip
- Unzip pekeUpload zip
- Then add a reference to the jQuery library.
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
- Below the reference to jQuery, add a reference to the pekeUpload script
<script type="text/javascript" src="js/pekeUpload.js"></script>
- On the page, add a file input.
<input id="file" type="file" name="file" />
- 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 |
| 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