Ajax Upload with Lasso and JQuery

Create a preview of an uploaded file without reloading

Introduction

This is a quickly written method for using file uploads with Ajax, i.e. without reloading your page.

It uses the work from phpletter.com so download it to get the JQuery files. We're going to have a custom Lasso part. http://www.phpletter.com/uploaded/projects/ajaxfileupload/ajaxfileupload.zip

You will only need the ajaxfileupload.js file and the loading.gif file (but you change this one as you like). Grab the latest JQuery library directly from http://www.jquery.com

What this example does

It sends the uploaded file via XHR (Ajax) to a Lasso file which will do some post-upload things and send back a thumbnail of the image with some info. The thumbnail and the info will be injected in the "response" div.

You can customize what is sent by editing the lasso file, and the JSON map created at the end.

You can control how the feddback is displayed by changing the HTML code generated by javascript in the th middle of the jquery callback function (beware of escaping everyhting, ' , " and / ...)

Just a start for anybody wanting to do avoid reloading the form page with 23 includes...

Let's do it !
You'll need to have an HTML Form and a few jquery lines in your page, like this:

<form name="form" action="" method="post" enctype="multipart/form-data">
<script type="text/javascript" src="jquery-latest.js"></script>
<script type="text/javascript" src="ajaxfileupload.js"></script>
<script type="text/javascript">
	function ajaxFileUpload()
{
	$("#loading")
	.ajaxStart(function(){
		$(this).show();
	})
	.ajaxComplete(function(){
		$(this).hide();
	});

	$.ajaxFileUpload
	(
		{
		url:'ajaxfileupload.lasso',
		secureuri:false,
		fileElementId:'fileToUpload',
		dataType: 'json',
		success: function (data, status)
		{
		if(typeof(data.error) != 'undefined')
		{
		if(data.error != '')
		{
			alert(data.error);
		}else
		{
		
		[noprocess]				
			//alert(data.msg);
			preview = 	"<div class=\"preview\">" +
			"<img src=\"" + (data.thumb) + "\"/><p>" +
			"name: " + (data.origname) + "<br/>" +
			"type: " + (data.filetype) + "<br/>" +
			"size: " + (data.size) + "<br/>" +
			"<\/p><\/div>";

			$("#fileset").hide();
			$("#response").html(preview);
			
		[/noprocess]
		}
		}
		},
		error: function (data, status, e)
		{
			alert(e);
		}
		}
	)
	return false;
}
</script>	

<img id="loading" src="loading.gif" style="display:none;">
		
<fieldset id="fileset">
<legend><b> Upload a file ... </b></legend>
<input id="fileToUpload" type="file" size="10" name="fileToUpload" class="input">
<button class="button" id="buttonUpload" onclick="return ajaxFileUpload();">Upload</button>
</fieldset>
<div id="response">&nbsp;</div>
</form>

The ajaxfileupload.lasso file to save in the same folder:

--! Lassoscript goes here --!

var('error') = string;
var('msg') = string;

inline(-username='user-who-can-upload', -password='pass');
	
If:(File_Uploads->Size) > 0; 

	$msg += 'Fileuploaded';

	iterate(File_Uploads, var('filetemp'));
		
		var('filetype') = $filetemp->(find:'type');
		var('origname') = $filetemp->(find:'OrigName');
		var('filesize') = $filetemp->(find:'Size');
		var('origextension') = $filetemp->(find:'OrigExtension');
	
		file_copy($filetemp->(find: 'Upload.Name'), 
					'/Uploads/'+$origname, 
			  -FileOverWrite);
		
		file_currenterror(-errorcode )!='0' ? $error += 'Lasso :'+error_code ': ' error_msg;

		
		if: $filetype >> 'image';
		
			var('upimg') = image('/Uploads/' + $origname);
			$upimg->execute('mogrify +profile "*"');
			$upimg->(Scale: -Height='100', -Thumbnail); 
			$upimg->(Save: '/Uploads/preview/'$origname, -Quality=70); 
		
	

                else if: $filetype >> 'application';


                //many things to do then...
                //depending on the file's type

                /if;

	
		error_code != '0' ? $error += 'Lasso :'+error_code ': ' error_msg;
	
	/iterate;
 


Else;

  $error += $error+' Error : no uploaded file. ';

/if;
	
/inline;


Encode_JSON: (Map: 'error'=$error, 
	           'msg'=$msg, 
	           'origname'=var('origname'),
                   'filetype'=var('filetype'),
		   'size'=(bytes_format(var('filesize'))), 
		   'thumb'='/Uploads/preview/'+var('origname')
					);

?>

This code assumes few things:

• it's written for Lasso 8.5
• you have the Encode_JSON tag from LassoSoft

Ajax_Upload_Lasso_and_JQuery.zip  

And in your LassoStartup:

• you have the bytes_format tag : http://tagswap.net/bytes_format in your LassoStartup
• you have a folder called 'Uploads' in your site's root
• Uploads' contains a 'preview' folder
• you can upload to the Uploads folder
• the user used in the inline has file access over these folders

This example only treats the image type, you could do much more with a csv file, showing the first lines, a PDF, etc

Author: Dominique Guardiola Falco
Created: 9 May 2008
Last Modified: 1 Mar 2011