Other versions:

FancyUpload - Swiff meets Ajax (v2.0)

Project FancyUpload - Swiff meets Ajax Showcase Swiff meets Ajax for powerful and elegant uploads. FancyUpload is a file-input replacement which features an unobtrusive, multiple-file selection menu and queued upload with an animated progress bar. It is easy to setup, is server independent, completely styleable via CSS and XHTML and uses MooTools to work in all modern browsers.

Showcases:

Showcase “Queued Photo Uploader”

Creating a nice looking upload queue, including animated progress bars.

The Action Happens Here

File Upload

Selected your photo to upload.
This form is just an example fallback for the unobtrusive behaviour of FancyUpload.

Browse Files | Browse Only Images | Clear List | Upload

Overall progress
File Progress
    This showcase is outdated, please visit the new showcase for FancyUpload 3.0. Documentation & Download for FancyUpload 3.0 here. 3.0 is the current release (more stable, more showcases, more documentation) and it is compatible with 2.0 and 2.1 (Old versions are not maintained anymore!).

    What happens?

    Check the automated log file after upload. The PHP script does not save the files but logs every request.

    Check the Firebug console for event debugging logs. Filesize is limited to 2Mb (client- and serverside).

    JavaScript & MooTools

    window.addEvent('load', function() {
     
    	var swiffy = new FancyUpload2($('demo-status'), $('demo-list'), {
    		'url': $('form-demo').action,
    		'fieldName': 'photoupload',
    		'path': '../../source/Swiff.Uploader.swf',
    		'onLoad': function() {
    			$('demo-status').removeClass('hide');
    			$('demo-fallback').destroy();
    		}
    	});
     
    	/**
    	 * Various interactions
    	 */
     
    	$('demo-browse-all').addEvent('click', function() {
    		swiffy.browse();
    		return false;
    	});
     
    	$('demo-browse-images').addEvent('click', function() {
    		swiffy.browse({'Images (*.jpg, *.jpeg, *.gif, *.png)': '*.jpg; *.jpeg; *.gif; *.png'});
    		return false;
    	});
     
    	$('demo-clear').addEvent('click', function() {
    		swiffy.removeFile();
    		return false;
    	});
     
    	$('demo-upload').addEvent('click', function() {
    		swiffy.upload();
    		return false;
    	});
     
    });

    XHTML Markup

    <form action="/project/fancyupload/2-0/showcase/photoqueue/script.php" method="post" enctype="multipart/form-data" id="form-demo">
    	<fieldset id="demo-fallback">
    		<legend>File Upload</legend>
    		<p>
    			Selected your photo to upload.<br />
    			<strong>This form is just an example fallback for the unobtrusive behaviour of FancyUpload.</strong>
    		</p>
    		<label for="demo-photoupload">
    			Upload Photos:
    			<input type="file" name="photoupload" id="demo-photoupload" />
    		</label>
    	</fieldset>
     
    	<div id="demo-status" class="hide">
    		<p>
    			<a href="#" id="demo-browse-all">Browse Files</a> |
    			<a href="#" id="demo-browse-images">Browse Only Images</a> |
    			<a href="#" id="demo-clear">Clear List</a> |
    			<a href="#" id="demo-upload">Upload</a>
    		</p>
    		<div>
    			<strong class="overall-title">Overall progress</strong><br />
    			<img src="../../assets/progress-bar/bar.gif" class="progress overall-progress" />
    		</div>
    		<div>
    			<strong class="current-title">File Progress</strong><br />
    			<img src="../../assets/progress-bar/bar.gif" class="progress current-progress" />
    		</div>
    		<div class="current-text"></div>
    	</div>
     
    	<ul id="demo-list"></ul>
     
    </form>

    PHP Script

    <?php
     
    $result = array();
     
    if (isset($_FILES['photoupload']) )
    {
    	$file = $_FILES['photoupload']['tmp_name'];
    	$error = false;
    	$size = false;
     
    	if (!is_uploaded_file($file) || ($_FILES['photoupload']['size'] > 2 * 1024 * 1024) )
    	{
    		$error = 'Please upload only files smaller than 2Mb!';
    	}
    	if (!$error && !($size = @getimagesize($file) ) )
    	{
    		$error = 'Please upload only images, no other files are supported.';
    	}
    	if (!$error && !in_array($size[2], array(1, 2, 3, 7, 8) ) )
    	{
    		$error = 'Please upload only images of type JPEG.';
    	}
    	if (!$error && ($size[0] < 25) || ($size[1] < 25))
    	{
    		$error = 'Please upload an image bigger than 25px.';
    	}
     
    	$addr = gethostbyaddr($_SERVER['REMOTE_ADDR']);
     
    	$log = fopen('script.log', 'a');
    	fputs($log, ($error ? 'FAILED' : 'SUCCESS') . ' - ' . preg_replace('/^[^.]+/', '***', $addr) . ": {$_FILES['photoupload']['name']} - {$_FILES['photoupload']['size']} byte\n" );
    	fclose($log);
     
    	if ($error)
    	{
    		$result['result'] = 'failed';
    		$result['error'] = $error;
    	}
    	else
    	{
    		$result['result'] = 'success';
    		$result['size'] = "Uploaded an image ({$size['mime']}) with  {$size[0]}px/{$size[1]}px.";
    	}
     
    }
    else
    {
    	$result['result'] = 'error';
    	$result['error'] = 'Missing file or internal error!';
    }
     
    if (!headers_sent() )
    {
    	header('Content-type: application/json');
    }
     
    echo json_encode($result);
     
    ?>

    CSS Stylesheet

    #demo-status
    {
    	background-color:		#F9F7ED;
    	padding:				10px 15px;
    	width:					420px;
    }
     
    #demo-status .progress
    {
    	background:				white url(../../assets/progress-bar/progress.gif) no-repeat;
    	background-position:	+50% 0;
    	margin-right:			0.5em;
    }
     
    #demo-status .progress-text
    {
    	font-size:				0.9em;
    	font-weight:			bold;
    }
     
    #demo-list
    {
    	list-style:				none;
    	width:					450px;
    	margin:					0;
    }
     
    #demo-list li.file
    {
    	border-bottom:			1px solid #eee;
    	background:				url(../../assets/file.png) no-repeat 4px 4px;
    }
    #demo-list li.file.file-uploading
    {
    	background-image:		url(../../assets/uploading.png);
    	background-color:		#D9DDE9;
    }
    #demo-list li.file.file-success
    {
    	background-image:		url(../../assets/success.png);
    }
    #demo-list li.file.file-failed
    {
    	background-image:		url(../../assets/failed.png);
    }
     
    #demo-list li.file .file-name
    {
    	font-size:				1.2em;
    	margin-left:			44px;
    	display:				block;
    	clear:					left;
    	line-height:			40px;
    	height:					40px;
    	font-weight:			bold;
    }
    #demo-list li.file .file-size
    {
    	font-size:				0.9em;
    	line-height:			18px;
    	float:					right;
    	margin-top:				2px;
    	margin-right:			6px;
    }
    #demo-list li.file .file-info
    {
    	display:				block;
    	margin-left:			44px;
    	font-size:				0.9em;
    	line-height:			20px;
    	clear
    }
    #demo-list li.file .file-remove
    {
    	clear:					right;
    	float:					right;
    	line-height:			18px;
    	margin-right:			6px;
    }

    This example and the accompanying sources/assets are © 2008-2009 by Harald Kirschner and available under The MIT License. For debugging and profiling the scripts and their markup download Firefox and use addons like Firebug and Web Developer Toolbar.

    Share it: Stumble it!Digg This!del.icio.us (1440 Posts: )

    discussion by DISQUS No Comments

    Please use the support forums for discussing the project, asking questions or posting bug-fixes!

    Sort:
    No Comments
    • First
    • ‹ Prev
    • Next ›
    • Last
    No Comments
    • First
    • ‹ Prev
    • Next ›
    • Last

    Post your comment

    Please use the support forums for discussing the project, asking questions or posting bug-fixes!


    Internet Consultant & Contractor

    I'm available to combine forces with you and your team to find the most simple, elegant and convenient web solutions . I await your call.

    If you just like my work and want to say Thank You, donate via PayPal or Amazon Wish List.

    Developer Resources & Tools