Develop Reference

Code behind image input in C#

here is my code :
<label for="image" >Image input</label>
<input id="image" type="file" name="pic" accept="image/*">
i don’t know the code behind to get value from the inserted image and save it in my project folder. please help me. thanks in Advance.

If you want to access what is put into the files collection using jScript:
function SaveImage()
{
var uploadFileElement = document.getElementById("image");
var theFile = uploadFileElement.files[0];
// Use AJAX or call a PageMethod to initiate Server Side Processing
// to Save the file
}
Just add a standard html button on your form that calls this function to initiate the saving of your file.
If you want to use standard Server Side (ASP.NET Controls), I would suggest using the FileUpload control.
Put this in your aspx page:
<asp:FileUpload ID="FileUpload_UploadFile" runat="server" />
<asp:Button ID="Button_UploadFile" runat="server" Text="Upload File" onclick="Button_UploadFile_Click" />
Put this in your code behind (.cs):
private void Button_UploadFile_Click(object sender, EventArgs e)
{
if (FileUpload_UploadFile.HasFile)
{
// IMPLEMENT YOUR CODE FOR SAVING THE FILE
}
}

Upload multiple files without having to select every time

With HTML5 and ASP.NET 4.5, I created a page that will allow the user to upload multiple files. The ASPX code looks like:
<asp:FileUpload runat="server" ID="UploadImages" AllowMultiple="true" />
<asp:Button runat="server" ID="uploadedFile" Text="Upload" OnClick="uploadFile_Click" />
<asp:Label ID="listofuploadedfiles" runat="server" />`
c# code:
protected void uploadFile_Click(object sender, EventArgs e)
{
if (UploadImages.HasFiles)
{
foreach (HttpPostedFile uploadedFile in UploadImages.PostedFiles)
{
string fileName = Path.GetFileName(uploadedFile.FileName);
uploadedFile.SaveAs("C:\\Users\\username\\Desktop\\Uploaded\\" + fileName);
listofuploadedfiles.Text += String.Format("{0}<br />", uploadedFile.FileName);
}
}
}
The user selects the files using the FileUpload control and clicks the Upload button and it works great.
My question is: Is is possible to upload files using this method without the user selecting the files? I'd like to have the app always point to a directory on the users hard drive and default to uploading the files in that directory.
The user would see the contents of that directory in a list box and click the upload button or some variation to that.
I don't see any way to add files to the FileUpload control in code.

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>

how to upload an image file without any postback in ASP.NET

I am uploading a file using the <asp:FileUpload> and <asp:button> controls but I want to do it without a postback. On button click I execute the following code.
protected void btnUpload_Click(object sender, EventArgs e)
{
string strFileName = Path.GetFileName(FileUpload1.FileName); //fileupload1 is the <asp:fileupload ID
FileUpload1.SaveAs(Server.MapPath("~/UploadFile/" + strFileName + ""));
imgUpload.ImageUrl = "../UploadFile/" + strFileName + ""; //imgupload is the <img ID on which I am showing the image after upload
imgUpload.Visible = true;
}
After uploading the file I am showing the saved image from the specified folder in my project solution, but on clicking the upload button the whole page gets loaded and I don't want the postback on clicking the upload button.

just add the script
<script language="javascript">
function Change(obj) {
__doPostBack("<%= btnUpload.ClientID %>", "");
}
</script>
Call the script in your button click event like this
<pre>
onchange="Change(this);"
</pre>
Your image control added in the update panel with contentTemplate
<asp:FileUpload ID="imgFileUploader" runat="server" />
<asp:Button ID="btnUpload" runat="server"
Text="Upload" onclick="btnUpload_Click" onchange="Change(this);" />
<br />
<br />
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<img id="imgOrginal" runat="server" style="height: 200px; width: 200px;" />
</ContentTemplate>
</asp:UpdatePanel>
for more details

if you are using ASP.Net file uploader then is is not possible.. you can use Ajax file uploader for this purpose

Best way to upload images without any postback, you can try AsyncFileUpload control in Asp.net Ajax. A good example is here :-
http://www.aspsnippets.com/Articles/Using-ASP.Net-AJAX-Control-Toolkits-AsyncFileUpload-Control.aspx
Thankyou

I think you are asking about uploading files through partial request. Using ASP.NET file upload control it is not possible. Even it is wrapped inside update panel, it will not work. It needs to have synchronous trigger to make it work, that means it does full post back.
If you are using ASP.NET AJAX, checkout asyncfileload control and newly added 'Ajax file upload' control. These controls are present in Ajax control tool kit. Please go through the documentation since each have their limitations.
If they doesn't suit your needs, try for open source Ajax file upload controls like neat upload etc.

You can't do this using simple ASP.NET WebForms.
Do some research into what is known as the page lifecycle. Code behind methods like the one you've included are / can be executed only as part of a postback or server-side action.
If you want client-server interaction without a postback then you need to use javascript. You can use javascript alongside ASP.NET, and I believe there is a Microsoft implementation of 'AJAX' in the .NET framework.

You need to use ajax for this purpose. There are plenty of examples available on internet. Just google it.

How to correctly use the ASP.NET FileUpload control

I'm trying to use the FileUpload control in ASP.NET
Here's my current namespace setup:
using System;
using System.IO;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
And within my class, I'm just using:
FileUpload fileUpload = new FileUpload();
However, none of the attributes that are normally part of FileUpload seem to be available... such as .HasFile. I'm attempting to make the Button click method in the code behind, I have noticed that most of the usage of .HasFile is in the code in front, however it was my understanding that this shouldn't matter.
Does anyone know why?

ASP.NET controls should rather be placed in aspx markup file. That is the preferred way of working with them. So add FileUpload control to your page. Make sure it has all required attributes including ID and runat:
<asp:FileUpload ID="FileUpload1" runat="server" />
Instance of FileUpload1 will be automatically created in auto-generated/updated *.designer.cs file which is a partial class for your page. You usually do not have to care about what's in it, just assume that any control on an aspx page is automatically instantiated.
Add a button that will do the post back:
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
Then go to your *.aspx.cs file where you have your code and add button click handler. In C# it looks like this:
protected void Button1_Click(object sender, EventArgs e)
{
if (this.FileUpload1.HasFile)
{
this.FileUpload1.SaveAs("c:\\" + this.FileUpload1.FileName);
}
}
And that's it. All should work as expected.

Instead of instantiating the FileUpload in your code behind file, just declare it in your markup file (.aspx file):
<asp:FileUpload ID="fileUpload" runat="server" />
Then you will be able to access all of the properties of the control, such as HasFile.

Adding a FileUpload control from the code behind should work just fine, where the HasFile property should be available (for instance in your Click event).
If the properties don't appear to be available (either as a compiler error or via intellisense), you probably are referencing a different variable than you think you are.

My solution in code behind was:
System.Web.UI.WebControls.FileUpload fileUpload;
I don't know why, but when you are using FileUpload without System.Web.UI.WebControls it is referencing to YourProject.FileUpload not System.Web.UI.WebControls.FileUpload.

I have noticed that when intellisence doesn't work for an object there is usually an error somewhere in the class above line you are working on.
The other option is that you didn't instantiated the FileUpload object as an instance variable. make sure the code:
FileUpload fileUpload = new FileUpload();
is not inside a function in your code behind.

Old Question, but still, if it might help someone, here is complete sample
<form id="form1" runat="server">
<div>
<asp:FileUpload ID="FileUpload1" runat="server" /><br/>
<asp:Button ID="Button1" runat="server" Text="Upload File" OnClick="UploadFile" /><br/>
<asp:Label ID="Label1" runat="server" Text=""></asp:Label>
</div>
</form>
In your Code-behind, C# code to grab file and save it in Directory
protected void UploadFile(object sender, EventArgs e)
{
//folder path to save uploaded file
string folderPath = Server.MapPath("~/Upload/");
//Check whether Directory (Folder) exists, although we have created, if it si not created this code will check
if (!Directory.Exists(folderPath))
{
//If folder does not exists. Create it.
Directory.CreateDirectory(folderPath);
}
//save file in the specified folder and path
FileUpload1.SaveAs(folderPath + Path.GetFileName(FileUpload1.FileName));
//once file is uploaded show message to user in label control
Label1.Text = Path.GetFileName(FileUpload1.FileName) + " has been uploaded.";
}
Source: File Upload in ASP.NET (Web-Forms Upload control example)