Responsive Fancy Multi File Uploader Using FancyFileUpload Jquery Plugin

FancyFileUpload Jquery Plugin to convert the HTML file input type into a mobile-friendly fancy file uploader with drag and drop feature you can also select multiple files in single attempt and upload on server, These are lot’s of customize options to make file uploading as per your project need.


* Beautiful and fully responsive layout.
* Drag-and-drop dropzone with paste support.
* Full keyboard navigation.
* Client-side file naming.
* Preview support for images, audio, and video.
* Chunked file upload support.
* Lots of useful callbacks.
* Automatic retries with exponential fallback.
* Multilingual support.
* Has a liberal open source license. MIT or LGPL, your choice.
* Designed for relatively painless integration into your project.

Integrate FancyFileUpload Jquery Plugin On Website


jQuery is required to use this software so hopefully that doesn’t come as a surprise to anyone. Parts of this plugin require the jQuery UI widget factory. If you are already including jQuery UI on your webpage, then you already have the widget factory and don’t need to do anything else. Otherwise, add this line after including jQuery

<link rel="stylesheet" href="fancy-file-uploader/fancy_fileupload.css" type="text/css" media="all" />
<script type="text/javascript" src=""></script>
<script type="text/javascript" src="fancy-file-uploader/jquery.ui.widget.js"></script>
<script type="text/javascript" src="fancy-file-uploader/jquery.fileupload.js"></script>
<script type="text/javascript" src="fancy-file-uploader/jquery.iframe-transport.js"></script>
<script type="text/javascript" src="fancy-file-uploader/jquery.fancy-fileupload.js"></script>


Create file input box which you need to use as file uploader box.

<input id="thefiles" type="file" name="files" accept=".jpg, .png, image/jpeg, image/png" multiple>


To transform selected file input into something fancy, call plugin and pass in some options to the plugin and let the magic begin.

<script type="text/javascript">
$(function() {
		params : {
			action : 'fileuploader'
		maxfilesize : 1000000

Fancy File Uploader works with most server-side languages. For basic server-side PHP integration with Fancy File Uploader, you can use the included server-side helper class fancy_file_uploader_helper.php found under server-side-helpers directory include this helper class on your php page.

	require_once "fancy_file_uploader_helper.php";
	if (isset($_REQUEST["action"]) && $_REQUEST["action"] === "fileuploader")
		header("Content-Type: application/json");
		$allowedexts = array(
			"jpg" => true,
			"png" => true,
		$files = FancyFileUploaderHelper::NormalizeFiles("files");
		if (!isset($files[0]))  $result = array("success" => false, "error" => "File data was submitted but is missing.", "errorcode" => "bad_input");
		else if (!$files[0]["success"])  $result = $files[0];
		else if (!isset($allowedexts[strtolower($files[0]["ext"])]))
			$result = array(
				"success" => false,
				"error" => "Invalid file extension.  Must be '.jpg' or '.png'.",
				"errorcode" => "invalid_file_ext"
			$name = FancyFileUploaderHelper::GetChunkFilename();
			if ($name !== false)
				$startpos = FancyFileUploaderHelper::GetFileStartPosition();
				// copy($files[0]["file"], __DIR__ . "/images/" . $id . "." . strtolower($files[0]["ext"]));
			$result = array(
				"success" => true
		echo json_encode($result, JSON_UNESCAPED_SLASHES);

See live demo and download source code.


See official github repository for more information and follow for future updates.