webdork
asked on
JS AJAX File Upload
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.
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()
%>
****************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()
%>
ASKER
Hmm... I think your file was held in memory 'cause I don't see it in the upload folder. Did you delete it?
>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.
As I said, upload with Firefox but I download it with Chrome :)
Perhaps you're checking a bad folder.
ASKER
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.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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="sa vefiles"
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.
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="sa
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.
Check this link : http://blog.igstan.ro/2009/01/pure-javascript-file-upload.html
Have a look to this one too : http://www.thecssninja.com/javascript/drag-and-drop-upload
Have a look to this one too : http://www.thecssninja.com/javascript/drag-and-drop-upload
ASKER
thanks
Looks like those only work in FF. Need wider access than that.
Looks like those only work in FF. Need wider access than that.
For IE Active may help : http://www.sharewareconnection.com/versal-http-image-upload-activex-control.htm
ASKER
do not trust that site.
Thanks for the points!
Tested with Firefox, it work fine for me. I was able to download the pic with Chrome.
Clipboard03.jpg