Change Management in FileUpload Control

Question

I have a product page. I want to add my product to my database, and I want to update my product as well. I have a problem with images. When I insert an everithing product, this is normal. On my aspx page, I have this code:

<span> <asp:FileUpload ID="files" runat="server" AllowMultiple="true" /> </span> <div runat="server" id="previewImages"></div> 

and when I save my product, in the code behind I have this code:

 string filenm = string.Empty; HttpFileCollection fileCollection = Request.Files; for (int i = 0; i < fileCollection.Count; i++) { HttpPostedFile uploadfile = fileCollection[i]; if (uploadfile.ContentLength > 0) { string filename = uploadfile.FileName; System.IO.Directory.CreateDirectory(Server.MapPath("immScarpe/" + txtStyle.Text)); file.SaveAs(Server.MapPath("immScarpe/" + txtStyle.Text + "/") + fileName); //this is pseudo-code INSERT INTO PRODUCT_IMM (IdProduct, Path) VALUES (Id, "immScarpe/" + txtStyle.Text + "/" + fileName) } } 

Now the problem is that I can CHANGE the saved product. When I click the edit button for a product, I have to load all its data and let the user modify it. Also images.

The main question: how to load saved images in asp: FileUpload control?

Another thing I would like to do is show preview images of images ... insert and edit.

An example of what I want to do is what Amazon does

but if possible with only one file loader with AllowMultiple = true

I am ready to use other technologies such as javascript, jquery and Ajax, if necessary

Answer 1

Show Image Preview - Insert

 <script src="jquery-1.10.1.min.js" type="text/javascript"></script> <script type="text/javascript"> function ShowpImagePreview(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('#previewImage').attr('src', e.target.result); } reader.readAsDataURL(input.files[0]); } } </script> <asp:Image ID="previewImage" runat="server" /> <asp:FileUpload ID="FileUpload1" runat="server" onchange="ShowpImagePreview(this);" /> 

Answer 2

Here is a very simple example of how you can process images after they are sent to the server. The file name is fixed in this snippet, but it should be enough to give you a push in the right direction.

 protected void Page_Load(object sender, EventArgs e) { //check if the file exists and show if (File.Exists(Server.MapPath("testImage.jpg"))) { setImage("/testImage.jpg"); } } //upload a new image protected void Button1_Click(object sender, EventArgs e) { if (FileUpload1.HasFile) { try { FileUpload1.SaveAs(Server.MapPath("testImage.jpg")); setImage("/testImage.jpg"); } catch { //error writing file } } } //delete the image protected void LinkButton1_Click(object sender, EventArgs e) { try { File.Delete(Server.MapPath("testImage.jpg")); LinkButton1.Visible = false; Image1.Visible = false; } catch { //error deleteing file } } //set the image and show the delete link private void setImage(string image) { Image1.ImageUrl = "/testImage.jpg"; Image1.Visible = true; LinkButton1.Visible = true; } 

Aspx

 <asp:Image ID="Image1" runat="server" Visible="false" /> <br /> <asp:LinkButton ID="LinkButton1" runat="server" Visible="false" OnClick="LinkButton1_Click">Delete image</asp:LinkButton> <br /> <br /> <asp:FileUpload ID="FileUpload1" runat="server" /> <br /> <asp:Button ID="Button1" runat="server" Text="Upload" OnClick="Button1_Click" /> 

Answer 3

To display images in a gridview from disk

https://www.aspsnippets.com/Articles/Display-Images-in-GridView-Control-using-the-path-stored-in-SQL-Server-database.aspx

Now that you have the images shown, you want to have some functions for replacing or deleting images. You need to convert your field to GridView for the image in the template field. You can do this by clicking on the original view of your ASPX page and replacing your ImageField or BoundField (depending on which field you used when displaying the image).

See the GridView project for a question:

How to display image inside gridview template field without using handler class?

The way to link the image source is in the answers to this question.

To have the delete or replace function, you can enable the LinkButton control inside your TemplateField under the tag that displays the image.

You can set the LinkButton CommandName property to Delete or Replace, and then in the .vb or .cs file, find the RowCommand event for your GridView.

This is like (only pseudo code)

 Protected Sub GridView_RowCommand(ByVal sender As Object, ByVal e As System.GridViewCommandEventArgs) Handles GridView.RowCommand If e.CommandName = 'Delete' Then 'Place your delete query for your image record on the database here.. 'Place your delete file from disk code here.. End If End Sub 

Additional GridView RowCommand Event Information

https://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.gridview.rowcommand(v=vs.110).aspx