In my ASP.NET web form, I'm trying to customize my File Upload panel. What I do is simply put an HTML input button and a textbox. And there's a hidden HTML file upload control. When user clicks on the button, file select window appears, when user selects the file, the value is written to the visible textbox.
It's all good so far. But I'm having a problem while trying to attach the selected file to email in code page.
Here's the HTML markup:
<asp:ImageButton ID="clickme" runat="server" ImageUrl="Images/browse.png" OnClientClick="$('#uploadme').click(); return false;" />
<input id="uploadme" name="uploadme" type="file" style="visibility: hidden;" onchange="CopyMe(this, 'txtFileName');" />
<input id="txtFileName" type="text" name="txtFileName" readonly="readonly" class="file-path" />
And the JS (I use this in order to copy the file name only and write it into txtFileName just to show to user):
<script type="text/javascript">
function CopyMe(oFileInput, sTargetID) {
var arrTemp = oFileInput.value.split('\\');
document.getElementById(sTargetID).value = arrTemp[arrTemp.length - 1];
}
And the CSS:
input[type=file] { width: 1px; }
I'm using the below code in my .cs file to get the file attributes:
HttpPostedFile file = Request.Files["uploadme"]
But I kept on getting null value. So after some research, I've learnt that my form has to use enctype="multipart/form-data" property. Since my .aspx file is under a master page file, I added this property to the form in my master page file. Now Request.Files["uploadme"] is not null but its file name is empty string and its ContentLength is 0.
I'm unable to understand what might be the source to this issue. If it's because of using Master Page's form, I can't add a form to my child page because it says a page can have only 1 form. I don't know if I could use JavaScript for uploading because I need to email the file after uploading so I don't know how to get the file after I upload via JS.
How can I solve this problem? It could be one way or another, all I need is a stylized upload panel and to e-mail file after uploading.
You're using a master page and I'm presuming that you are using .net 2.0 or greater. If that's the case, use a FileUpload control (you can still hide it using CSS). Using the FileUpload control means you won't need the enctype attribute (although you shouldn't generate any problems having it there).
This all being said, I don't believe to you copy values into file type fields and have documents upload. This would be a MAJOR security flaw as a website could potentially upload files from your machine without your knowledge.
Related
I have a web page where I dynamically generate lots of elements from code behind and inject them into the page, as such:
input type="file" style="width:480px;" id="fileUploadLogo345">
I also have buttons for submitting, like this:
input id="Submit1" type="submit" value="Substituir Logo" onclick="return jsSubmitLogo(345);">
(The javascript function always returns true...)
No matter what I try, I am unable to get any of the uploaded files from code behind.
I tried adding enctype="multipart/form-data" to the form, I tried adding runat="server" to the file upload controls, I have no idea what else I could try. No matter what I do, in code behind Request.Files.Count equals zero.
Any idea what I could be doing wrong?
If it makes any difference, I am using a master page...
Thanks
You are using "id" attributes in your html... you should instead use "name" attributes, and everything will show up fine in code behind.
On my page I have an standard asp:FileUpload control. Right below it is a RegularExpressionValidator that is supposed to only allow pdf and Word documents to be uploaded. It's the same regex seen all around the web. For some reason, it worked fine in aother project, but not in my current one. When loading the page in Firefox, I immediately get the validator to show me the error message right after selecting the file. This tells me it's a client side issue as the page has yet to be submitted to the server.
The tag:
<asp:RegularExpressionValidator id="Resume_Validator" runat="server"
ControlToValidate="Resume"
ValidationGroup="applicationForm"
ErrorMessage="Upload PDF or Word files only<br />"
Display="Dynamic"
CssClass="validationMsg"
ValidationExpression="^(([a-zA-Z]:)|(\\{2}\w+)\$?)(\\(\w[\w].*))(.pdf|.PDF|.doc|.DOC|.docx|.DOCX)$"
/>
Why not just use jQuery file validation on the client-side?
//Check file extension
var ext = file.split('.').pop().toLowerCase(); //Check file extension if valid or expected
if ($.inArray(ext, ['txt']) == -1) {
$(".errorDiv").html("Select valid text file (txt).");
e.preventDefault(); //Prevent submission of form
}
else {
//Do your logic here, file upload, stream. etc.. if file was successfully validated
}
Is there a good way to enable forms that come out of user content (CMS) that is displayed inside the form runat="server" tag? All sorts of services provide forms for users to paste into their website, which break if the content ends up inside a .net form. It seems to me that there must be a good way around this, but I can't seem to find any solutions.
The one solution I've found is to put them in an IFRAME. So instead of embedding your form inside the page:
<FORM action="http://www.example.com/target.html">
.. form content
</FORM>
create a new ASPX file like this:
<FORM action="http://www.example.com/target.html" target="_top">
.. form content
</FORM>
Then in your original page, you'll refer to it via an IFRAME:
<IFRAME src='myform.aspx'></IFRAME>
Some things you'll need to do:
Make sure that you do not include any <FORM runat="server"> inside the new ASPX file.
Adjust the size of the IFRAME and the ASPX file to be exactly the same
For the FORM in the new ASPX files, you probably want to set target='_top' to ensure when a user fills in the form, the result is in the main window rather than inside the IFRAME.
I have several elements in my web page generated by JavaScript.
Here's an example of such content:
<input id="uploadfile01" type="file" onchange="change(1);" />
<input id="uploadfile02" type="file" onchange="change(2);" />
My question is:
How can I interact with these elements in the server side, (Asp.net) after a post?
(Since the elements were dynamically generated they do not exist in the original asp.net page)
I dont think that would be possible.....if i am not mistaken you want to give the option to attach multiple files. i think it would be better to place a set number of fileupload controls and set there display to none and you can use javascript to show them.
i know that this is not what you are looking for but after a postback the controls will be lost and even if they are added again they will lose there contents.(had you been generating them through code behind)
I am working on a ASP.NET app and i have a need to post back to the server after a file is chosen in a FileUpload control without having to have the user explicitly click a 'submit' button. Is this possible? and if so, how?
I'm assuming you want to make the upload start right away. If so, you should react to the change event in JavaScript, and simply make it submit the form.
<!-- HTML code --->
<input
type="file"
onchange="if (confirm('Upload ' + this.value + '?')) this.form.submit();"
>
Asking the users for confirmation is recommendable, so they stay in control of the process and can cancel if they chose the wrong file by accident.
The first answer had the right javascript, but ASP.NET does not necessarily expose the input control directly, so it is better to put the onchange event on the FileUpload control.
<asp:FileUpload ID="myFileUpload" onchange="if (confirm('Upload ' + this.value + '?')) this.form.submit();" runat="server" />
Another route to go is to provide rich uploading via flash/silverlight/ajax. A great component for this can be found at Ajax Uploader for about $100