Hi,
I'm using RadAsyncUpload on my page for uploading photos.I have multiple areas on the same page.It's configured like this:
On the client side I have the following Javascript:
On the server side I have the following code:
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.
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.