Develop Reference

Upload FileUpload

I'm working on a project in which I have to upload .txt files. I'm using asp.net FileUpload. Here is a piece of code:
<div class="custom-file">
<asp:FileUpload ID="inputFileTXT" CssClass="custom-file-input" runat="server" />
<label id="lblFileName" runat="server" class="custom-file-label" for="inputFileTXT">Elegir archivo</label>
</div>``
I'm using styles from MDBootstrap.
The thing is that I want to do stuff when a user clicks on the asp:fileUpload element and selects a file WITHOUT CLICKING ON A BUTTON. I've been searching but I didn't find how to detect dynamically this action. The asp:fileUpload has no event such as OnUploading.
PD: I tried using an UpdatePanel but when it makes the postback it seems like the uploaded file disapears. Maybe this is the way but I couldn't make it work.

You can add a dummy LinkButton to the page and leave it empty, but give it an OnClick, in which you would process the file.
<asp:FileUpload ID="FileUpload1" runat="server" accept="image/*" />
<asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click"></asp:LinkButton>
Then in code behind add the onchange trigger to the FileUpload control that will do a PostBack of LinkButton1.
protected void Page_Load(object sender, EventArgs e)
{
FileUpload1.Attributes.Add("onchange", "__doPostBack('" + LinkButton1.UniqueID + "','')");
}
PS do not put a FileUpload Control in an UpdatePanel.

You want to detect when a file is assigned to the upload just use change event.
Jquery solution:
$('#inputFileTXT').on('change', function(){
//do stuff
});
javascript solution:
<asp:FileUpload ID="inputFileTXT" CssClass="custom-file-input" runat="server" onchange="doStuff(this);" />
function doStuff(control){
//do stuff
}
You can then read files by using FileReader api (https://developer.mozilla.org/en-US/docs/Web/API/FileReader).
and access files using .files:
var files = $('#inputFileTxt').files;

Please have a look at this link
You should get the file details in FileUpload1 (fileUpload control Id: inputFileTXT in your case).

Window opened using window.open reopens when browser back button is clicked

I created an asp.net web application which has a linkbutton and hyperlink in the default.aspx. Hyperlink is set navigationurl -"www.google.com". Linkbutton opens the same url in a new tab using javasript's window.open.
Default.aspx
<asp:LinkButton ID="LinkButton1" runat="server" onclick="LinkButton1_Click">Data</asp:LinkButton><br />
<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="http://www.google.co.in">google</asp:HyperLink>
Default.aspx.cs
protected void LinkButton1_Click(object sender, EventArgs e)
{
string url = "http://www.google.com";
ScriptManager.RegisterStartupScript(Page, typeof(Page), "OpenWindow", "window.open('" + url + "');", true);
}
Steps to reproduce my query:
1. Clicks LinkButton. This opens google in new window/tab.
2. Click Hyperlink. This navigates to google.
3. Click Browser Back button.
This time the browser navigates back to default.aspx, simultaneously google opens in new window/tab.
T want this not to happen.

Use Hyperlink Button instead of link button and use target="_blank" and url ="www.google.com" this will open url in new window
No need to use java script to open a new Window .... Also It will Resolve Your Problem
<asp:HyperLink ID="HyperLink2" Target="_blank" NavigateUrl="http://www.google.co.in" runat="server" >Data</asp:HyperLink><br />
<asp:HyperLink ID="HyperLink1" Target="_self" runat="server" NavigateUrl="http://www.google.co.in">google</asp:HyperLink>

here's the code: add the code to the page which you don't want the user to return using back.
if(history.length>0)
history.go(+1);
call it on body load
basically i increment the browser history.

Add this codefunction in your head tag
<script type="text/javascript">
function myfun() {
window.open("http://www.google.co.in");
return false;
}
</script>
and in your body
<asp:LinkButton ID="LinkButton1" runat="server" OnClientClick="return myfun();">Data</asp:LinkButton><br />
<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="http://www.google.co.in">google</asp:HyperLink>
Note: Avoid any request to server until and unless its not required,you can also do the same with the help of <a> tag by keeping target="_blank"

Asp.net button isn't firing at first time after I open file upload control througn javascript

So I have created a custom file upload control so that I can put custom look to the file upload control.
I have taken a asp:fileupload control and have set display as none;
I have taken a asp:label to show the selected file name
a html button that opens the file dialog through java script
an asp button that uploads the file at server side. Following is the javascript code.
After I open the file dialog on clicking the html button (#3 above) I select the file. After that when I click the asp button (#4 above) it doesn't get click first time. Its happening only on Internet Explorer, on other browers it works fine.
function executeFileUploadControl() {
alert("welcome")
document.getElementById("fuImage").click();
return false;
}
$(document).ready(function () {
$('#fuImage').change(function () {
var filename = $(this).val();
var lbl = document.getElementById('<%=lblfileName.ClientID%>');
lbl.innerHTML = filename;
});
});
Controls
<input ID="fuImage" type="file" runat="server" clientidmode="Static" name="htmlFileUpload"/>
<div style="border:1px solid #000; width:200px; float:left; margin-right:5px;">
<input type="button" value="Browse" onclick="javascript:executeFileUploadControl();" />
<asp:Label runat="server" ClientIDMode="Static" id="lblfileName" Text="No file selected"></asp:Label>
</div>
<asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_Click" />

how to solve postback issue file upload control's path does not exist

I am uploading files using asp.net fileupload control , whenever postback occurs due to other field's on the page, selected path in file upload control lost. I'm using multiple file upload control on page for diff. Purpose how to solve this problem? Please help with simple & suitable example dear.
string file = Path.GetFileName(UploadSalesServiceCopy.PostedFile.FileName);
string filepath2 = ConfigurationManager.AppSettings["ServerMapImgPath"].ToString();//.......local drive path via web config
string subPath = filepath2 + file;
bool IsExists = System.IO.Directory.Exists(Server.MapPath(subPath));
if (!IsExists)
System.IO.Directory.CreateDirectory(Server.MapPath(subPath));
if (UploadSalesServiceCopy.HasFile)
{
//UploadSalesServiceCopy.SaveAs(subPath);//PHYSICAL path
UploadSalesServiceCopy.SaveAs(Server.MapPath(subPath));//server path
}
else
{
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "javascript", "alert('No File Selected.')", true);
}

While clicking on Upload button ...
Your page redirect to Page_load event first , where you set page values .
For that in
page_load(..)
{
if(!IsPostBack)
{
..setpagevalues();
}
}
That main reson...you are getting null path....
Try it..

If you are using asp.net File upload control with update panel.Then the problem is
File upload control is not compatible with partial post back.
<asp:FileUpload ID="fpTest1" runat="server" />
<asp:FileUpload ID="fpTest2" runat="server" />
<asp:UpdatePanel ID="up" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button ID="btnActions" runat="server" Text="Other Actions" >
</ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="test" runat="server" OnClick="test_Click" Text="Upload File" />
You can see that when you click other actions button file upload will have the values.
Put the Post back controls inside the Update Panel and have the file upload controls out
of the update panel.

You simply have to use fileupload with updatepanel and also put ViewStateMode="Enabled" to fileupload.
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:FileUpload ID="FileUpload1" runat="server" ViewStateMode="Enabled"/>
</ContentTemplate>
</asp:UpdatePanel>

Load Image with Javascript from ASP.NET FileUpload control

I am trying to load an asp image box <asp:Image ID="imgPicture" width="200" height="200" runat="server" /> with an image after a user has selected one using the asp.net fileupload control <asp:FileUpload ID="fluPicture" runat="server" OnChange="LoadImage(this.value, 'imgPicture');" Width="200"/>
HTML
<asp:Image ID="imgPicture" width="200" height="200" runat="server" />
<asp:FileUpload ID="fluPicture" runat="server" OnChange="LoadImage(this.value, 'imgPicture');" Width="200"/>
Javascript
<script type="text/javascript">
function LoadImage(path, img) {
imgPrev = document.images[img];
imgPrev.src = path;
}
</script>
The image will not load in the imgPicture control. Also I noticed that by adding an alert to the javascript function to alert the path and image, that the path is C:\fakepath\ImageName.jpg. I am unsure why it says fakepath.
Any help is appreciated. Also note that this project has a C# code file behind it.

After all of your input, I have changed my FileInput control code to be as follows:
<asp:FileUpload ID="fluPicture" onchange="if (confirm('Upload ' + this.value + '?')) this.form.submit();" runat="server" Width="200"/>
I then added a test to the Page.OnLoad event to determine if the file is ready to be
uploaded.
if (fluPicture.PostedFile != null && fluPicture.PostedFile.ContentLength > 0) UploadImage();
Then I allowed the UploadImage() method to upload the image, store it, and then set the url of the imagebox to the uploaded image's url.
Thank you all for your help and input. Also, I appreciate the jQuery ideas. In this instance I just needed something quick and dirty to get the job done.

You file is not uploaded until you do a post back, it sounds like your only browsing to the file and then trying to get a thumbnail before you post back/upload the image.

ASP.Net (HTML) CODE :
<asp:FileUpload ID="FileUpload1" runat="server" Height="22px" onchange="showImage()"/>
<asp:Image ID="Image1" runat="server" Width="200PX" Height="200PX" />
JAVASCRIPT CODE :
function showImage()
{
// Get File Upload Path & File Name
var file = document.getElementById("FileUpload1");
// Set Image Url from FileUploader Control
document.getElementById("Image1").src = file.value;
// Display Selected File Path & Name
alert("You selected " + file.value);
// Get File Size From Selected File in File Uploader Control
var inputFile = document.getElementById("FileUpload1").files[0].size;
// Displaty Selected File Size
alert("File size: " + inputFile.toString());
}
I think That can Help You. its perfectly run on my pc.