Responsive Fancy Multi File Uploader Using FancyFileUpload Jquery Plugin

by Posted on

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.
jquery-fancy-fileuploader

Features

* 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

Libraries

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

<!--CSS-->
<link rel="stylesheet" href="fancy-file-uploader/fancy_fileupload.css" type="text/css" media="all" />
 
<!--JS-->
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></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>

HTML

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>

JS

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() {
	$('#thefiles').FancyFileUpload({
		params : {
			action : 'fileuploader'
		},
		maxfilesize : 1000000
	});
});
</script>




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.

<?php
	require_once "fancy_file_uploader_helper.php";
 
	// Depending on your server, you might have to use $_POST instead of $_REQUEST.
	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"
			);
		}
		else
		{
			// For chunked file uploads, get the current filename and starting position from the incoming headers.
			$name = FancyFileUploaderHelper::GetChunkFilename();
			if ($name !== false)
			{
				$startpos = FancyFileUploaderHelper::GetFileStartPosition();
 
				// [Do stuff with the file chunk.]
			}
			else
			{
				// [Do stuff with the file here.]
				// copy($files[0]["file"], __DIR__ . "/images/" . $id . "." . strtolower($files[0]["ext"]));
			}
 
			$result = array(
				"success" => true
			);
		}
 
		echo json_encode($result, JSON_UNESCAPED_SLASHES);
		exit();
	}
?>

See live demo and download source code.

DEMO | DOWNLOAD

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



Published by admin