Uploading Pictures during Editing

[Joey]

I've worked at this for several days and searched for a solution, found several portions and built them all but I still can't figure this simple thing out.

I have an Ajaxified Grid (EnabledAjax="True") in which I have GridTemplateColumn which contains an asp:Image tags to display a thumbnail of the image.  The image resides in the filesystem.  Works great.

In the EditFormSettings, because I have so many fields, I organize them into RadTabStrip and a RadMultiPage.  On the Photos tab, I display the three pictures (Thumbnail, Small and Large Image) in a div along with a RadUpload.  I can get the picture to display, my textbox containing the relative path to the image.  Works good.

The problem comes during the upload, I select a picture and press the Upload button.  Good so far!  I catch the server side postback Click event, find the control for the image, get the parent, then set the correct imageURL, the correct relative datapath.  All seems to work, but (and here's the problem) it won't change the EditFormSettings page to reflect the changes which should then post to the database or reflect the changes and allow me to press the Update button.  It just closes the form and every change is lost and the EditForm closes losing the changes.

Here is my click event:

protected void ButtonUploadThumbnailImage_Click(object sender, EventArgs e)
    {
        Button btn = (Button)sender;
        GridEditFormItem editFormItem = (GridEditFormItem)btn.NamingContainer;  //Access the EditFormItem
        RadUpload upload = (RadUpload)editFormItem.FindControl("UploadThumbnailImage");

        if (upload.UploadedFiles.Count > 0)
        {
            Image image = (Image)editFormItem.FindControl("ThumbnailImage");
            image.ImageUrl = ResolveUrl("~/Images/Products/" + upload.UploadedFiles[0].GetName());

            TextBox txt1 = (TextBox)editFormItem.FindControl("txtThumbnailImagePath");
            txt1.Text = "~/Images/Products/" + upload.UploadedFiles[0].GetName();
        }
    }

My html example is:

<td valign="top" 

align="center"><BR>                                                                        

<telerik:RadUpload ID="UploadThumbnailImage" runat="server" Width="250px" 

Height="24px"<BR>                                                                            

AllowedFileExtensions="jpg,jpeg,png,gif" ControlObjectsVisibility="None" 

TargetFolder="~/Images/Products" 

<BR>                                                                            

OverwriteExistingFiles="false" 

><BR>                                                                        

</telerik:RadUpload><BR>                                                                        

<br 

/><BR>                                                                        

<asp:Button ID="ButtomUploadThumbnailImage" runat="server" Text="Upload" 

CommandName="Update"<BR>                                                                            

CommandArgument="UploadThumbnailImage" 

OnClick="ButtonUploadThumbnailImage_Click" /><br 

/><BR>                                                                        

<asp:Image ID="ThumbnailImage" runat="server" ImageUrl='<%# ResolveUrl("~" 

+ Eval("ThumbnailImageURL")) 

%>'<BR>                                                                            

Visible='<%# Eval("ThumbnailImageURL").Equals("") ? false: true %>' 

/><br 

/><BR>                                                                        

<asp:TextBox ID="txtThumbnailImagePath" runat="server" Text='<%# 

Eval("ThumbnailImageURL") 

%>'<BR>                                                                            

Width="200px"></asp:TextBox><BR>                                                                    

</td><BR><BR><BR>

How do I display an image using a relative path from the database, allow the user to upload and change the picture (or select one already uploaded) and then reflect the change in the EditForm but not save it to the database until the EditFormSettings Update button is pressed?

Thanks

[Veli]

Hi Joey,

This is because you have attached CommandName="Update" to the button. This causes RadGrid to fire an Update command, close your edit form and rebind. Remove the command name from the button to have the edit form stay open.

Greetings,
Veli
the Telerik team

[Joey]

I knew it was going to be easy!  I just couldn't see it.  After making the changes, it works fine.
 
I have since discovered that Sitefinity has the "<sfLib:ButtonSelector>" which offers more capabilities and looks more like what I need, plus it can save me a bunch of time.  Is this what most people are using when working with photos (and files)?  Is there something else I should be looking at?

Thanks,
Joey Brenn

[Veli]

Hello Joey,

You can use the ButtonSelector, too. Note, however, that if you are using AJAX, you would not be able to use that. You would have to write your custom dialog instead:

Creating a custom WebUITypeEditor in Sitefinity

Veli
the Telerik team