How can I manipulate (clear file, set background color) the AsyncFileUpload control with jQuery?

I have just started to learn (and use) jQuery this week, so I have no experience.

I am calling the js function from the UploadedComplete event if it is determined that the file type is not allowed.

C#

protected void AsyncFileUpload_FormView_DOC_UploadedComplete(object sender, AsyncFileUploadEventArgs e)
{
    ExitStatus exitStatus = IsExtensionAllowed((AsyncFileUpload)sender, FileType.word);
    if (!exitStatus.Success)
    {
        ScriptManager.RegisterStartupScript(this, this.GetType(), "", "ClearAsyncFileUpload('" + ((AsyncFileUpload)sender).ClientID + "');", true);
    }
}

HTML

<script type="text/javascript">
function ClearAsyncFileUpload(senderClientID) { var myID = "#" + senderClientID + "_ctl02"; $(myID).val(''); $(myID).css('background-color', 'red'); }
</script>

the statement var myID = "#" + senderClientID + "_ctl02"; 

does produce the following: "#ctl00_ContentPlaceHolder_BODY_FormView_Specification_AsyncFileUpload_FormView_DOC_ctl02"

but nothing happens when $(myID).val(”); and .css is reached.

The HTML ID of the AsyncFileUpload is AsyncFileUpload_FormView_DOC.

The ClientID sent from the server to the js function is ctl00_ContentPlaceHolder_BODY_FormView_Specification_AsyncFileUpload_FormView_DOC 

When I run the following $(‘#ctl00_ContentPlaceHolder_BODY_FormView_Specification_AsyncFileUpload_FormView_DOC’); in the Chrome console I get the following:

<div id="ctl00_ContentPlaceHolder_BODY_FormView_Specification_AsyncFileUpload_FormView_DOC" style="color:White;">
	<input type="hidden" name="ctl00$ContentPlaceHolder_BODY$FormView_Specification$AsyncFileUpload_FormView_DOC$ctl00" 
		id="ctl00_ContentPlaceHolder_BODY_FormView_Specification_AsyncFileUpload_FormView_DOC_ctl00" 
		value="C:fakepathsome_file.txt">
		
	<div id="ctl00_ContentPlaceHolder_BODY_FormView_Specification_AsyncFileUpload_FormView_DOC_ctl01">
		<input name="ctl00$ContentPlaceHolder_BODY$FormView_Specification$AsyncFileUpload_FormView_DOC$ctl02" type="file" 
			id="ctl00_ContentPlaceHolder_BODY_FormView_Specification_AsyncFileUpload_FormView_DOC_ctl02" style="width: 
			250px; background-color: green;">
	</div>
</div>

It appears that _ctl02 is consistent (at least in the two AsyncFileUpload controls i examined).

When the control is rendered it appear to create two (2) inputs, one type="file" and one type="hidden" 

When I run the following in the Chrome console. I get the desired effect (IE of course, is another story).

$('#ctl00_ContentPlaceHolder_BODY_FormView_Specification_AsyncFileUpload_FormView_DOC_ctl02').val('');
$('#ctl00_ContentPlaceHolder_BODY_FormView_Specification_AsyncFileUpload_FormView_DOC_ctl02').css('background-color', 'red');

When I to do it from the js function however, nothing happens.

Thanks for any suggestions.

Hi matt.gulick

For your issues is related with CMS.MediaLibrary  which is out of  our  support scope ,please post your issue to the link below for a  professional solution.

http://www.kentico.com/Product/All-Features/Content-Management/Media-Library

According to your post , you want to upload a file , If I don’t misunderstand you. Please try my code as below.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="WebApplicationFor2.WebForm2" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %> 
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>      
<script type="text/javascript">
    function showConfirmation() {
        document.getElementById('Label1').innerText = 'file upload complete.';
    }
</script> 
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></ajaxToolkit:ToolkitScriptManager>
        <ajaxToolkit:AsyncFileUpload ID="AsyncFileUpload1" runat="server"  
            OnUploadedComplete="AsyncFileUpload1_UploadComplete"  
            OnClientUploadComplete="showConfirmation"  
            BackColor="green"/>
        <asp:Label ID="Label1" runat="server" Font-Size="Large" Font-Bold="True" ForeColor="red" Font-Names="Comic Sans MS"></asp:Label>
	</div>
    </form>
</body>
</html>

protected void AsyncFileUpload1_UploadComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)  
        {
            string strfilename = System.IO.Path.GetFileName(AsyncFileUpload1.PostedFile.FileName);
            string filePath = @"D:Doc" + strfilename; //revise your path according to your demands
            AsyncFileUpload1.SaveAs(filePath);  
        }  

 

Hope this can help you .

Best regards,

Aswecan

Aswecan

Hi matt.gulick

For your issues is related with CMS.MediaLibrary  which is out of  our  support scope ,please post your issue to the link below for a  professional solution.

Thanks for taking the time to reply, but nothing in your reply relates at all to my issue other then the event to which I was using to trigger my jQuery call.

I don’t know what I wrote that would make you think my issue pertains to this CMS.MediaLibrary, but it has nothing to do with it (I don’t even know what that is).

I know how to upload a file, I was not asking that. I was trying to change some properties of the AsyncFileUpload control triggered from the UploadComplete event.

I am not uploading the file on UploadComplete, I am just doing my own file validation, and if I determine that the file selected is invalid I wanted to clear the file name from the control and change the background to red.

Hi matt.gulick,

I have tried your code in my computer. and I  find that when  I click the upload button, I find that the javascript function not fire in the client side.

I suggest that you can set a  breakpoint on your  "ClearAsyncFileUpload" function to check if it can be hit .

Second, I am not quite sure ,since the file is not valid, why you still upload it to the server ,then clear the file name and change background color.

Best Regards,

Kevin Shen.

The javascript function "ClearAsyncFileUpload" is being triggered from the server side AsyncFileUpload_UploadComplete event. I have set break points in the server and client side as well as placing an alert box in the javascript (which
did appear).

Perhaps your visual studio is not configered to handle client-side debugging. I had to change a few settings in IE in order for it to be able to step through.

As for the file uploading, I am not uploading the file if it is invalid.

In my server side i code i call a method that determines the file validity and returns a bool and string (exit status and exit message).

The UploadComplete event examines the existStatus (bool) and asks, if NOT success (true), then call the javascript function to clear the AsyncFileUpload control and turn background red, so as to inform the user that the file they selected is invalid. I already
advise them via text that the field requires a pdf document, and i also pop up a modal if they select a file other than pdf. Clearing the AsyncFileUpload control is just another step in preventing the user from attempting to save the record.

In the save function, I validate the file again.

  1. On AsyncFileUpload_UploadComplete, files validity is determined. If invalid, alert box informs user of invalid file selection ….. and I want to clear the file from the AsyncFileUpload control and set background to red, like it would be if file failed
    to load into control.
  2. If user ignores alert and attempts to save the record, then another file validation is run and if invalid, file save will not occur.

If i could clear the file control in step 1 then i would not have to validate the file again in step 2.

Leave a Reply