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

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 http://download.lassosoft.com/pub/TotW/TotW_9319.zip

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 uplaod to the Uploads folder
the user used int he inline has file access over these folders

Check Steve's permissions guide if something goes wrong.

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

feel free to improve this draft !