Bootstrap file upload not working with ASP Ajax AsyncFileUpload - asp.net

So I am having an issue on my ASP web form, where I am using Bootstrap and trying to make use of the Ajax AsyncFileUpload control. The file upload control looks like this:
<div id="LoafFileUploadTemplate" class="custom-file">
<asp:AsyncFileUpload ID="LoafFileUpload" runat="server" ClientIDMode="Static" CssClass="custom-file-input file-upload" enctype="multipart/form-data" method="post" OnClientUploadStarted="Loaf_UploadStarted" OnClientUploadComplete="Loaf_UploadComplete" OnUploadedComplete="LoafFileUpload_UploadedComplete" />
<label class="custom-file-label">Choose File</label>
</div>
<asp:Button ID="LoafFileUploadComplete" runat="server" ClientIDMode="Static" CssClass="d-none" OnClick="LoafFileUploadComplete_Click" />
For some reason the LoafFileUpload_UploadedComplete method didn't fire when the uploader was finished. I've read that I need to add enctype="multipart/form-data" method="post" to the file input. I have done that, but still doesn't work. Turns out the way bootstrap renders the AsyncFileUpload control, these two attributes get applied to a div instead of the file upload control, as seen below:
<div id="LoafFileUploadTemplate" class="custom-file">
<div id="LoafFileUpload" class="custom-file-input file-upload" enctype="multipart/form-data" method="post">
<input type="hidden" name="ctl00$CPH_main$CsatoltFajlok$LoafFileUpload$ctl00"><div><input name="ctl00$CPH_main$CsatoltFajlok$LoafFileUpload$ctl02" type="file" id="ctl00_CPH_main_CsatoltFajlok_LoafFileUpload_ctl02" style="" size="20"></div>
</div>
<label class="custom-file-label">Fájl feltöltése</label>
</div>
</div>
<input type="submit" name="ctl00$CPH_main$CsatoltFajlok$LoafFileUploadComplete" value="" id="LoafFileUploadComplete" class="d-none">
So as seen here, the enctype="multipart/form-data" method="post" attributes are applied onto the div containing the file input, not the input itself. Because of this, the file doesn't get posted to the server. Anyones know a fix for this?

Turns out I didn't need to add enctype="multipart/form-data" method="post" to the file input, but to the form itself (in my case, in the master page). It works now.

Related

ASPX Form messing up Bootstrap styles

I have no background in ASPX, but have been assigned to restyle an application that is being built. I decided to use bootstrap, but am having one major issue. I have tracked down the problem to the first <form id="Form1" runat="server"> in the <body> on my Site.Master, which from what I understand is how ASPX treats everything, like a form.
This ASPX form tag is keeping all the labels in other forms to their own line, and all preceding elements to the next line.
Some problematic code, when ran inside of the form tag that ASPX requires to wrap everything:
<form class="form-horizontal span6">
<fieldset>
<legend>Login</legend>
<div class="control-group">
<label class="control-label" for="tbUsername">Username</label>
<div class="controls">
<asp:TextBox ID="tbPassword" placeholder="Password" runat="server" ClientIDMode="Static" TextMode="Password"></asp:TextBox>
</div>
</div>
</fieldset>
</form>
Thanks much Stack!

asp.net upload video to youtube

I am trying to upload a video file to Youtube and display it on my website. But I havent done uploading yet, I think displaying it is easy. Please help me with the uploading. I read many pages about this ı am so confused. İf it is possible, I just want to do it with post method without using google libraries.
Here is my simple html form in aspx file
<form id="form1" runat="server" enctype="multipart/form-data" method="post">
<div>
<input type="file" name="file" />
<input type="hidden" name="token" value="token_value"/>
<asp:Button runat="server" ID="go" OnClick="Button1_Click" />
</div>
What should I do in the code behind? any usefull links?

Form tag in .Net doesn't work if alone

I have just create a blank .net web form page and added a simple html form, it reads:
<body>
<form id="form1" runat="server">
<div>
<form method="post" action="2ndpage.aspx">
<input type="text" name="Value" />
<input type="submit" value="click" />
</form>
</div>
</form>
</body>
If I click the button I'm not taken to 2ndpage.aspx. But If I add "<form></form>" just after the <div> so that the body now reads:
<body>
<form id="form1" runat="server">
<div>
<form></form>
<form method="post" action="2ndpage.aspx">
<input type="text" name="Value" />
<input type="submit" value="click" />
</form>
</div>
</form>
</body>
it works and I'm taken to 2ndpage.aspx when click.
I can look at this for another month but I'm sure I couldn't see where the bug is, I'd need a pair of fresh eyes.
Any ideas?
Thanks
you cant place form inside another form!
There's a good article here - https://web.archive.org/web/20170420110433/http://anderwald.info/internet/nesting-form-tags-in-xhtml/
It discusses not being able to nest one form in another form and also deals specifically with the scenario you describe.
You can't have nested form tags.
I'm not quite sure why it works when you add another empty form tag. But my guess is that the parser simply ignores the start of the tag and sees the end tag as the end tag for the first form. And therefore doesn't see it as nested forms anymore.

File upload using HTML file type

I want to upload a file on my aspx page.
I am using
<form id="frmId" method="post" enctype="Multipart/form-data">
<input type="file" id="file1"/>
<input type="submit" id="btnsubmit"/>
</form>
and in code behind I am trying to get this file. Its not letting me to get the file until I use server side input file control. I don't want to use runat="server" attribute with my file control.
Do anyone know how to do this.
Have you tried the Request.Files collection?
You can not access control on server side code with out runat="server" attribute.

Google search code in ASP.NET Master Page

I'm trying to put the following Google generated search box code into a Master page on a site:
<form action="http://www.google.com/cse" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="partner-pub-xxxxxxxxxx:u3qsil-l6ut" />
<input type="hidden" name="ie" value="ISO-8859-1" />
<input type="text" name="q" size="31" />
<input type="submit" name="sa" value="Search" />
</div>
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en"></script>
The problem, I believe, is something to do with the form tags. I've tried putting this code inside a user control and embedding that in the master page but no luck yet...
Do you by any chance have a "form runat=server" wrapping around where your user control is being placed?
That would cause a problem.
ASP.NET likes to enclose the entire page with a Form tag, and you can't nest form tags...So move it outside of the <form runat="Server"> tag and you'll be fine.

Resources