“Drop Uploader” Documentation by Horoshilow Boris v2.0


“Drop Uploader”

Created: 07/06/2016
By: Horishilow Boris
Email: support@borisolhor.com

Thank you for purchasing my item. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!


Table of Contents

  1. Including plugin files
  2. Quick start guide
  3. JS Plugin Options
  4. File Input Options
  5. File Uploading
  6. JS Events

A) Including plugin files - top

To use this plugin you must include following files:


<link rel="stylesheet" href="pe-icon-7-stroke/css/pe-icon-7-stroke.css">
<link rel="stylesheet" href="css/drop_uploader.css">

<script src="js/jquery-3.2.1.js"></script>
<script src="js/drop_uploader.js"></script>
		

Note: You must include jQuery plugin before drop_uploader.js file.

You can use another icons (instead pe-7). In this case you need to set other icon params in plugin options.

Also you need to include following script to activate drop uploader


$(document).ready(function(){
    $('input[type=file]').drop_uploader({
        uploader_text: 'Drop files to upload, or',
        browse_text: 'Browse',
        only_one_error_text: 'Only one file allowed',
        not_allowed_error_text: 'File type is not allowed',
        big_file_before_error_text: 'Files, bigger than',
        big_file_after_error_text: 'is not allowed',
        allowed_before_error_text: 'Only',
        allowed_after_error_text: 'files allowed',
        browse_css_class: 'button button-primary',
        browse_css_selector: 'file_browse',
        uploader_icon: '<i class="pe-7s-cloud-upload"></i>',
        file_icon: '<i class="pe-7s-file"></i>',
        progress_color: '#4a90e2',
        time_show_errors: 5,
        layout: 'thumbnails',
        method: 'normal',
        chunk_size: 1000000, 
        url: 'ajax_upload.php',
        delete_url: 'ajax_delete.php',
    });
});
	    

You need apply drop_uploader method to your input field with type file.


B) Quick start guide - top

To start use this plugin just include script files (javascript and CSS from drop uploader and also jQuery plugin and icons) and copy example code, which you can find in index.html file. After that you can change form fields, file uploading options and so on.


C) JS Plugin Options - top

Drop Uploader have some options, that you can find here:


$(document).ready(function(){
    $('input[type=file]').drop_uploader({
        uploader_text: 'Drop files to upload, or',
        browse_text: 'Browse',
        only_one_error_text: 'Only one file allowed',
        not_allowed_error_text: 'File type is not allowed',
        big_file_before_error_text: 'Files, bigger than',
        big_file_after_error_text: 'is not allowed',
        allowed_before_error_text: 'Only',
        allowed_after_error_text: 'files allowed',
        browse_css_class: 'button button-primary',
        browse_css_selector: 'file_browse',
        uploader_icon: '<i class="pe-7s-cloud-upload"></i>',
        file_icon: '<i class="pe-7s-file"></i>',
        progress_color: '#4a90e2',
        time_show_errors: 5,
        layout: 'thumbnails',
        method: 'normal',
        chunk_size: 1000000, 
        url: 'ajax_upload.php',
        delete_url: 'ajax_delete.php',
    });
});
	    

uploader_text - File uploader description text

browse_text - Browse file text

only_one_error_text - Only one file allowed error text

not_allowed_error_text - File type is not allowed error text

big_file_before_error_text - Files, bigger than is not allowed error text (before file size)

big_file_after_error_text - Files, bigger than is not allowed error text (after file size)

allowed_before_error_text - Only FILETYPE files allowed error text (before file type)

allowed_after_error_text - Only FILETYPE files allowed error text (after file type)

browse_css_class - Browse file link classes

uploader_icon - Icon before description text

file_icon - File icon in file upload list

progress_color - Progress Bar color

time_show_errors - Time in seconds, before error text is disappear. Set to 0 to disable error disappearing.

layout - Method, how to display selcted files in drop Uploader. Can be List or Thumbnails (by default).

method - Method, how to upload files to the server. Can be ajax, chunked or normal (by default).

chunk_size - Chunk size in bytes. Must be less than max_upload_size option.

url - URL for AJAX and Chunked file uploading request.

delete_url - URL for AJAX and Chunked file deleting request.


D) File Input Options - top

Drop Uploader supports default file input attributes, such as multiple and accept. You can use these attributes to in control file uploading via Drop Uploader.


<form method="POST" action="upload.php" enctype="multipart/form-data">
    <input type="file" multiple name="file[]" accept="image/*">
    <input class="button-primary" type="submit" value="Submit">
</form>
        

Also you can add file size limit by adding attribute data-maxfilesize (maximum file size in bytes).


<h4>Only Files Less than 1 Mb</h4>
<form method="POST" action="upload.php" enctype="multipart/form-data">
    <input type="file" multiple name="file[]" data-maxfilesize="1000000">
    <input class="button-primary" type="submit" value="Submit">
</form>
		

Note: PHP server also have max file size restriction. See more info here.

You can set file list layout by adding attribute data-layout (it can be thumbnails or list). This field will overwrite global Drop Uploader settings


<h4>File List Layout</h4>
<form method="POST" action="upload.php" enctype="multipart/form-data">
    <input type="file" name="file[]" multiple data-layout="list">
    <input class="button-primary" type="submit" value="Submit">
</form>
		

You can set file upload method by adding attribute data-method (it can be normal, ajax or chunked). This field will overwrite global Drop Uploader settings. Also if you use AJAX or Chunked method, you also can set data-url and data-deleteurl attributes here.


<h4>AJAX Upload Form</h4>
<form method="POST" action="upload.php" enctype="multipart/form-data"gt;
    <input type="file" name="file[]" data-method="ajax" multiplegt;
    <input class="button-primary" type="submit" value="Submit"gt;
</formgt;
		

You can set file uploading limit by adding attribute data-count.


<h4>Three File Upload Form</h4>
<form method="POST" action="upload.php" enctype="multipart/form-data">
    <input type="file" name="file[]" multiple data-count="3">
    <input class="button-primary" type="submit" value="Submit">
</form>
		

E) File Uploading - top

To transfer files to server you need to set form enctype="multipart/form-data" attribute. Also you need to add function, that will recieve files on server side. You can see working PHP example in upload.php file. For AJAX and Chunked file uploading you can see working examples in ajax_upload.php file. ajax_delete.php file is used to delete files, that was uploaded via AJAX.


F) JS Events - top

There is two JS events, that you can listen: file_upload_start and file_upload_end. This events is only available in AJAX or Chunked mode. As additional parameter you can get uploaded file name.


$("#drop_uploader_8").on("file_upload_start", function(event, name){
    alert("Start upload" + name);
});