• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1962
  • Last Modified:

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.  
0
pessi
Asked:
pessi
  • 11
  • 6
  • 5
2 Solutions
 
pessiAuthor Commented:
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.
0
 
Praveen VenuCommented:
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
pessiAuthor Commented:
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.
0
 
Praveen VenuCommented:
understand that Gmail doesnot postback because it uses Ajax

look at this also

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

0
 
pessiAuthor Commented:
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.
0
 
sunithnairCommented:
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

0
 
pessiAuthor Commented:
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.
0
 
Praveen VenuCommented:
why not put more fileupload controls at design time and show them when add more button is click
0
 
pessiAuthor Commented:
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.
0
 
pessiAuthor Commented:
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.
0
 
Praveen VenuCommented:
protected void btnUpload_Click(object sender, EventArgs e)
{
        try
        {
            // 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));                      
                }              
            }  
        }
        catch (Exception ex)
        {
            // Handle your exception here
        }
 
}
0
 
pessiAuthor Commented:
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
0
 
sunithnairCommented:
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
0
 
pessiAuthor Commented:
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?

0
 
sunithnairCommented:
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

0
 
pessiAuthor Commented:
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.
0
 
sunithnairCommented:
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
0
 
pessiAuthor Commented:
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.
0
 
sunithnairCommented:
You can do it like this using javascript and hidden server control. You will get the filename like this
filename1,<fieldname1>;filename2,<fieldname2>. You can then split the string in C#.
function setFilenameMap()
{
    var inputFields = document.getElementsByTagName("input");
    var fileNameMaps = document.getElementById("fileNameMaps");
    for(var i=0;i<inputFields.length;i++)
    {
        if(inputFields[i].type == "file")
        {
           fileNameMaps.value +=  inputFields[i].value.substring(inputFields[i].value.lastIndexOf("\\")+1) + "," + inputFields[i].name + ";";
        }
    }
    fileNameMaps.value = fileNameMaps.value.substring(0, fileNameMaps.value.length-1)
    alert(fileNameMaps.value);
}
 
 
        <asp:Button ID="Button1" runat="server" Text="Submit" OnClick="Button1_Click" OnClientClick="setFilenameMap();" />
        <input type="hidden" id="fileNameMaps" runat="server" />

Open in new window

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

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

  • 11
  • 6
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now