asked on

Gmail like uploading

Dear All,

I know that update controls are NOT compatible inside update panels.

But in gmail when you select a file to attach and click on "add another file" link, you actually

find that the viewstate of the first file is maintained.

How to do a similar thing?

Thanks in advance,

Prasad.

Praveen Venu

http://www.petefreitag.com/item/587.cfm

http://www.codeproject.com/KB/ajax/GmailUpload.aspx

pessi

ASKER

Praveen

Thank you for your answer BUT

the first link doesnot use asp.net upload control and the 2nd one is doing a full postback.
Gmail upload doesnt do a full postback.

Prasad.

Praveen Venu

PLease have a look at this

http://www.codeproject.com/KB/aspnet/AJAXUpload.aspx

Praveen Venu

this one also

http://aspalliance.com/1442_Building_AJAX_Enabled_File_Uploading_System_with_Progress_Bar_Using_ASPNET_20

pessi

ASKER

Praveen

I donot want to upload using ajax.
I like your first link

http://www.petefreitag.com/item/587.cfm

But can you change it to include asp.net upload control instead of input control?

Prasad.

Praveen Venu

understand that Gmail doesnot postback because it uses Ajax

look at this also

http://blogs.gaiaware.net/post/Ajax-Multiple-FileUpload-for-ASPNET.aspx

pessi

ASKER

Yes I know gmail doesnt postback. What I need is the following.

I have an asp.net upload control and an "add another file" link.
When I click the link it should add another upload control.
I have a main submit button which will do a full postback and upload
all the files at once.

Prasad.

sunithnair

Is this what you are looking for?

<html>
<head>
<script language='javascript'>
var fileElementCount=0;
function CreateFileControl()
{
  var fileElement = document.createElement("input");
  fileElement.setAttribute("type", "file");
  fileElement.setAttribute("id", "file"+fileElementCount);
  fileElement.setAttribute("name", "file"+fileElementCount);
  document.getElementById("fileControls").appendChild(fileElement);
  document.getElementById("fileControls").appendChild(document.createElement("br"));
  fileElementCount++;
  alert(fileElement.getAttribute("id"));
}
</script>
</head>
<body>
<input type="button" value="Add file" onclick="CreateFileControl()">
<div id="fileControls"></div>
</body>
</html>

Open in new window

pessi

ASKER

Sunitha

The code you gave works fine to get all the controls.
Lets say I have a button to submit the form.
In the code behind, how do I loop through the controls in "fileControls" div and get the values of the
input controls?

Prasad.

Praveen Venu

why not put more fileupload controls at design time and show them when add more button is click

pessi

ASKER

In the button click event if I try to loop through the controls in say Panel "fileControls" instead of DIV.

foreach (Control ctlr in fileControls.Controls)
{
if (ctlr.GetType() == typeof(HtmlInputFile))
{
// Do something
}
}

It doesnt find the input controls.

pessi

ASKER

Praveen

That is a good option can you give me the javascript to make them visible when add button is clicked?
Thats what you meant?

Prasad.

SOLUTION

Praveen Venu

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

pessi

ASKER

Praveen

I like your fileupload hide/show option better, can you help me with the javascript?
Say I already place 4 upload controls and make 3 of them invisible.
Can we change them to visible one by one when button is clicked through javascript?

Prasad

sunithnair

You cannot loop through the file controls like how you have done it because they are not server controls. You need to do it in the way praveen has done in his post @23709574

pessi

ASKER

try that..dont know whats wrong.

my javascript

<script>
var upload_number = 2;
function addFileInput() {
     var d = document.createElement("div");
     var file = document.createElement("input");
     file.setAttribute("type", "file");
     file.setAttribute("name", "attachment"+upload_number);
     d.appendChild(file);
     document.getElementById("moreUploads").appendChild(d);
     upload_number++;
}
</script>

html

<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<input type="file" name="attachment" id="attachment" onchange="document.getElementById('moreUploadsLink').style.display = 'block';" />
<div id="moreUploads"></div>
<div id="moreUploadsLink" style="display:none;"><a href="javascript:addFileInput();">Attach another File</a></div>
</div>
<asp:Button ID="Button1" runat="server" Text="Submit" OnClick="Button1_Click" />
</form>

c# code

protected void Button1_Click(object sender, EventArgs e)
{

// Get the HttpFileCollection
HttpFileCollection hfc = Request.Files;
for (int i = 0; i < hfc.Count; i++)
{
HttpPostedFile hpf = hfc[i];
if (hpf.ContentLength > 0)
{
hpf.SaveAs(Server.MapPath("MyFiles") + "\\" +
Path.GetFileName(hpf.FileName));
}
}
}

It says hfc.Count = 0?

sunithnair

You need to mark your form as multipart/form-data like this

<form id="form1" runat="server" enctype="multipart/form-data">

Open in new window

pessi

ASKER

works now. One small problem though, is there a way to access the name of the input control
in the c# code? because I want to save each file with a specific name that I need to
pass into the c# code.

sunithnair

You should be getting the file in the same order as they appear on the html page so you can write the same logic that you use to create the file controls in javascript in c# to get the file control name

pessi

ASKER

actually there are multiple instances of these in the form.

say CV upload: could be multiple uploads...dont know how many..their input names are thourgh javascript cv1, cv2 etc..

another one timeline: again has multiple uploads..done know how many..but in javascript I name them as timeline1, timeline2 etc..

when I get them in c# code I will have say 5 items in the file collection...there is no way I can tell which one correspond to which upload. If I could get the input name property in the c# code I can rename the files as I like.

Hope you got my point.

ASKER CERTIFIED SOLUTION

sunithnair

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

pessi

ASKER

works nicely. Thank you. however I did it like this.
string myfilename = hfc.Keys[i];