Using an input type=file without a form

Question

The problem that I am having is getting the file information from an <input type=file> without the use of a <form> into a code behind method. The file always returns as null in the code behind when I try to get the information using Request.Files and I believe this is because it is never actually being sent to the server.

Is there anyway to get the file information sent to the server without the use of a <form>?

Here is the html I am using
<input type="file" id="upload_file" name="upload_file" runat="server" accept="image/*" onchange="copyFile()" />

And this is the code behind
HttpPostedFile file = Request.Files["upload_file"];



    if (file != null && file.ContentLength > 0)
    {
        string fname = Path.GetFileName(file.FileName);
        file.SaveAs(Server.MapPath(Path.Combine("~/App_Data/", fname)));
    }

I cannot use a <form> due to the way the webpage is being set up, it causes some horrible formatting issues in only IE (even IE9) that I cannot fix in css. Also, I am using <input type=file> rather than the <asp:FileUpload> so that I can have access to the onchange event.

Edit!
On a masterpage buried within the website is a form which already has the runat ="server" added to it. Sorry for not mentioning this earlier, I just found out when trying to add a runat="server" to the new form I am trying to create

Any help would be greatly appreciated! Thank you!

EDIT!
Final Code
Thank you to both @bkwint and @TrizZz, without your help, I would still be trying to figure this out.

The html part

<asp:FileUpload id="upload_file" runat="server" OnLoad="upload_file_OnLoad" />

the code behind to add in the onchange to the asp:FileUpload

protected void upload_file_OnLoad(object sender, EventArgs e) { ((System.Web.UI.WebControls.FileUpload)sender).Attributes.Add("onchange", "copyFile();"); }

and the code behind to save the file

if (Request.Files.Count > 0) { if (Request.Files[0].FileName.Length > 0) { Request.Files[0].SaveAs("~/App_Data/" + Request.Files[0].FileName); } }

The javascript that allows me to use the form in the master page for the submit with the onchange that was added to the asp:FileUpload. The id 'aspnetForm' is the form that is in the master page.

document.getElementById('aspnetForm').submit();

From what I have learned through some more research is that what was probably causing the css to be unhappy and the form to not submit properly was because nested forms are bad. Since there was a form I had no idea about on the master page, when I added another form, the web page just kind of ignored the one I added. By calling the submit on the master page, the file that is uploaded is correctly pushed to the server.

Thank you again to everyone who replied/commented and helped!

NOTE
This may not work in IE depending on how you set it up. IE does not like it when you try to submit a form directly from the fileupload.

You are using invalid HTML - an input element must be nested in a form. — Oded
– Oded, Commented Aug 22, 2012 at 12:49
"it causes some formatting issues […] that I cannot fix in css" Than this question should be a CSS question… — feeela
– feeela, Commented Aug 22, 2012 at 12:51
You have to use a form. Whatever formatting issues you're facing, you can solve them with CSS. — toniedzwiedz
– toniedzwiedz, Commented Aug 22, 2012 at 12:51
@Oded — There is no such requirement in any HTML specification. Form controls outside of forms are just useless without JavaScript (which violates best practise) — Quentin
– Quentin, Commented Aug 22, 2012 at 12:58
@Tom and feela I have tried to fix the formatting issues before, and have even asked another web developer to help, but we were both unable to. That is why I was curious if it was possible to do this without a <form> — Christine
– Christine, Commented Aug 22, 2012 at 14:26

TrizZz · Accepted Answer · 2012-08-22 13:25:42Z

2

You need a form to use form controls.. I know you said you have some CSS issues, but you will able to deal with you css then if it cause problems.

HttmpPostedFile is only post on submit, that is why you get a NULL file. Form is needed to get the post method. File is only send during post, you will need to do this:

<form action="yourPage.aspx" method="post">
<input type="file" onchange="this.form.submit()" name="upload_file" id="upload_file"/>
</form>

And in the load event of yourPage.aspx:

HttpPostedFile file = Request.Files["upload_file"];
if (file != null && file.ContentLength > 0)
{
    string fname = Path.GetFileName(file.FileName);
    file.SaveAs(Server.MapPath(Path.Combine("~/App_Data/", fname)));
}

With this method, you should have no problems, except for your CSS of course

edited Aug 22, 2012 at 13:25

answered Aug 22, 2012 at 13:14

TrizZz

1,2005 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Christine Over a year ago

I still receive a null for the file when I tried this. The load event was immediately called when I clicked the 'open' button in the browse window, but the file is still not there. Do you have any ideas why?

TrizZz Over a year ago

Try posting to another page yourPostPage.aspx and add the behind code in this new page

Christine Over a year ago

Thank you! I figured out how to get this working for me, I am posting the final code above in the question. Also, thank you @bkwint for your help, I am using some of your code as well but this answer has what actually got the file through

bkwint · Accepted Answer · 2012-08-22 12:55:54Z

1

you file input should be placed inside a form. As far as I am aware there is no way to keep it out of a form tag and still send the data....

As far as the reason for using the tag in stead of the dot net FileUpload tag. Why don't you just ad the onchange javascript at the backend.

So define your tag like this

<asp:FileUpload ID="FlUpld_x" runat="server" OnLoad="FlUpld_x_OnLoad" />

and define your code behind like this

protected void FlUpld_x_OnLoad(object sender, EventArgs e)
{
  ((FileUpload)sender).Attributes.Add("onchange", "js_function();");
}

answered Aug 22, 2012 at 12:55

bkwint

6264 silver badges9 bronze badges

3 Comments

Christine Over a year ago

Thank you for the answer! The code behind you gave works perfectly to get my javascript function, but I still get a null for the file. I added in code<form method="post" enctype="multipart/form-data">code. Do you have any ideas why?

bkwint Over a year ago

well you actually don't need to type that all out yourself... I'm guessing, but not quite sure though, that you should just let the server do all that for you. just make your form element a server tag like this <form id="x" runat="server"></form> in between the form tags your file upload should be... then you can do FlUpld_x.Posted_File to get your file... hope it still helps you!

Christine Over a year ago

I don't think I can have a runat="server" in this form because there is a master page somewhere that has everything wrapped in a form that already has the runat assigned to it

Collectives™ on Stack Overflow

Using an input type=file without a form

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related