Clear cache RadAsyncUpload controls

2 posts, 0 answers
  1. Popescu
    Popescu avatar
    2 posts
    Member since:
    Oct 2012

    Posted 22 Oct 2012 Link to this post

    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.
  2. Peter Filipov
    Admin
    Peter Filipov avatar
    1028 posts

    Posted 25 Oct 2012 Link to this post

    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.
Back to Top