Populating Ajax Uploader with list of files

Last post 01-14-2009, 10:28 AM by cutechat. 3 replies.
Sort Posts: Previous Next
  •  01-12-2009, 6:09 AM 47642

    Populating Ajax Uploader with list of files

    I want to use Ajax Uploader on a form whereby a user can add and remove images.  This will be done both when a new item is created (simple - new ajax uploader), and also coming back and editing that item later.  I need a way to populate AjaxUploader with a list of images that were previously uploaded (I can supply the path of the images etc, just need some functions to add the images to the list so the user can then add/remove images).
     
    Is there a way to do this, or do i need to create a separate form showing which images have been uploaded and setup separate remove buttons... if this is the case, then how can i hide the image upload results panel after the images have finished uploading?
     
    thanks
    greg

  •  01-14-2009, 12:41 AM 47715 in reply to 47642

    Re: Populating Ajax Uploader with list of files

    Greg,
     
    Please check this demo :
     
     

    <%@ Page Language="C#" %>

    <%@ Register TagPrefix="CuteWebUI" Namespace="CuteWebUI" Assembly="CuteWebUI.AjaxUploader" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <script runat="server">

     string _folder;

     protected override void OnInit(EventArgs e)
     {
      base.OnInit(e);
      _folder = Server.MapPath("~/UploadImages/");
      if (!Directory.Exists(_folder))
       Directory.CreateDirectory(_folder);
     }


     int ImageCount
     {
      get
      {
       object o = ViewState["ImageCount"];
       return o == null ? 0 : (int)o;
      }
      set
      {
       ViewState["ImageCount"] = value;
      }
     }

     private ImageItem AddImageItem()
     {
      ImageItem item = new ImageItem();
      item.RemoveButton.Click += new EventHandler(RemoveButton_Click);
      item.ID = "ImageItem" + PhotoList.Controls.Count;
      PhotoList.Controls.Add(item);
      return item;
     }
     
     protected override void LoadViewState(object savedState)
     {
      base.LoadViewState(savedState);

      for (int i = 0; i < ImageCount; i++)
      {
       AddImageItem();
      }
     }

     protected void Uploader1_FileUploaded(object sender, UploaderEventArgs args)
     {
      string filename = DateTime.Now.Ticks + "_" + args.FileName;
      string saveto = Path.Combine(_folder, filename);
      args.MoveTo(saveto);
      ImageItem item = AddImageItem();
      item.ViewState["FileName"] = filename;
      item.PreviewImage.ImageUrl = ResolveClientUrl("~/UploadImages/" + filename);
      ImageCount++;
     }

     void RemoveButton_Click(object sender, EventArgs e)
     {
      Control btn = (Control)sender;
      ImageItem item = (ImageItem)btn.Parent;
      string filename = (string)item.ViewState["FileName"];
      if (filename.IndexOfAny(new char[] { ':', '/', '\\' })!=-1)
       throw (new Exception("Invalid ViewState"));
      string saveto = Path.Combine(_folder, filename);
      if(File.Exists(saveto))
       File.Delete(saveto);
      PhotoList.Controls.Remove(item);
      ImageCount--;
      for (int i = 0; i < ImageCount; i++)
      {
       item = (ImageItem)PhotoList.Controls[ i ];
       item.ID = "ImageItem" + i;
      }
     }

     class ImageItem : Panel, INamingContainer
     {
      public Image PreviewImage = new Image();
      public LinkButton RemoveButton = new LinkButton();
      public ImageItem()
      {
       this.CssClass = "ImageItem";
       PreviewImage.CssClass = "PreviewImage";
       RemoveButton.CssClass = "RemoveButton";
       RemoveButton.Text = "Delete";
       this.Controls.Add(PreviewImage);
       this.Controls.Add(RemoveButton);
      }
      new public StateBag ViewState
      {
       get
       {
        return base.ViewState;
       }
      }
     }
     
     
    </script>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
     <title>Show Uploaded Images</title>
     <style>
     .ImageItem
     {
      padding:4px;
      margin:4px;
      border:1px dotted gray;
     }
     .PreviewImage
     {
     }
     .RemoveButton
     {
      
     }
     </style>
    </head>
    <body>
     <form id="form1" runat="server">
      <div>
       <CuteWebUI:Uploader runat="server" ID="Uploader1" InsertText="Upload Photo" OnFileUploaded="Uploader1_FileUploaded">
        <ValidateOption AllowedFileExtensions="jpg,gif,png" MaxSizeKB="1000" />
       </CuteWebUI:Uploader>
      </div>
      Uploaded Photos:
      <asp:Panel ID="PhotoList" runat="server" CssClass="PhotoList" />
     </form>
    </body>
    </html>

     
    Regards,
    Terry
     
     
  •  01-14-2009, 4:00 AM 47723 in reply to 47715

    Re: Populating Ajax Uploader with list of files

    ummm... i'm not seeing how this demo solves the problem in my original question - please explain...
  •  01-14-2009, 10:28 AM 47738 in reply to 47723

    Re: Populating Ajax Uploader with list of files

    I think I do not understand your request.
    For some applications,
    If the developers want to show the uploaded contents,
    they only need bind the list view again.
     
    Maybe the UploadAttachments control can help you.
     
    Regards,
    Terry
View as RSS news feed in XML