1. Image Uploader 7.0.37
  2. Using Image Uploader
  3. Using Image Uploader at Runtime
This documentation is for the old version. Go to the latest Upload Suite docs

Restoring Upload List

Suppose that a user opens a page with Image Uploader and selects files for the upload. The user may leave this page for some reasons and reopen it after some time. And it would be nice to restore the upload list in this situation to save the user the trouble of selecting the same files again. Therefore, Image Uploader provides a possibility to save the upload list on the client side and restore it at any moment.

Note

Image Uploader Express does not restore upload lists. See the Comparison of Image Uploader Editions topic for details.

This functionality is implemented via the saveUploadList(Number), loadUploadList(Number), and resetUploadList(Number) methods of the uploadPane class:

  • saveUploadList(Number) saves the upload list with the specified ID.
  • loadUploadList(Number) loads the upload list with the specified ID.
  • resetUploadList(Number) resets the upload list with the specified ID.

All these methods use the ID parameter which should be a unique integer value corresponding to a particular upload list.

Note

Maximum number of upload lists allowed for saving is 50.

This feature can be illustrated with the examples below.

Multistep Upload Wizard

Using Image Uploader as a multistep upload wizard you can implement the following:

  1. Upload poor-quality thumbnails only.
  2. Show users these thumbnails to request some additional upload settings for each file.
  3. After all the preparations are done, return to the Image Uploader page and restore the upload list with files which were added on the first step.

Advanced Upload Recovering Functionality

Another application field of this feature is the advanced upload recovering functionality. In other words, you can handle the situation when the upload process was interrupted and can be resumed with the browser restart only. This functionality can be implemented as follows:

  1. Save the upload list before the upload process begins.
  2. Rewrite the upload list every time when the current file is successfully uploaded.
  3. Reset the upload list when all the files are uploaded.
  4. If some unexpected error occurs and Image Uploader should be reloaded, load the last modification of the upload list.

The following code sample demonstrates how to implement this functionality.

ASP.NET
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ImageUploader7._Default" %>
<%@ Register assembly="Aurigma.ImageUploader" Namespace="Aurigma.ImageUploader" tagprefix="aur" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Aurigma Image Uploader 7</title>
</head>
<body>
	<script type="text/javascript">
	function initCompleteHandler(){
		//Load the upload list 
		$au.uploader('Uploader1').uploadPane().loadUploadList(1);
	}

	function beforePackageUploadHandler(){
		//Save the upload list
		$au.uploader('Uploader1').uploadPane().saveUploadList(1);
	}

	function afterUploadHandler(){
		//Reset the upload list
		$au.uploader('Uploader1').uploadPane().resetUploadList(1);
	}
	</script>	
	<form id="form1" runat="server">
		<aur:Uploader ID="Uploader1" runat="server">
			<UploadSettings ActionUrl="upload.aspx" FilesPerPackage="1" />
			<ClientEvents>
				<aur:ClientEvent EventName="InitComplete" HandlerName="initCompleteHandler" />
				<aur:ClientEvent EventName="BeforePackageUpload" HandlerName="beforePackageUploadHandler" />
				<aur:ClientEvent EventName="AfterUpload" HandlerName="afterUploadHandler" />
			</ClientEvents>
		</aur:Uploader>
	</form>
</body>
</html>
PHP
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Aurigma Image Uploader 7</title>
</head>
<body>
	<script type="text/javascript">
	function initCompleteHandler(){
		//Load the upload list 
		$au.uploader('Uploader1').uploadPane().loadUploadList(1);
	}

	function beforePackageUploadHandler(){
		//Save the upload list
		$au.uploader('Uploader1').uploadPane().saveUploadList(1);
	}

	function afterUploadHandler(){
		//Reset the upload list
		$au.uploader('Uploader1').uploadPane().resetUploadList(1);
	}
	</script>	
	<?php
		require_once "ImageUploaderPHP/Uploader.class.php";
		$uploader = new Uploader("Uploader1");

		$uploader->getUploadSettings()->setActionUrl("upload.php");
		$uploader->getUploadSettings()->setFilesPerPackage(1);

		$uploader->getClientEvents()->setInitComplete("initCompleteHandler");
		$uploader->getClientEvents()->setBeforePackageUpload("beforePackageUploadHandler");
		$uploader->getClientEvents()->setAfterUpload("afterUploadHandler"));

		$uploader->render();
	?>
</body>
</html>
JavaScript
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Aurigma Image Uploader 7</title>
</head>
<body>
	<script type="text/javascript" src="Scripts/aurigma.uploader.js">  </script>
	<script type="text/javascript">
	function initCompleteHandler(){
		//Load the upload list 
		$au.uploader('Uploader1').uploadPane().loadUploadList(1);
	}

	function beforePackageUploadHandler(){
		//Save the upload list
		$au.uploader('Uploader1').uploadPane().saveUploadList(1);
	}

	function afterUploadHandler(){
		//Reset the upload list
		$au.uploader('Uploader1').uploadPane().resetUploadList(1);
	}
	
	var u = $au.uploader({
		id: 'Uploader1',
	
		uploadSettings: {
			actionUrl: "upload.aspx",
			filesPerPackage: 1
		},
		
		events: {
			initComplete: initCompleteHandler,
			beforePackageUpload: beforePackageUploadHandler,
			afterUpload: afterUploadHandler
		}
	});				 
    
	u.writeHtml();
	</script>	
</body>
</html>

See Also

Reference

Manual