I am facing an issue on my product page related to adding and updating products in the database. The problem lies with images not displaying correctly. During the product insertion process, everything works fine. In my aspx page, I have the following code snippet:
<span>
<asp:FileUpload ID="files" runat="server" AllowMultiple="true" />
</span>
<div runat="server" id="previewImages"></div>
When saving the product, this is the code I have in the code behind:
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)
}
}
The issue arises when trying to edit a saved product. Upon clicking the edit button for a product, it should load all existing data, including images, for the user to modify.
My main concern is how to load the saved images in the asp:FileUpload control?
Additionally, I would like to display image previews during both insert and edit operations.
An example of what I aim to achieve is similar to Amazon's approach https://i.stack.imgur.com/3vU79.png.
If possible, I prefer to accomplish this using only one FileUpload with AllowMultiple = true. However, I am open to utilizing other technologies such as javascript, jquery, and Ajax if necessary.