“Arfaly premium plugin”

Last Updated:Nov 6th, 2014
By: iTechFlare Ltd

Thank you for purchasing "Arfaly premium plugin" for your website.

Arfaly is a responsive jQuery based plugin, that simplifies the developers task to setup a multi/single file uploader component. It is highly configurable and easy to install. This plugin comes with a configurable server side PHP script that should be clear enough for developers to customize. It is important to know that there is a list of permitted file (MIME) types, which can be configured concurrently on both server/client side to filter out any type of harmful or undesired file types.
This plugin could be integrated into a form without a conflict, as it does only use pure javascript/jQuery to upload binary files.

Sample Arfaly.js plugin view

Setup

Download "Arfaly plugin" and save it to your local computer.
Extract the ZIP archive in a folder.
Now you need to access root, fonts, css, images and js folders to extract the following files:
- processMultipleUploads.php file: Which is responsible of processing all of the uploaded files and store them in a specific configurable folder, and if no configuration was made, the files will initially be stored in root path inside folder named 'uploads'. To change "upload" path, you can easily access the PHP file and modify the upload path in the header section according to your need.
- icomoon.eot, icomoon.svg, icomoon.ttf and icomoon.woff: These files do have the vectorized font icons that is been used by the plugin, and it is up to you whether you want to reuse them, or replace them with your own font based icons.
- style.css file: Where it contains all of neccessary CSS styles for this plugin. You can copy the internal content and append it into your own style sheet if you need to have a one centralized style sheet.
- Finally you need jquery + arfaly-min.js as they are the only javascript dependencies needed.

Here is how to import the libraries in your website:

										<link rel="stylesheet" type="text/css" href="css/style.css">
										<script language="javascript" type="text/javascript" src="js/jquery-1.11.1.min.js" ></script>
										<script language="javascript" type="text/javascript" src="js/arfaly-min.js" ></script>

And here is how you can define your Arfaly uploader DIV in a single line:

										<div id="company-files"></div>

Apply your settings for the plugin

This is how you activate the Arfaly uploader, using jQuery:

							$(document).ready(function(){
								
								// ==> Option one
								// Apply Arfaly to a div with default options
								// Note that all of the default options value are listed below
								$("#company-files").arfaly();
												
								--------------------
								
								// ==> Option two
								// Apply Arfaly to a div with custom options
								$("#company-files").arfaly(
									{
										limitNumberofFiles:10,				// Limit the number of total uploaded file per session
										debug:false,						// Enable/Disable debug for tracking error
										targetOutput:'.output',				// Print the output of the debug into a specific target HTML element 
										allowedFileSize: 1024 * 1024 * 10, 	
										disableRemovingItems:true,			// Disable removing upload items from the list
										delay:5000,							// Define a hide delay of each upload element if it is set to be hidden
										multi:true,							// Enable multi-file select/upload
										dragDrop:true,
										url: "processMultipleUploads.php",	// URL on where the files should be submitted
										dataType: "json",					// Define AJAX dataType
										type: "post",						// Define post type "GET/POST" (POST Recommended)
										label:'Allowed file types are gif, jpg, png, avi, mp3, wav, mp4, doc, docx, pdf, txt, zip and rar',
										labelColor:'rgb(90, 90, 90)',
										logoColor:'rgb(150, 155, 255)',		// Change the color of logo
										textColor:'#DADADA',				// Change the color of border line and text
										disablePostProgressAnimation: false,
										progressBarColor: 'red',			// Change the color of the progress-bar {red, orange, and green}
										action:'itech_arfaly_submission',	// Pass a custom JSON object to the server side along the files
										successfulUpload: arfaly.successfulUpload,	// Event handler for successful file upload
										failedUpload: arfaly.failedUpload,			// Event for unsuccessful file upload
										fileDeleted: arfaly.fileDeleted				// File deleted even 
									});
								}
							);

Please check the demo folder inside the plugin package for a full working demonstration.

And as you can see in the above script, you can either apply Arfaly into a DIV with default options as for the first option, or overriding the options as shown for the second option.

Plugin options

Option	Default	Description
limitNumberofFiles	`10`	Limit the number of total uploaded file per session
debug	`false`	Enable/Disable debug for tracking error for tracking obvious errors.
targetOutput	`'.output'`	Print the output of the debug into a specific target HTML element. You can either target element by ID using '#' prefix, or by class name using '.' prefix. By default the output will not be echo'ed, because the debug is set to false, but once you enable the debug option shown above and set it to true, the debug output will start to be printed into the defined targetOutput value.
allowedFileSize	`10 MB`	Using this option you can define the maximum size limit of a file.
disableRemovingItems	`true`	Disable removing upload items from the list.
delay	`5 sec`	Define hide delay of each upload element if it is configure to be hidden.
multi	`true`	Enable multi-file select/upload.
dragDrop	`true`	By setting the drag-n-drop feature to 'false', you will get the regular file upload button activated.
url	`"processMultipleUploads.php"`	Setting the url of the processMultipleUploads.php file that is responsible of filtering and storing the uploaded files.
dataType	`'json'`	The type of data that you're expecting back from the server. Check AJAX
type	`'POST'`	Define post type "GET/POST" (POST Recommended).
label	`'Allowed file types are gif,....'`	Modify this option to customize the message that will be exposed to the users, who use the plugin. Generally you can list the file extensions allowed here.
labelColor	`'rgb(90, 90, 90)'`	Change the color of the plugin label.
logoColor	`'rgb(150, 155, 255)'`	Change the color of logo.
textColor	`'#DADADA'`	Change the color of border line and text.
progressBarColor	`'red'`	This option defines the color and style of the progree bar, it can be either be set to strip of non-strip with 3 different colors: red strip red orange strip orange green strip green
disablePostProgressAnimation	`'false'`	By enabling this option, the progress bar strip animation will disabled after uploading is complete.
action	`'itech_arfaly_submission'`	Using this option you can pass any custom JSON object to the server side along the file uploads.
successfulUpload	`Event Type`: Result will be passed as an argument	You can use this event to get back all of the JSON result passed from the server side when a successful upload occurs.
failedUpload	`Event Type`: Result will be passed as an argument	You can use this event to get back all of the JSON result passed from the server side when a failed upload occurs.
fileDeleted	`Event Type`: Deleted file info will be passed as an argument	You can use this event to disable the default file delete logic and add your custom logic for file deletion.

All of the options listed above could be overridden as shown in the previous code snippet.

Server side script configuration

From the server side there will be only one PHP file that should process the uploaded files from the client side, and this single processing file is represented by the "processMultipleUploads.php" file.

Here is the code segments where you can add/permit your own file types to the filtering array called "allowedExts":

								############ Global settings ##############

								$localFileDestination		= 'uploads/'; // From server side, define the uploads folder url 
								$maxFileSize 			= 1024 * 1024 * 10; // Max 10MB
								$allowedExts 			= array( // Change this list to allow more files to be uploaded :)
									"gif", 
									"jPeg", 
									"jpg", 
									"png", 
									"avi", 
									"mp3", 
									"wav", 
									"mp4", 
									"dOc", 
									"docX", 
									"pdf",
									"txt",
									"zip", 
									"rar"
								);

Last but not least it is open for you, to extend this plugin and intefrate into whatever custom application you have. You can add extra codes to tag files with extra information and store their file path into your database correspondingly.

Client side script configuration

For security reasons, this plugin validates MIME file types in both server and client side. Because there are hundreds of MIME types for files, we couldn't include all of the MIME types by default inside of our client and server script, but we have rather included only the most common file types shown on the the following list:

Default file allowed in both server and client side:

Images:
- PNG
- GIF
- JPG
Audio:
- mp3
- wave
- mp4
Videos:
- avi
- mp4
- mkv
Archives:
- zip
- rar
Documents:
- text

So according to the above default allowed file extensions, you can disallow some types and allow others.
To disallow file type from being uploaded just remove its extension from server side correspondingly.

Last but not least it is open for you, to extend this plugin and integrate it into whatever custom application you have. You can add extra codes to tag files with extra information and store their file path into your database correspondingly.

Sources and Credits

We've used the following images, icons or other files as listed.

jQuery - http://jquery.com/
Iconmoon - Icon-Moon
Support - Get fast 48 Hr support

Demo page

Once again, thank you so much for purchasing this plugin. As we said in the beginning, we will be happy to help you if you have any questions relating to this plugin. We take pride in our work and care about our users. Thanks again!

Go To Table of Contents

"Arfaly plugin" Documentation