I'm using an asp:FileUpload control to give the user the chance to look for an image on the hard drive, once the user has chosen the image, after a button is pressed, I want to display the image in an asp:Image control.
I've been trying to get the full path of the file but I can't get it, I'm using Path.GetFullPath(FileUpload.FileName) but I'm getting a totally different path, not the path to the image that the user selected.
I was reading that I need to set the src attribute of the asp:Image control to be an aspx page which is going to return the image, and then I have to write the bytes from the image to the response but I'm not sure how to do this (I'm a newbie in web development), I don't know what should I put in my event, in the code behind, or what code should I place on the aspx page that will return the image, neither how to call the aspx page with the image from the event handler.
Can anyone show me a good example on how to achieve this please?
The issue here is the file being uploaded resides on the client computer where the asp:image control is looking for an image on the server computer.
What you should be doing is on the form submit/button click save the file into the application folder then reference that file with your asp:image control.
You can use the project mentioned below to preview the image before uploading. Working sample is also attached.
http://www.dotnetspider.com/resources/40858-Preview-Image-before-uploading-using.aspx
This uses AjaxControlToolKit's AsyncFileUploadControl and HTTPHandler to upload the image.
Related
In my ASP.Net website I want to upload a file onClickEvent of LinkButton. I dont have a space to show a FileUpload Control. But if we use fileUpload control it is easy to upload a file using:
String filename = Path.GetFileName(FileUpload1.FileName);
FileUpload1.SaveAs(Server.MapPath("~/files/") + filename);
How do I open file browser on onClick event of LinkButton and save my file inside the Files folder present on the server?
EDIT:
can we use "OpenFileDialog" From Windows.Forms? If yes, how? i am just asking...
You can use javascript as suggested by Neil Thompson. However, my preferred solution to this issue is the CSS method as described in this post. You can also use the ASP upload control if you wish, and it will be hidden in the same way, allowing you to handle the file in the code behind as you usually would.
Also, as far as I can tell this works in all popular browsers.
I am currently trying to create a custom server control in asp.net c# and am using VS2010.
I am trying to create a custom server control that can load images straight into a separate web project. E.g. Custom Server Control and a separate web project where I can drag and drop my control onto it with minimal installation and config. The point being it can be re used anywhere on other web projects.
I have created a basic custom control, but I need to be able to load images directly through the custom server control and display them in my separate web project. The images will be coming from a static location for the time being.
So basically I have an image, I want to load and pass that image into the control and then display it on a webpage where the custom control is placed. I have investigated image handlers, and having separate generic handlers but am not having any luck.
Image location --> Custom Control --> Web page displaying image that has been passed into custom control.
Anyone have any idea how to do this, or go about this?
UPDATE:
I am sorry I was not clear enough first time round.
I have two projects, one custom control project, and one asp.net website project. The first project (Custom Control) takes a byte stream from a webservice and converts it to an Image object. At this point I want the control to add that image to a webpage in the website. The custom control is then registered with the asp.net website and the controls I have added are rendered to the page. However I want to render the image I have recovered from the buffer, then converted to a file locally onto the web page.
I have no problem getting the image from the bytestream, and storing the image in a directory. The issue I am having is that I want the image to be rendered on the webpage, without having the image stored in the web project at first. I have thought about storing the image in a web directory so when I run the project I can set an image url to localhost/images/myimagefrombystream.jpg but am unsure whether this is the correct approach.
Any ideas?
We have a server controls library that contains some images that are reused across a number of other web projects.
The approach we took was to mark the each images build action as Embedded Resource. Then in the AssemblyInfo file we have lines like the following:
[assembly: WebResource("AssemblyName.SubDirectory.ImageName.png", "image/png")]
Where AssemblyName is the actual project name, the SubDirectory is the directory in the project the image(s) are located in, etc.
This project also emits CSS files; which are also Embedded Resources. The CSS files refer to these images using:
.someImage {
height: 85px;
background-image: url(<%=WebResource("AssemblyName.SubDirectory.Image.png") %>);
background-repeat: repeat-x;
margin: 0px;
padding: 0px;
}
In the class code, we'll refer to those css files like:
HtmlLink cssLink = new HtmlLink();
cssLink.Href = Page.ClientScript.GetWebResourceUrl(this.GetType(), "AssemblyName.css.SomeCssFile.css");
cssLink.Attributes.Add("rel", "stylesheet");
cssLink.Attributes.Add("type", "text/css");
We could just as easily refer to the images directly using something like the above.
At this point the assembly is 100% portable. All of the CSS files and required images are embedded into it so you don't have to worry if the calling application has those same images at all.
Incidentally, this is how a number of control vendors do things; at least the better ones.
I don't know why you're complicating. Simply, add ImageUrl property (not public field) to your custom control, expect the client-code of your control to set it, and if not null, in CreateChildControls add an Image control to the control tree. Alternatively, add the image to control-tree always, but make it visible/invisible from within the setter of that property (or elsewhere you see fit). I didn't understand half of what you said related to your envisioned solution, to be honest - so, I hope I didn't miss the topic here :)
I'm not sure I understood the question, but let me try anyway.
As far as I understood you have two projects, in one you want to upload an image to a certain location, in the other one you want to show that image.
I would simply have a file upload control in the 1st application, and use it to upload the image to the desired location.
In the other application you can use a generic handler. The handler can get the image file name from the 1st application using query string parameters, then it will locate the image on disk and return a response with a proper header, for example:
response.ContentType = "image/jpeg";
response.OutputStream.Write(image, 0, (int)request.InputStream.Length);
response.Flush();
response.End();
I assume that you have created this custom control in a class library. of the image source is static (some fixed base url) and just that image name changes you can expose a ImageUrl property (string) and render a tag based on the attributes (all can be default) with the custom ImageUrl as the src attribute of the tag.
Hope that helps!
i have created a webform.in that there is file upload.
i want to upload the image and show the thumbnail image on fileupload select,and On page submit i want to save the image path to database.
how can u implement it using ajax.
Thanks in advance.
Strictly speaking there is no way to implement an actual ajax file upload as its not supported by browsers. Html 5 has a lot more stuff you can do with file uploads.
You can implement your own hack using iframes, I have done this before. Basically you have an iframe that just has a form with the fileupload control on it and auto submit the form then call out to the parent window to update it when complete.
Alternatively use a pre built control something like the telerik one, you should be able to find a free one. http://www.telerik.com/products/aspnet-ajax/upload.aspx.
In my website,I have a home page in which by clicking on an image button,I get redirected to a different .apsx page .This page consists of a FileUpload control and 2 buttons(ATTACH,CANCEL).When a user selects/browses a file from his local machine and click ATTACH button,I display that file in a GRIDVIEW and also push the details of that file like Filename into a DATATABLE.
The user in this way can browse multiple files and all of them are added to GridView and also pushed to DATATABLE.Now when the user clickes CANCEL button,I am sending the whole DATATABLE in a session object to the HOME page.Upon clicking SAVE button in the home page,the files in the DATATABLE must get stored in a physical location that I mention in the code.
The problem that I am facing is that when I write
FileUpload fl=new FileUpload;
fl.SaveAs(dt["fileName"]);
The files are not at all getting saved in the location.
However If I pass the FileUpload control using Session from the second page,
FileUpload fl=(FileUpload)Session["FileUpload"]
The files are getting saved with the correct filenames but the content of all the files consists of the content of the latest uploaded file.I know what the problem is but unable to get a solution.
My Requirement is to save the files in a physical path only after clicking the Save button in the home page.Kindly Suggest me..Thanks in advance!
I believe that the asp.net FileUpload control only supports uploading of one file at a time. that is why you only see the contents of the last file. You either need to create a separate control for each upload, roll your own, or use a 3rd-party vendor control.
I am creating FileUpload controls at run time. When I click a LinkButton a new FileUpload control is generated.
Now suppose I have selected a file from a FileUpload control and I click the LinkButton. The previous FileUpload control loses its path. However, I'm maintaining the ViewState of each control that I create at runtime by using this line:
f1.enableviewstate = true;
How do I maintain the selected file for a FileUpload control?
Steps
user selects a file
user click LinkButton (issues a postback that adds additional file uploading control)
server side should get the file on postback and store it somewhere (anywhere)
replace first <input type=file> with something like Label and check mark icon (to tell user the file has already been uploaded (or even a read-only text box with disabled browse button to fake file upload control - however you won't be able to display correct file path in it)
user is presented with a new form that has new empty file upload control in showing already uploaded files.
For security reasons you can't manipulate <input type=file> in any way shape or form.
Hack approach
If I understood you correctly your link button adds additional file upload controls to your page. Instead I'd create a sufficient number of upload controls the first time and display just one. Others would be hidden by CSS. After user clicks the LinkButton, it would however have only client-side Javascript functionality that would reveal additional control. And another... and another... and another... until maximum is reached.
Complex approach
You could however make it in a different way by using more Javascript and make it more Web 2.0-ish. You should however upload those files via <iframe>
as some of the others mentioned, you cannot preserve the viewstate of a FileUpload due to security issues.
What you could do is to simply add a Label just below the FileUpload. When the user clicks on the linkbutton in order to generate a new FileUpload, a postback will be fired where you could check whether the FileUpload controls present on the page have some value (i.e. the user already selected a file to upload), and if so, you could directly start to upload that file and show the result (the path or filename) on the label, just that the user knows he has added that file already. You could also hide the fileupload and additionally add a remove link to again remove the uploaded file (similar approach as Gmail does).
Hope this helped.
Juri
You can't pre-select a file path in the file upload input tag (security related - the user must select the file), so .Net is not able to populate the value from viewstate.
Consider if you really need to at it at runtime?
If you really need to at runtime; Don't forget to add it to the closest container's Controls property. Doing this makes sure it's state is serialized to the ViewState.
Hope this helps...
as per me there is no way to persist viewstate of fileupload in asps.net.
u can store it's value in hidden field,session etc file u can not be able to assign that value to again file upload because it is read only