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

Clear cache RadAsyncUpload controls

1 Answer 209 Views

General Discussions

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

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 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 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.

Clear cache RadAsyncUpload controls

1 Answer, 1 is accepted