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

Calling a server side function on every file upload complete event

11 Answers 1097 Views

AsyncUpload

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

Oren asked on 31 Dec 2013, 01:08 PM

Hello,
I'm building a multi video uploader using "RadAsyncUpload" control.
for each video the user will be asked to fill its title. after he had selected all the videos with their titles he will press submit.
The page will only submit the files after all of them have been uploaded.
On the server side, after the submission each file directory will be change and a new record in the database will be added.

My question is:
Since the upload process can take a lot of time ,and in the event of a connection lost, or closing the browser by mistake
the user will have to upload all files again.
I was wondering if it is possible to call a server side function to preforme the file logging and manupuletion for each completed video without stopping the upload process?

this is a snippet of my code for example:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TestPage.aspx.cs" Inherits="TestPage" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

</head>

<body>

<form id="form1" runat="server">

<div style="background-color: white" id="test-div">

<asp:ScriptManager ID="ScriptManagerMain" runat="server">

<Scripts>

<asp:ScriptReference Path="~/Script/jquery-1.9.1.min.js" />

<asp:ScriptReference Path="~/Script/jquery-migrate.js" />

<asp:ScriptReference Path="~/Script/ValidationEngineLibrary/jquery.validationEngine.js" />

<asp:ScriptReference Path="~/Script/ValidationEngineLibrary/jquery.validationEngine-en.js" />

</Scripts>

</asp:ScriptManager>

<telerik:RadAsyncUpload runat="server" ID="RadAsyncUpload1" ClientIDMode="Static" HideFileInput="true" OnClientFilesUploaded="fileUploaded" OnClientFileSelected="addFileTitle" MultipleFileSelection="Automatic" MaxFileInputsCount="10"></telerik:RadAsyncUpload>

<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClientClick="return submitPage();" OnClick="btnSubmit_Click" />

<span id="uploading-msg"></span>

<input type="button" runat="server" value="clearAll" onclick="clearAll()" />

<asp:Label runat="server" ID="updateInfo"></asp:Label>

</div>

<telerik:RadScriptBlock runat="server">

<script type="text/javascript">

var submitPressed = false;

function clearAll() {

$("#RadAsyncUpload1").find("input[name=RowRemove]").each(function () {

$(this).click();

});

}

function addFileTitle(radAsyncUpload, args) {

var $row = $telerik.$(args.get_row());

var inputName = radAsyncUpload.getAdditionalFieldID("TextBox");

var inputType = "text";

var inputID = inputName;

var input = createInput(inputType, inputID, inputName);

var label = createLabel(inputID);

$row.append("<br/>");

$row.append(label);

//Add required validation

$(input).addClass("validate[required,custom[movieTitle]]");

$row.append(input);

}

function createInput(inputType, inputID, inputName) {

var input = '<input type="' + inputType + '" id="' + inputID + '" name="' + inputName + '" />';

return input;

}

function createLabel(forArrt) {

var label = '<label for=' + forArrt + '>File info: </label>';

return label;

}

function submitPage() {

$('#form1').validationEngine({ maxErrorsPerField: "1", binded: false, scroll: false });

var valid = $('#form1').validationEngine('validate');

//Check file uploads

if (valid == false)

return false;

if (!isAllUploadCompleted()) {

$("#<%=btnSubmit.ClientID%>").hide();

$("#uploading-msg").text("Uploading");

setInterval(function () { $("#uploading-msg").blink(); }, 1500);

$("#test-div").blockElement();

submitPressed = true;

return false;

}

return true;

}

function fileUploaded() {

if(submitPressed && isAllUploadCompleted())

fireSubmit();

}

function isAllUploadCompleted() {

var $ = $telerik.$;

//finds all file uploads that are currently in progress

var uploadingRows = $(".RadAsyncUpload").find(".ruUploadProgress");

//iterates and checks is there any file uploads that are successfully completed or failed and if yes - pop-up an alert box and prevent page submitting

for (var i = 0; i < uploadingRows.length; i++) {

if (!$(uploadingRows[i]).hasClass("ruUploadCancelled") && !$(uploadingRows[i]).hasClass("ruUploadFailure") && !$(uploadingRows[i]).hasClass("ruUploadSuccess")) {

return false;

}

return true;

}

function fireSubmit() {

document.getElementById("<%=btnSubmit.ClientID%>").removeAttribute("onclick");

document.getElementById("<%=btnSubmit.ClientID%>").click();

}

</script>

</telerik:RadScriptBlock>

</form>

</body>

</html>

thank you
oren

11 Answers, 1 is accepted

answered on 23 Jan 2014, 04:05 PM

Hi Hristo,
First of all ,Thank you for very much for your help.
In the example that you sent me , I saw that its possible to add a "queryStringParams" using the "args" obj in the FileUploading event,
like so:

function onClientFileUploading(sender, args) {

var obj = { first: 1, second: 2 };

args.set_queryStringParams(obj);

}

My problem with this event is that, since the "onClientFileUploading" method is being invoked as soon as the user select his file,
and he doesn't have a chance to set the file name , since the file name input box is being created on the FileSelectedEvent.
My question is how can I access the "queryStringParams" method from the uploader object?

Kind regards,
oren

answered on 28 Jan 2014, 04:33 PM

Hi Oren,

Yes you are right. The handler will be invoked before the user manage to enter a username. Try different approach. Remove the handler, enter a username and change the file name on the server in the OnFileUploaded event:

<telerik:RadTextBox ID="rtbFileName" runat="server" Label="File Name"></telerik:RadTextBox>

<telerik:RadAsyncUpload

ID="RadAsyncUpload1"

OnClientFileUploadFailed="OnClientFileUploadFailed"

OnClientValidationFailed="OnClientValidationFailed"

OnFileUploaded="RadAsyncUpload1_FileUploaded"

runat="server">

</telerik:RadAsyncUpload>

<telerik:RadButton ID="RadButton1" runat="server" Text="Upload"></telerik:RadButton>

protected void RadAsyncUpload1_FileUploaded(object sender, FileUploadedEventArgs e)

{

string target = Server.MapPath("~/Uploads/");

string fileName = rtbFileName + e.File.GetExtension();

e.File.SaveAs(target + fileName);

}

Regards,
Hristo Valyavicharski
Telerik

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 UI for ASP.NET AJAX, subscribe to the blog feed now.

answered on 06 Feb 2014, 06:38 AM

Hi Hristo,
Thank you for your reply.
Your solution to the problem was the first thing that I tried to do when I started to build this multi video uploader.
Using this approach,I faced a problem of losing all data , if connection error occurs.The OnFileUploaded event is being invoked only when all uploads finish uploading,And I can't access movies that already was uploaded. The handler was a good solution because , it was called on each file upload event,but the only problem I had with it was the I couldn't find a way to set the queryStringParams outside the onClientFileUploading. Is there a way I can set the queryStringParams on a button press event , and not from the onClientFileUploading event??
Kind Regards,
Oren

answered on 10 Feb 2014, 03:54 PM

Hi Oren,

It is not possible to set the Query String on a button click, because it will be too late. I would suggest that you to try the following approaches:

Use Additional Fields to set the video's title.
Or in the handler return the video's ID that is returned from the database. Later, having a Video ID on the Client make a call to a web service, which updates the db's record with the video's Title.

Regards,
Hristo Valyavicharski
Telerik

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 UI for ASP.NET AJAX, subscribe to the blog feed now.

answered on 12 Feb 2014, 06:23 AM

Hi Oren,

From your code I see that you are setting MultipleFileSelection property as Automatic. So that you can use OnClientFileUploded event which will for each uploaded file as follows.

ASPX:

<telerik:RadAsyncUpload ID="RadAsyncUpload1" runat="server" MultipleFileSelection="Automatic"

OnClientFileUploaded="OnClientFileUploaded1">

</telerik:RadAsyncUpload>

JavaScript:

<script type="text/javascript">

function OnClientFileUploaded1(sender, args) {

alert(args.get_fileName());

}

</script>

Thanks,
Shinu.