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!
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: '',
file_icon: '',
progress_color: '#4a90e2',
time_show_errors: 5,
layout: 'thumbnails',
method: 'normal',
chunk_size: 1000000,
concurrent_uploads: 5,
show_percentage: true,
existing_files: false,
existing_files_removable: true,
send_existing_files: false,
url: 'ajax_upload.php',
delete_url: 'ajax_delete.php',
});
});
You need apply drop_uploader method to your input field with type file.
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.
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: '',
file_icon: '',
progress_color: '#4a90e2',
time_show_errors: 5,
layout: 'thumbnails',
method: 'normal',
chunk_size: 1000000,
concurrent_uploads: 5,
show_percentage: true,
existing_files: false,
existing_files_removable: true,
send_existing_files: false,
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.
concurrent_uploads - Amount of concurrent uploading threads.
show_percentage - Show uploading percentage counter for each file.
existing_files - Show in uploader custom files.
Example of using
existing_files: [
{
'id':'1',
'name': 'Some File',
'thumbnail': 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAASABIAAD/...'
},
{
'id':'2',
'name': 'Some File 2',
'thumbnail': 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAASABIAAD/...'
},
{
'id':'3',
'name': 'Some File 3',
'type': 'audio'
}
],
You can add file thumbnail as base64 encoded string. Also you can use type parameter to add fily type icon (can be audio, video)
existing_files_removable - User can delete files, that was initially added to uploader.
send_existing_files - Send files, that was initially added to uploader.
url - URL for AJAX and Chunked file uploading request.
delete_url - URL for AJAX and Chunked file deleting request.
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>
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.
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);
});