Clear cache RadAsyncUpload controls

[Popescu]

Hi,

I'm using RadAsyncUpload on my page for uploading photos.I have multiple areas on the same page.It's configured like this:

<div class="photocontainer"><span class="message">
       <ecadis:EcadisLabel ID="lblLeftPhotoView" LabelId="text.leftPhotoView"
        runat="server" />
        <ecadis:EcadisLabel runat="server" ID="lblLeftPhotoViewRequired" LabelId="text.requiredStar" Visible="False"  CssClass="error"/></span>
                    <telerik:RadBinaryImage runat="server" Width="175px" Height="120px" ResizeMode="Crop" ID="leftViewPhoto" SavedImageName="linkerflank.png" ImageUrl="/images/linkerflank.png"/>
                    <span class="invalidLeftPhoto"></span>
                    <telerik:RadAsyncUpload runat="server"
                                            ID="leftPhotoViewAsyncUpload"
                                            MaxFileInputsCount="1"
                                            MaxFileSize="2411724"
                                            OnClientFileUploaded="onLeftPhotoUploaded"
                                            OnFileUploaded="LeftViewPhotoFileUploaded"
                                            AllowedFileExtensions="jpeg,jpg,gif,png,bmp"
                                            OnClientValidationFailed="onLeftPhotoValidationFailed" >
                    </telerik:RadAsyncUpload>
                    <telerik:RadButton runat="server" ID="btnResetLeftPhotoView" AutoPostBack="false" OnClientClicked="leftViewPhotoClearImage">
                    </telerik:RadButton>
                </div>

                <div class="photocontainer"><span class="message">
       <ecadis:EcadisLabel ID="lblRightPhotoView" LabelId="text.rightPhotoView" runat="server"/><ecadis:EcadisLabel runat="server" ID="lblRightPhotoViewRequired" LabelId="text.requiredStar" Visible="False" CssClass="error"/></span>
                    <telerik:RadBinaryImage runat="server" Width="175px" Height="120px" ResizeMode="Crop" ID="rightViewPhoto" SavedImageName="rechterflank.png" ImageUrl="/images/rechterflank.png"/>
                    <span class="invalidRightPhoto"></span>
                    <telerik:RadAsyncUpload runat="server"
                                            ID="rightPhotoViewAsyncUpload"
                                            MaxFileInputsCount="1"
                                            MaxFileSize="2411724"
                                            OnClientFileUploaded="onRightPhotoUploaded"
                                            OnFileUploaded="RightViewPhotoFileUploaded"
                                            AllowedFileExtensions="jpeg,jpg,gif,png,bmp"
                                            OnClientValidationFailed="onRightPhotoValidationFailed">
                    </telerik:RadAsyncUpload>
                    <telerik:RadButton runat="server" ID="btnResetRightViewPhoto" AutoPostBack="False" OnClientClicked="rightViewPhotoClearImage" />
                </div>
            </div>

            <div class="dragAndDrop WP100">
                <div class="photocontainer"><span class="message">
      <ecadis:EcadisLabel runat="server" ID="lblFrontalPhotoView" LabelId="text.frontalPhotoView"/><ecadis:EcadisLabel runat="server" ID="lblFrontalPhotoViewRequired" LabelId="text.requiredStar" Visible="False" CssClass="error"/></span>
                    <telerik:RadBinaryImage runat="server" Width="175px" Height="120px" ResizeMode="Crop" ID="frontalViewPhoto" SavedImageName="frontaal.png" ImageUrl="/images/frontaal.png"/>
                    <span class="invalidFrontal"></span>
                    <telerik:RadAsyncUpload runat="server"
                                            ID="frontaalPhotoViewAsyncUpload"
                                            MaxFileInputsCount="1"
                                            MaxFileSize="2411724"
                                            OnClientFileUploaded="onFrontalPhotoUploaded"
                                            OnFileUploaded="FrontaalPhotoFileUploaded"
                                            AllowedFileExtensions="jpeg,jpg,gif,png,bmp"
                                            OnClientValidationFailed="onFrontalPhotoValidationFailed">
                    </telerik:RadAsyncUpload>
                    <telerik:RadButton runat="server" ID="btnResetFrontaalViewPhoto" AutoPostBack="False" OnClientClicked="frontaalViewPhotoClearImage"></telerik:RadButton>
                </div>

                <div class="photocontainer"><span class="message"><ecadis:EcadisLabel ID="EcadisLabel5" LabelId="text.backPhotoView" runat="server"/><ecadis:EcadisLabel runat="server" ID="lblBackPhotoViewRequired" LabelId="text.requiredStar" Visible="False" CssClass="error"/></span>
                    <telerik:RadBinaryImage runat="server" Width="175px" Height="120px" ResizeMode="Crop" ID="backViewPhoto" SavedImageName="achteraan.png" ImageUrl="/images/achteraan.png" />
                    <span class="invalidBack"></span>
                    <telerik:RadAsyncUpload runat="server"
                                            ID="backPhotoViewAsyncUpload"
                                            MaxFileInputsCount="1"
                                            OnClientFileUploaded="onBackPhotoUploaded"
                                            OnFileUploaded="BackPhotoFileUploaded"
                                            AllowedFileExtensions="jpeg,jpg,gif,png,bmp"
                                            OnClientValidationFailed="onBackPhotoValidationFailed"
                                            MaxFileSize="2411724">
                    </telerik:RadAsyncUpload>
                    <telerik:RadButton runat="server" ID="btnResetBackViewPhoto" AutoPostBack="False" OnClientClicked="backViewPhotoClearImage"></telerik:RadButton>
                </div>
            </div>

            <div class="dragAndDrop WP100">
                <div class="photocontainer"><span class="message"><ecadis:EcadisLabel ID="EcadisLabel6" LabelId="text.intFrontPhotoView" runat="server"/><ecadis:EcadisLabel runat="server" ID="lblIntFrontPhotoRequired" LabelId="text.requiredStar" Visible="False" CssClass="error"/></span>
                    <telerik:RadBinaryImage runat="server" Width="175px" Height="120px" ResizeMode="Crop" ID="interiourFrontViewPhoto" SavedImageName="interieur_vooraan.png" ImageUrl="/images/interieur_vooraan.png" />
                    <span class="invalidIntFront"></span>
                    <telerik:RadAsyncUpload runat="server"
                                            ID="interiourFrontViewAsyncUpload"
                                            MaxFileInputsCount="1"
                                            OnClientFileUploaded="onIntFrontPhotoUploaded"
                                            OnFileUploaded="InteriourFrontPhotoFileUploaded"
                                            AllowedFileExtensions="jpeg,jpg,gif,png,bmp"
                                            OnClientValidationFailed="onIntFrontPhotoValidationFailed"
                                            MaxFileSize="2411724"></telerik:RadAsyncUpload>
                    <telerik:RadButton runat="server" ID="btnResetInteriourFrontViewPhoto" AutoPostBack="False" OnClientClicked="interiourFrontViewPhotoClearImage"></telerik:RadButton>
                </div>

On the client side I have the following Javascript:

function onLeftPhotoUploaded(sender, args) {
                       $find("<%=radAjaxManager.ClientID %>").ajaxRequest();
                       $telerik.$(".invalidLeftPhoto").html("");
                       $telerik.$("#lblLeftPhotoViewRequired").html("");
                       setTimeout(function () {
                           sender.deleteFileInputAt(0);
                       }, 10);
                   }
                   function onLeftPhotoValidationFailed(sender, args) {
                       $telerik.$('.invalidLeftPhoto').html('<%= MasterController.GetLabelValue("text.fileTooBig") %>').addClass("error");
                       sender.deleteFileInputAt(0);
                   }
                   function onRightPhotoUploaded(sender, args) {
                       $find("<%=radAjaxManager.ClientID %>").ajaxRequest();
                       $telerik.$(".invalidRightPhoto").html("");
                       $telerik.$("#lblRightPhotoViewRequired").html("");
                       setTimeout(function () {
                           console.log(sender._uploadedFiles.length);
                           sender.deleteFileInputAt(0);
                       }, 10);
                   }
                   function onRightPhotoValidationFailed(sender, args) {
                       $telerik.$('.invalidRightPhoto').html('<%= MasterController.GetLabelValue("text.fileTooBig") %>').addClass("error");
                       sender.deleteFileInputAt(0);
                   }

On the server side I have the following code:

protected void LeftViewPhotoFileUploaded(object sender, FileUploadedEventArgs e)
   {
       string path = Path.Combine(ConfigurationManager.AppSettings["SaveLocation"], PartnerId.ToString(), CarId.ToString(), ConfigurationManager.AppSettings["GeneralPictureLocation"]);
       e.File.SaveAs(Path.Combine(path, "linkerflank.png"));
       byte[] array = CreateThumbnail(path, "linkerflank.png");
       leftViewPhoto.DataValue = array;
   }

   protected void RightViewPhotoFileUploaded(object sender, FileUploadedEventArgs e)
   {
       string path = Path.Combine(ConfigurationManager.AppSettings["SaveLocation"], PartnerId.ToString(), CarId.ToString(), ConfigurationManager.AppSettings["GeneralPictureLocation"]);
       e.File.SaveAs(Path.Combine(path, "rechterflank.png"));
       byte[] array = CreateThumbnail(path, "rechterflank.png");
       rightViewPhoto.DataValue = array;
   }

The problem is that when I delete an existing photo from an area, and then upload another photo to another area , the "old" photo is also rendered.I suppose that I can fix this with some cache settings on to the control.Can you help me with this bug?

Thank you.

[Peter Filipov]

Hi Popescu,

I was not able to create a runnable sample from the provided code (some references are missing). I am not quite sure what happens in your case. Please review the following demo how the picture is set to default.

Kind regards,
Peter Filipov
the Telerik team