Kristopher
Top achievements
Rank 1
Kristopher
asked on 03 Mar 2014, 06:22 PM
I'm dynamically adding the RadAsyncUpload control in the code behind a master page during the page_load event. I then try and set some properties about the RadAsyncUpload control in the code behind during the on_prerender event:
private void Settings()
{
this.OnClientFileUploaded = ClientFileUploaded;
this.OnClientFileDropped = ClientFileDropped;
this.OnClientProgressUpdating = ClientProgressUpdated;
this.HttpHandlerUrl = HttpHandler;
this.DropZones = DropZoneList;
this.MultipleFileSelection = Telerik.Web.UI.AsyncUpload.MultipleFileSelection.Automatic;
this.TemporaryFolder = GetTemporaryFolder;
this.Style.Add("display", "none");
}
protected override void OnPreRender(EventArgs e)
{
Settings();
base.OnPreRender(e);
}
The control doesn't seem to be registering the dropzones I specify (which are specified as string[] = {"#zone1", "#zone2"...}). If I set this list in the aspx page, it seems to work fine, but I'd like to do this in the code behind in a control which inherits from RadAsyncUpload. Any ideas why these zones aren't being set?
private void Settings()
{
this.OnClientFileUploaded = ClientFileUploaded;
this.OnClientFileDropped = ClientFileDropped;
this.OnClientProgressUpdating = ClientProgressUpdated;
this.HttpHandlerUrl = HttpHandler;
this.DropZones = DropZoneList;
this.MultipleFileSelection = Telerik.Web.UI.AsyncUpload.MultipleFileSelection.Automatic;
this.TemporaryFolder = GetTemporaryFolder;
this.Style.Add("display", "none");
}
protected override void OnPreRender(EventArgs e)
{
Settings();
base.OnPreRender(e);
}
The control doesn't seem to be registering the dropzones I specify (which are specified as string[] = {"#zone1", "#zone2"...}). If I set this list in the aspx page, it seems to work fine, but I'd like to do this in the code behind in a control which inherits from RadAsyncUpload. Any ideas why these zones aren't being set?
4 Answers, 1 is accepted
0
Shinu
Top achievements
Rank 2
answered on 04 Mar 2014, 11:45 AM
Hi Kristopher,
Please have a look into the sample code snippet which works fine at my end.
ASPX:
C#:
JavaScript:
Thanks,
Shinu.
Please have a look into the sample code snippet which works fine at my end.
ASPX:
<
div
id
=
"DropZone2"
runat
=
"server"
>
<
p
>
Custom Drop Zone</
p
>
<
p
>
Drop Files Here</
p
>
</
div
>
C#:
RadAsyncUpload upload =
new
RadAsyncUpload();
protected
void
Page_Load(
object
sender, EventArgs e)
{
upload.ID =
"Upload1"
;
upload.PreRender +=
new
EventHandler(upload_PreRender);
this
.form1.Controls.Add(upload);
}
void
upload_PreRender(
object
sender, EventArgs e)
{
string
[] dropzone =
new
string
[] {
"#DropZone2"
};
upload.DropZones = dropzone;
}
JavaScript:
<script type=
"text/javascript"
>
var
$ = $telerik.$;
function
pageLoad() {
$(document).bind({
"drop"
:
function
(e) { e.preventDefault(); } });
var
dropZone2 = $(document).find(
"#DropZone2"
);
dropZone2.bind({
"dragenter"
:
function
(e) { dragEnterHandler(e, dropZone2); } })
.bind({
"dragleave"
:
function
(e) { dragLeaveHandler(e, dropZone2); } })
.bind({
"drop"
:
function
(e) { dropHandler(e, dropZone2); } });
}
function
dropHandler(e, dropZone) {
dropZone[0].style.backgroundColor =
"#357A2B"
;
}
function
dragEnterHandler(e, dropZone) {
var
dt = e.originalEvent.dataTransfer;
dropZone[0].style.backgroundColor =
"#000000"
;
}
function
dragLeaveHandler(e, dropZone) {
if
(!$telerik.isMouseOverElement(dropZone[0], e.originalEvent))
dropZone[0].style.backgroundColor =
"#357A2B"
;
}
</script>
Thanks,
Shinu.
0
Kristopher
Top achievements
Rank 1
answered on 04 Mar 2014, 03:14 PM
Hey, thanks for responding.
I've written everything you've written exactly, and it is still not working. When I drag a file in the dropzone, the corresponding javascript event does not fire. I have my js in a separate web resource that is embedded in the project. Here is the js file's relevant functions (page_Load does fire during page load):
function pageLoad() {
$telerik.$(document).bind({ "drop": function (e) { e.preventDefault(); } });
//the dropzone returned is returned as a "b.fn.b.init[0]."
var dropZone = $telerik.$(document).find('#DropZone');
//No javascript errors on the following
dropZone.bind({ "dragenter": function (e) { dragEnterHandler(e, dropZone[0]); } }).
bind({ "dragleave": function (e) { dragLeaveHandler(e, dropZone[0]); } })
.bind({ "drop": function (e) { dropHandler(e, dropZone[0]); } });
}
//Never gets executed
function dropHandler(e, dropZone) {
dropZone[0].style.backgroundColor = "#357A2B";
}
//Never gets Executed
function dragEnterHandler(e, dropZone) {
var dt = e.originalEvent.dataTransfer;
var isFile = (dt.types != null && (dt.types.indexOf ? dt.types.indexOf('Files') != -1 : dt.types.contains('application/x-moz-file')));
if (isFile || $telerik.isSafari5 || $telerik.isIE10Mode || $telerik.isOpera)
dropZone[0].style.backgroundColor = "#000000";
}
//Never Gets Executed
function dragLeaveHandler(e, dropZone) {
if (!$telerik.isMouseOverElement(dropZone[0], e.originalEvent))
dropZone[0].style.backgroundColor = "#357A2B";
Here is hte div file. Notice I have runat="server" like you do. In the past when I've put runat=server, the DropZones stop working, but i've tried both ways and still no dropzone functionality.
<div id="DropZone" style="position:absolute" runat="server">
Here is my class (which wraps RadAsyncUpload):
protected override void OnLoad(EventArgs e)
{
//This sets this.DropZones = to a static string[] that i've hard coded
this.Settings();
base.OnLoad(e);
}
protected override void OnPreRender(EventArgs e)
{
Page.PreRenderComplete += new EventHandler(Page_PreRenderComplete);
base.OnPreRender(e);
}
//Register js external file
void Page_PreRenderComplete(object sender,EventArgs e)
{
if (!Page.ClientScript.IsClientScriptIncludeRegistered("AsyncUpload"))
{
Page.ClientScript.RegisterClientScriptInclude("AsyncUpload", Page.ClientScript.GetWebResourceUrl(this.GetType(), "Resources.Scripts.AsyncUpload.js"));
}
}
And here is my master page which I want the user control to be added to:
private AsyncUpload AsyncUploadControl = new AsyncUpload();
private void async_PreRender(object sender, EventArgs e)
{
//Static list of DropZones
string[] dropzones = AsyncUpload.DropZoneList;
AsyncUploadControl.DropZones = dropzones;
}
protected void Page_Load(object sender, EventArgs e)
{
AsyncUploadControl.ID = "AsyncUpload";
AsyncUploadControl.PreRender += new EventHandler(async_PreRender);
this.Controls.Add(AsyncUploadControl);
}
While the above doesn't work, if I set the dropzones in an aspx page manually as strings, the drop zones work if all the dropzone divs are not runat=server. If I change runat=server and hardcode the dropzones in the aspx page, the dropzones work again. Ideally, I don't want the async upload control on the aspx pages at all, but rather added to the pages programatically like above.
Thanks
I've written everything you've written exactly, and it is still not working. When I drag a file in the dropzone, the corresponding javascript event does not fire. I have my js in a separate web resource that is embedded in the project. Here is the js file's relevant functions (page_Load does fire during page load):
function pageLoad() {
$telerik.$(document).bind({ "drop": function (e) { e.preventDefault(); } });
//the dropzone returned is returned as a "b.fn.b.init[0]."
var dropZone = $telerik.$(document).find('#DropZone');
//No javascript errors on the following
dropZone.bind({ "dragenter": function (e) { dragEnterHandler(e, dropZone[0]); } }).
bind({ "dragleave": function (e) { dragLeaveHandler(e, dropZone[0]); } })
.bind({ "drop": function (e) { dropHandler(e, dropZone[0]); } });
}
//Never gets executed
function dropHandler(e, dropZone) {
dropZone[0].style.backgroundColor = "#357A2B";
}
//Never gets Executed
function dragEnterHandler(e, dropZone) {
var dt = e.originalEvent.dataTransfer;
var isFile = (dt.types != null && (dt.types.indexOf ? dt.types.indexOf('Files') != -1 : dt.types.contains('application/x-moz-file')));
if (isFile || $telerik.isSafari5 || $telerik.isIE10Mode || $telerik.isOpera)
dropZone[0].style.backgroundColor = "#000000";
}
//Never Gets Executed
function dragLeaveHandler(e, dropZone) {
if (!$telerik.isMouseOverElement(dropZone[0], e.originalEvent))
dropZone[0].style.backgroundColor = "#357A2B";
Here is hte div file. Notice I have runat="server" like you do. In the past when I've put runat=server, the DropZones stop working, but i've tried both ways and still no dropzone functionality.
<div id="DropZone" style="position:absolute" runat="server">
Here is my class (which wraps RadAsyncUpload):
protected override void OnLoad(EventArgs e)
{
//This sets this.DropZones = to a static string[] that i've hard coded
this.Settings();
base.OnLoad(e);
}
protected override void OnPreRender(EventArgs e)
{
Page.PreRenderComplete += new EventHandler(Page_PreRenderComplete);
base.OnPreRender(e);
}
//Register js external file
void Page_PreRenderComplete(object sender,EventArgs e)
{
if (!Page.ClientScript.IsClientScriptIncludeRegistered("AsyncUpload"))
{
Page.ClientScript.RegisterClientScriptInclude("AsyncUpload", Page.ClientScript.GetWebResourceUrl(this.GetType(), "Resources.Scripts.AsyncUpload.js"));
}
}
And here is my master page which I want the user control to be added to:
private AsyncUpload AsyncUploadControl = new AsyncUpload();
private void async_PreRender(object sender, EventArgs e)
{
//Static list of DropZones
string[] dropzones = AsyncUpload.DropZoneList;
AsyncUploadControl.DropZones = dropzones;
}
protected void Page_Load(object sender, EventArgs e)
{
AsyncUploadControl.ID = "AsyncUpload";
AsyncUploadControl.PreRender += new EventHandler(async_PreRender);
this.Controls.Add(AsyncUploadControl);
}
While the above doesn't work, if I set the dropzones in an aspx page manually as strings, the drop zones work if all the dropzone divs are not runat=server. If I change runat=server and hardcode the dropzones in the aspx page, the dropzones work again. Ideally, I don't want the async upload control on the aspx pages at all, but rather added to the pages programatically like above.
Thanks
0
Kristopher
Top achievements
Rank 1
answered on 04 Mar 2014, 03:17 PM
edit:
//Tried pageLoad like this as well
function pageLoad() {
$telerik.$(document).bind({ "drop": function (e) { e.preventDefault(); } });
//the dropzone returned is returned as a "b.fn.b.init[0]."
var dropZone = $telerik.$(document).find('#DropZone');
//No javascript errors on the following
dropZone.bind({ "dragenter": function (e) { dragEnterHandler(e, dropZone); } }).
bind({ "dragleave": function (e) { dragLeaveHandler(e, dropZone); } })
.bind({ "drop": function (e) { dropHandler(e, dropZone); } });
}
//Tried pageLoad like this as well
function pageLoad() {
$telerik.$(document).bind({ "drop": function (e) { e.preventDefault(); } });
//the dropzone returned is returned as a "b.fn.b.init[0]."
var dropZone = $telerik.$(document).find('#DropZone');
//No javascript errors on the following
dropZone.bind({ "dragenter": function (e) { dragEnterHandler(e, dropZone); } }).
bind({ "dragleave": function (e) { dragLeaveHandler(e, dropZone); } })
.bind({ "drop": function (e) { dropHandler(e, dropZone); } });
}
0
Hi Kristopher,
How do you set DropZones property? Note that it should contain valid jQuery selector:
Sample is attached.
Regards,
Hristo Valyavicharski
Telerik
How do you set DropZones property? Note that it should contain valid jQuery selector:
protected
override
void
OnInit(EventArgs e)
{
base
.OnInit(e);
RadAsyncUpload upload =
new
RadAsyncUpload();
upload.ID =
"AsyncUpload1"
;
upload.DropZones =
new
string
[] {
".DropZone1"
,
"#DropZone2"
};
upload.MultipleFileSelection = Telerik.Web.UI.AsyncUpload.MultipleFileSelection.Automatic;
upload.OnClientFileUploaded =
"ClientFileUploaded"
;
upload.OnClientFileDropped =
"OnClientFileDropped"
;
upload.Style.Add(
"display"
,
"none"
);
this
.form1.Controls.Add(upload);
}
<
form
id
=
"form1"
runat
=
"server"
>
<
telerik:RadScriptManager
ID
=
"RadScriptManager1"
runat
=
"server"
>
<
Scripts
>
<
asp:ScriptReference
Assembly
=
"Telerik.Web.UI"
Name
=
"Telerik.Web.UI.Common.Core.js"
/>
<
asp:ScriptReference
Assembly
=
"Telerik.Web.UI"
Name
=
"Telerik.Web.UI.Common.jQuery.js"
/>
<
asp:ScriptReference
Assembly
=
"Telerik.Web.UI"
Name
=
"Telerik.Web.UI.Common.jQueryInclude.js"
/>
</
Scripts
>
</
telerik:RadScriptManager
>
<
script
type
=
"text/javascript"
>
function pageLoad() {
if (!Telerik.Web.UI.RadAsyncUpload.Modules.FileApi.isAvailable()) {
$(".qsf-demo-canvas").html("<
strong
>Your browser does not support Drag and Drop. Please take a look at the info box for additional information.</
strong
>");
}
else {
$(document).bind({ "drop": function (e) { e.preventDefault(); } });
var dropZone1 = $(document).find(".DropZone1");
dropZone1.bind({ "dragenter": function (e) { dragEnterHandler(e, dropZone1); } })
.bind({ "dragleave": function (e) { dragLeaveHandler(e, dropZone1); } })
.bind({ "drop": function (e) { dropHandler(e, dropZone1); } });
var dropZone2 = $(document).find("#DropZone2");
dropZone2.bind({ "dragenter": function (e) { dragEnterHandler(e, dropZone2); } })
.bind({ "dragleave": function (e) { dragLeaveHandler(e, dropZone2); } })
.bind({ "drop": function (e) { dropHandler(e, dropZone2); } });
}
}
function dropHandler(e, dropZone) {
dropZone[0].style.backgroundColor = "#357A2B";
}
function dragEnterHandler(e, dropZone) {
var dt = e.originalEvent.dataTransfer;
var isFile = (dt.types != null && (dt.types.indexOf ? dt.types.indexOf('Files') != -1 : dt.types.contains('application/x-moz-file')));
if (isFile || $telerik.isSafari5 || $telerik.isIE10Mode || $telerik.isOpera)
dropZone[0].style.backgroundColor = "#000000";
}
function dragLeaveHandler(e, dropZone) {
if (!$telerik.isMouseOverElement(dropZone[0], e.originalEvent))
dropZone[0].style.backgroundColor = "#357A2B";
}
function ClientFileUploaded(sender, args) {
console.log('ClientFileUploaded');
}
function OnClientFileDropped(sender, args) {
console.log('OnClientFileDropped');
}
</
script
>
<
div
class
=
"qsf-demo-canvas"
>
<
div
class
=
"DropZone1"
runat
=
"server"
>
<
p
>Custom Drop Zone</
p
>
<
p
>Drop Files Here</
p
>
</
div
>
<
div
id
=
"DropZone2"
runat
=
"server"
>
<
p
>Custom Drop Zone</
p
>
<
p
>Drop Files Here</
p
>
</
div
>
</
div
>
</
form
>
Sample is attached.
Regards,
Hristo Valyavicharski
Telerik
DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.