?
Solved

JS AJAX File Upload

Posted on 2010-09-01
11
Medium Priority
?
1,498 Views
Last Modified: 2012-06-21
I'm trying to allow web viewer to upload files and support instructions in a classic ASP environment. I purchased an upload routine but I want to modify it and the support docs are a bit thin.I want the user to be able to review files to be uploaded before starting the routine. On submit, I want the files to upload after I do some work on the file name like rename and strip offending characters.  

I think if I can get the file names into the do work form fields and then fire the upload routine on the post to page I'll be good to go.  This is where I need help.

This page allows the file selection but does not fire the upload routine.
http://74.81.196.208/aspupload/ajax-attachments.asp

This page fire the upload routine but without the review and file management.
http://74.81.196.208/aspupload/form-singlefile.asp

page code below.

****************form-singlefile***********
<%@ Language="VBScript" %>
<!-- #include file="aspuploader/include_aspuploader.asp" -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>
		Form - Single File Upload
	</title>
	<link href="demo.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<div class="demo">
                        
        <h2>Single File Upload</h2>
		<p> A basic sample demonstrating the use of the Upload control (Allowed file types: <span style="color:red">jpg, gif, png, zip</span>).</p>
		
		<%
		    Dim uploader
		    Set uploader=new AspUploader
		    uploader.Name="myuploader"
    		
		    uploader.MaxSizeKB=1024
		    uploader.InsertText="Upload File (Max 1M)"
            uploader.AllowedFileExtensions="*.jpg"
		    uploader.MultipleFilesUpload=true
    		
		    'Where'd the files go?
		    uploader.SaveDirectory="savefiles"
    		
		    uploader.render()
		%>
		
		<br/><br/>
			
    <script type='text/javascript'>
	function CuteWebUI_AjaxUploader_OnTaskComplete(task)
	{
		alert(task.FileName + " is uploaded!");
	}
	</script>
						
	</div>
</body>
</html>
****************ajax-attachments***********
<%@ Language="VBScript" %>
<!-- #include file="aspuploader/include_aspuploader.asp" -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>
		Ajax - Build attachments table
	</title>
	<link href="demo.css" rel="stylesheet" type="text/css" />
			
	<script type="text/javascript">
		var handlerurl='ajax-attachments-handler.asp'
		
		function CreateAjaxRequest()
		{
			var xh;
			if (window.XMLHttpRequest)
				xh = new window.XMLHttpRequest();
			else
				xh = new ActiveXObject("Microsoft.XMLHTTP");
			
			xh.open("POST", handlerurl, false, null, null);
			xh.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=utf-8");
			return xh;
		}
	</script>
	<script type="text/javascript">
	
	var fileArray=[];
	
	function ShowAttachmentsTable()
	{
		var table = document.getElementById("filelist");
		while(table.firstChild)table.removeChild(table.firstChild);
		
		AppendToFileList(fileArray);
	}
	function AppendToFileList(list)
	{
		var table = document.getElementById("filelist");
		
		for (var i = 0; i < list.length; i++)
		{
			var item = list[i];
			var row=table.insertRow(-1);
			row.setAttribute("fileguid",item.FileGuid);
			row.setAttribute("filename",item.FileName);
			var td1=row.insertCell(-1);
			td1.innerHTML="<img src='aspuploader/resources/circle.png' border='0'/>";
			var td2=row.insertCell(-1);
			td2.innerHTML=item.FileName;
			var td4=row.insertCell(-1);
			td4.innerHTML="[<a href='"+handlerurl+"?download="+item.FileGuid+"'>download</a>]";
			var td4=row.insertCell(-1);
			td4.innerHTML="[<a href='javascript:void(0)' onclick='Attachment_Remove(this)'>remove</a>]";
		}
	}
	
	function Attachment_FindRow(element)
	{
		while(true)
		{
			if(element.nodeName=="TR")
				return element;
			element=element.parentNode;
		}
	}
	
	function Attachment_Remove(link)
	{
		var row=Attachment_FindRow(link);
		if(!confirm("Are you sure you want to delete '"+row.getAttribute("filename")+"'?"))
			return;
		
		var guid=row.getAttribute("fileguid");
		
		var xh=CreateAjaxRequest();
		xh.send("delete=" + guid);

		var table = document.getElementById("filelist");
		table.deleteRow(row.rowIndex);
		
		for(var i=0;i<fileArray.length;i++)
		{
			if(fileArray[i].FileGuid==guid)
			{
				fileArray.splice(i,1);
				break;
			}
		}
	}
	
	function CuteWebUI_AjaxUploader_OnPostback()
	{
		var uploader = document.getElementById("myuploader");
		var guidlist = uploader.value;

		var xh=CreateAjaxRequest();
		xh.send("guidlist=" + guidlist);

		//call uploader to clear the client state
		uploader.reset();

		if (xh.status != 200)
		{
			alert("http error " + xh.status);
			setTimeout(function() { document.write(xh.responseText); }, 10);
			return;
		}

		var list = eval(xh.responseText); //get JSON objects
		
		fileArray=fileArray.concat(list);

		AppendToFileList(list);
	}
	
	function ShowFiles()
	{
		var msgs=[];
		for(var i=0;i<fileArray.length;i++)
		{
			msgs.push(fileArray[i].FileName);
		}
		alert(msgs.join("\r\n"));
	}
	
	</script>
</head>
<body>
	<div class="demo">
        <h2>Building attachment table (AJAX)</h2>
		<p>Jpegs only</p>
		    
		<%
		
		Dim uploader
		Set uploader=new AspUploader
		uploader.Name="myuploader"
		uploader.MaxSizeKB=1024
		uploader.InsertText="Upload File (Max 1M)"
        uploader.AllowedFileExtensions="*.jpg"
		uploader.MultipleFilesUpload=true
		%>

		<%=uploader.GetString() %>
			
			<br/><br/>

			<table id="filelist" style='border-collapse: collapse' class='Grid' border='0' cellspacing='0' cellpadding='2'>
			</table>
			
			<form id="form1" method="post" action="page1.asp">
			  <p>
			    <input name="File1" type="text" id="File1" />
</p>
			  <p>
			    <input name="File2" type="text" id="File2" />
			  </p>
			  <p>
			    <input type="submit" name="Submit" value="Submit-Do Work" />
		      </p>
	  </form>
			<br/><br/>
	</div>
	<script type='text/javascript'>
	//this is to show the header..
	ShowAttachmentsTable();
	</script>
	
</body>
</html>

****************ajax-attachments include***********

<%@ Language="VBScript" %>
<!-- #include file="aspuploader/include_aspuploader.asp" -->
<%

Dim uploader,mvcfile
Set uploader=new AspUploader
If Request.QueryString("download")&""<>"" Then
	Set mvcfile=uploader.GetUploadedFile(Request.QueryString("download"))
	Response.ContentType="application/oct-stream"
	Response.AddHeader "Content-Disposition","attachment; filename=""" & mvcfile.FileName & """"
	Dim data,stream
	Set stream=CreateObject("ADODB.Stream")
	stream.Mode=3
	stream.Type=1
	stream.Open()
	stream.LoadFromFile(mvcfile.FilePath)
	Dim ws,cs
	ws=0
	while ws<stream.Size
		cs=stream.Size-ws
		If cs>1000 Then
			cs=1000
		End If
		data=stream.Read(cs)
		Response.BinaryWrite(data)
		Response.Flush()
		ws=ws+cs
	wend
	
	stream.Close()
	Response.End()
End If

If Request.Form("delete")&""<>"" Then
	Set mvcfile=uploader.GetUploadedFile(Request.Form("delete"))
	Dim fso
	Set fso=CreateObject("Scripting.FileSystemObject")
	fso.DeleteFile(mvcfile.FilePath)
	Response.Write("OK")
	Response.End()
End If

If Request.Form("guidlist")&""<>"" Then
	Dim list,i
	list=Split(Request.Form("guidlist"),"/")
	Response.Write("[")
	For i=0 to Ubound(list)
		if i>0 then
			Response.Write(",")
		end if
		Set mvcfile=uploader.GetUploadedFile(list(i))
		Response.Write("{")
		Response.Write("FileGuid:'" & mvcfile.FileGuid & "'")
		Response.Write(",")
		Response.Write("FileSize:'" & mvcfile.FileSize & "'")
		Response.Write(",")
		Response.Write("FileName:'" & mvcfile.FileName & "'")
		Response.Write("}")
	Next
	Response.Write("]")
End If

Response.End()

%>

Open in new window

****************form-singlefile***********
<%@ Language="VBScript" %>
<!-- #include file="aspuploader/include_aspuploader.asp" -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>
		Form - Single File Upload
	</title>
	<link href="demo.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<div class="demo">
                        
        <h2>Single File Upload</h2>
		<p> A basic sample demonstrating the use of the Upload control (Allowed file types: <span style="color:red">jpg, gif, png, zip</span>).</p>
		
		<%
		    Dim uploader
		    Set uploader=new AspUploader
		    uploader.Name="myuploader"
    		
		    uploader.MaxSizeKB=1024
		    uploader.InsertText="Upload File (Max 1M)"
            uploader.AllowedFileExtensions="*.jpg"
		    uploader.MultipleFilesUpload=true
    		
		    'Where'd the files go?
		    uploader.SaveDirectory="savefiles"
    		
		    uploader.render()
		%>
		
		<br/><br/>
			
    <script type='text/javascript'>
	function CuteWebUI_AjaxUploader_OnTaskComplete(task)
	{
		alert(task.FileName + " is uploaded!");
	}
	</script>
						
	</div>
</body>
</html>
****************ajax-attachments***********
<%@ Language="VBScript" %>
<!-- #include file="aspuploader/include_aspuploader.asp" -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>
		Ajax - Build attachments table
	</title>
	<link href="demo.css" rel="stylesheet" type="text/css" />
			
	<script type="text/javascript">
		var handlerurl='ajax-attachments-handler.asp'
		
		function CreateAjaxRequest()
		{
			var xh;
			if (window.XMLHttpRequest)
				xh = new window.XMLHttpRequest();
			else
				xh = new ActiveXObject("Microsoft.XMLHTTP");
			
			xh.open("POST", handlerurl, false, null, null);
			xh.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=utf-8");
			return xh;
		}
	</script>
	<script type="text/javascript">
	
	var fileArray=[];
	
	function ShowAttachmentsTable()
	{
		var table = document.getElementById("filelist");
		while(table.firstChild)table.removeChild(table.firstChild);
		
		AppendToFileList(fileArray);
	}
	function AppendToFileList(list)
	{
		var table = document.getElementById("filelist");
		
		for (var i = 0; i < list.length; i++)
		{
			var item = list[i];
			var row=table.insertRow(-1);
			row.setAttribute("fileguid",item.FileGuid);
			row.setAttribute("filename",item.FileName);
			var td1=row.insertCell(-1);
			td1.innerHTML="<img src='aspuploader/resources/circle.png' border='0'/>";
			var td2=row.insertCell(-1);
			td2.innerHTML=item.FileName;
			var td4=row.insertCell(-1);
			td4.innerHTML="[<a href='"+handlerurl+"?download="+item.FileGuid+"'>download</a>]";
			var td4=row.insertCell(-1);
			td4.innerHTML="[<a href='javascript:void(0)' onclick='Attachment_Remove(this)'>remove</a>]";
		}
	}
	
	function Attachment_FindRow(element)
	{
		while(true)
		{
			if(element.nodeName=="TR")
				return element;
			element=element.parentNode;
		}
	}
	
	function Attachment_Remove(link)
	{
		var row=Attachment_FindRow(link);
		if(!confirm("Are you sure you want to delete '"+row.getAttribute("filename")+"'?"))
			return;
		
		var guid=row.getAttribute("fileguid");
		
		var xh=CreateAjaxRequest();
		xh.send("delete=" + guid);

		var table = document.getElementById("filelist");
		table.deleteRow(row.rowIndex);
		
		for(var i=0;i<fileArray.length;i++)
		{
			if(fileArray[i].FileGuid==guid)
			{
				fileArray.splice(i,1);
				break;
			}
		}
	}
	
	function CuteWebUI_AjaxUploader_OnPostback()
	{
		var uploader = document.getElementById("myuploader");
		var guidlist = uploader.value;

		var xh=CreateAjaxRequest();
		xh.send("guidlist=" + guidlist);

		//call uploader to clear the client state
		uploader.reset();

		if (xh.status != 200)
		{
			alert("http error " + xh.status);
			setTimeout(function() { document.write(xh.responseText); }, 10);
			return;
		}

		var list = eval(xh.responseText); //get JSON objects
		
		fileArray=fileArray.concat(list);

		AppendToFileList(list);
	}
	
	function ShowFiles()
	{
		var msgs=[];
		for(var i=0;i<fileArray.length;i++)
		{
			msgs.push(fileArray[i].FileName);
		}
		alert(msgs.join("\r\n"));
	}
	
	</script>
</head>
<body>
	<div class="demo">
        <h2>Building attachment table (AJAX)</h2>
		<p>Jpegs only</p>
		    
		<%
		
		Dim uploader
		Set uploader=new AspUploader
		uploader.Name="myuploader"
		uploader.MaxSizeKB=1024
		uploader.InsertText="Upload File (Max 1M)"
        uploader.AllowedFileExtensions="*.jpg"
		uploader.MultipleFilesUpload=true
		%>

		<%=uploader.GetString() %>
			
			<br/><br/>

			<table id="filelist" style='border-collapse: collapse' class='Grid' border='0' cellspacing='0' cellpadding='2'>
			</table>
			
			<form id="form1" method="post" action="page1.asp">
			  <p>
			    <input name="File1" type="text" id="File1" />
</p>
			  <p>
			    <input name="File2" type="text" id="File2" />
			  </p>
			  <p>
			    <input type="submit" name="Submit" value="Submit-Do Work" />
		      </p>
	  </form>
			<br/><br/>
	</div>
	<script type='text/javascript'>
	//this is to show the header..
	ShowAttachmentsTable();
	</script>
	
</body>
</html>

****************ajax-attachments include***********

<%@ Language="VBScript" %>
<!-- #include file="aspuploader/include_aspuploader.asp" -->
<%

Dim uploader,mvcfile
Set uploader=new AspUploader
If Request.QueryString("download")&""<>"" Then
	Set mvcfile=uploader.GetUploadedFile(Request.QueryString("download"))
	Response.ContentType="application/oct-stream"
	Response.AddHeader "Content-Disposition","attachment; filename=""" & mvcfile.FileName & """"
	Dim data,stream
	Set stream=CreateObject("ADODB.Stream")
	stream.Mode=3
	stream.Type=1
	stream.Open()
	stream.LoadFromFile(mvcfile.FilePath)
	Dim ws,cs
	ws=0
	while ws<stream.Size
		cs=stream.Size-ws
		If cs>1000 Then
			cs=1000
		End If
		data=stream.Read(cs)
		Response.BinaryWrite(data)
		Response.Flush()
		ws=ws+cs
	wend
	
	stream.Close()
	Response.End()
End If

If Request.Form("delete")&""<>"" Then
	Set mvcfile=uploader.GetUploadedFile(Request.Form("delete"))
	Dim fso
	Set fso=CreateObject("Scripting.FileSystemObject")
	fso.DeleteFile(mvcfile.FilePath)
	Response.Write("OK")
	Response.End()
End If

If Request.Form("guidlist")&""<>"" Then
	Dim list,i
	list=Split(Request.Form("guidlist"),"/")
	Response.Write("[")
	For i=0 to Ubound(list)
		if i>0 then
			Response.Write(",")
		end if
		Set mvcfile=uploader.GetUploadedFile(list(i))
		Response.Write("{")
		Response.Write("FileGuid:'" & mvcfile.FileGuid & "'")
		Response.Write(",")
		Response.Write("FileSize:'" & mvcfile.FileSize & "'")
		Response.Write(",")
		Response.Write("FileName:'" & mvcfile.FileName & "'")
		Response.Write("}")
	Next
	Response.Write("]")
End If

Response.End()

%>

Open in new window

0
Comment
Question by:webdork
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 5
11 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 33578856
>This page allows the file selection but does not fire the upload routine.
Tested with Firefox, it work fine for me. I was able to download the pic with Chrome.


Clipboard03.jpg
0
 

Author Comment

by:webdork
ID: 33578893
Hmm... I think your file was held in memory 'cause I don't see it in the upload folder. Did you delete it?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33579106
>Hmm... I think your file was held in memory 'cause I don't see it in the upload folder. Did you delete it?

As I said, upload with Firefox but I download it with Chrome :)

Perhaps you're checking a bad folder.
0
Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

 

Author Comment

by:webdork
ID: 33590407
Not checking a bad folder. Yes it will download because I'm assuming it is held in memory, but it does not get to the assigned folder. Anyway, I need to fire the upload routine on the next page.
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 2000 total points
ID: 33591244
>Yes it will download because I'm assuming it is held in memory

memory of the server ?
Else I can't understand how I can download it from two differents browsers.
0
 

Author Comment

by:webdork
ID: 33591675
If you upload on this page the file goes in the proper folder.
http://74.81.196.208/aspupload/form-singlefile.asp

You can see in the attached snippet above for form-singlefile the render command.

  'Where'd the files go?
 uploader.SaveDirectory="savefiles"
 uploader.render()

That render command is not in the ajax attachments page where you did your upload.  And it shouldn't be.  I want the viewer to be able to "stage" his upload files before final submission. He may want to add some or remove some before he transacts. Once the files to be uploaded are marshaled, there is other form data to be entered by the viewer. On final submission I need to have the files uploaded along with the form data to be processed.


0
 
LVL 82

Expert Comment

by:leakim971
ID: 33592533
0
 

Author Comment

by:webdork
ID: 33592573
thanks

Looks like those only work in FF.  Need wider access than that.

0
 
LVL 82

Expert Comment

by:leakim971
ID: 33592606
0
 

Author Comment

by:webdork
ID: 33601395
do not trust that site.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33650120
Thanks for the points!
0

Featured Post

Enroll in August's Course of the Month

August's CompTIA IT Fundamentals course includes 19 hours of basic computer principle modules and prepares you for the certification exam. It's free for Premium Members, Team Accounts, and Qualified Experts!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question