This is a migrated thread and some comments may be shown as answers.

Clear cache RadAsyncUpload controls

1 Answer 134 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Popescu
Top achievements
Rank 1
Popescu asked on 22 Oct 2012, 08:00 AM
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.

1 Answer, 1 is accepted

Sort by
0
Peter Filipov
Telerik team
answered on 25 Oct 2012, 07:47 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Tags
General Discussions
Asked by
Popescu
Top achievements
Rank 1
Answers by
Peter Filipov
Telerik team
Share this question
or