I am trying to add a Button "Clear Files" that should not interact with the RadAsyncUpload control.
The problem is that if the client selects a couple files to upload. But then scraps that idea and clicks the Clear All Files link.. the files will upload / process anyway.
I have tried to by pass with jQuery calls to the btnClearALL_clicked method etc.. but nothing is working.
How do I stop files from uploading if I am trying to trigger other functionality (that happens to do a postback) on the same page?
<asp:Panel ID="viewWrapperTab2" runat="server">
<div id="viewWrapper2" style="text-align: center;">
<div class="contentUpload">
...<br />
<br />
..
<telerik:RadAsyncUpload runat="server" ID="multiFileUploadA" MultipleFileSelection="Automatic"
OnFileUploaded="multiFileUploadA_FileUploaded" />
<br />
<br />
..
<telerik:RadAsyncUpload runat="server" ID="multiFileUploadB" MultipleFileSelection="Automatic"
OnFileUploaded="multiFileUploadB_FileUploaded" />
<br />
<br />
<asp:Button ID="btnUpload" runat="server" Text="Upload Files" />
<telerik:RadProgressArea runat="server" ID="RadProgressArea2" />
</div>
<asp:LinkButton ID="btnClearAll" onclick="btnClearAll_Click" runat="server" Text="Clear Files" />
</div>
</asp:Panel>
How do I segregate controls that both do post-backs? FYI: everything is working fine.. I just need btnClearAll_clicked to cancel out multiFileUploadA_FileUploaded from running in the code behind or bypass it completely.
Is there a way to change the firing order in the code-behind?
protected void multiFileUploadA_FileUploaded(object sender, FileUploadedEventArgs e){} is firing before protected void btnClearAll_Click(object sender, EventArgs e){}
deleteFileInputAt() method should remove all files on the client:
function deleteAllFiles() {
var upload = $find('RadAsyncUpload1');
for (var i = 0; i < upload.getUploadedFiles().length; i++) {
upload.deleteFileInputAt(i);
}
}
This will be done on the client side. Since you are using javascript to submit the files for upload, you should be able to add a listener to the xhr object to watch for progress. Something like this:
xhr.upload.addEventListener('progress', function(e){
if(haltUpload) {
xhr.abort();
}
}, false);
You may also want to alert the server the file(s) have been aborted to prevent their processing.
to be clear so I can try help here are we talking about removing them once they have uploaded or cancelling whilst they are still being uploaded as this isn't very clear in the question and reading other people's answers hasn't helped me to determine which you mean.
You can remove runat="server" so there will be no postback and then use function deleteAllFiles() (as suggested above)to remove files on client
Related
im creating the form include below code :
<asp:TextBox ID="txtPhone" required="required" runat="server" placeholder="Phone No. (eg. 999)"
CssClass="glowStyle"></asp:TextBox>
<br />
<asp:Button ID="btnAddDriver" Text="Add" runat="server" CssClass="button" />
<br />
<asp:Button ID="btnCnclAddDriver" Text="Clear" runat="server"
CssClass="cancelbutton" onclick="btnCnclAddDriver_Click" />
</form>
when i click the "Clear" button, the required (html5) still show up.
how to disable it for Clear button only.
Add formnovalidate attribute to your cancel/clear button.
Here you can find some more information about this attribute.
Do you actually require a server control to cancel ? A simple <input type="reset"> or a small javascript code can do the job in most situations.
If not, simple add CauseValidation="false" to your button :
<asp:Button ID="btnCnclAddDriver" CauseValidation="false" Text="Clear" runat="server"
CssClass="cancelbutton" onclick="btnCnclAddDriver_Click" />
(remove suggestion as it applies to asp.net validation)
You can set the autopostback option for btnCnclAddDriver button to False. And execute your server side code (btnCnclAddDriver_Click) by Ajax.
You can clear your TextBox(s) with javascript (jQuery) :
$('txtPhone').val('');
Or Javascript :
function name()
{
document.getElementById('txtPhone').value = "";
}
Hope this help.
This is not just another FileUpload + UpdatePanel question.
I have, as stated in the many similar posts, an UpdatePanel and a FileUpload control on my form. I also have a PostBackTrigger set up for my upload button.
It works. The catch is it never does work on first time click. That is:
I click on browse, select my file, press upload. Nothing happens (fupld.HasFile = false);
I click on browse again, select any file (the same or another), press upload and it works fine.
<asp:UpdatePanel ID="upGeneral" runat="server" >
<ContentTemplate>
...
<table id="tabPage10" runat="server" visible="false" width="100%" >
<tr>
...
<td>
<asp:FileUpload ID="fupld" runat="server" Width="80%" />
<asp:ImageButton ID="ibtnUpld" runat="server" onclick="ibtnUpld_Click" />
<td>
...
<tr>
...
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="ibtnUpld" />
</Triggers>
</asp:UpdatePanel>
I've looked around for answers, but this is some really weird behaviour. No luck so far.
Any ideas?
Thanks
Well, the FileUpload control is designed to be used only in postback scenarios and not in asynchronous postback scenarios during partial-page rendering.
http://msdn.microsoft.com/en-us/ysf0192b#using_the_FileUpload_Control_with_the_UpdatePanel_control
You could use the AsyncFileUpload control instead from the AjaxControlToolkit.
<asp:AsyncFileUpload runat="server" ID="asyncFileUpload" Width="400px" ThrobberID="imageThrobber"
OnClientUploadStarted="uploadStarted" OnClientUploadError="uploadError"
ClientIDMode="AutoID" PersistFile="true" PersistedStoreType="Session" />
code behind:
if (asyncFileUpload.HasFile)
{
string fullPath = GetPath(asyncFileUpload.FileName);
asyncFileUpload.SaveAs(fullPath);
}
I've never had any problems with it.
With Post back triggers I had to use the below line of code in code behind:
Page.Form.Enctype = "multipart/form-data";
And this works perfectly fine.
Thanks to the solution in the link - (http://patelshailesh.com/index.php/file-upload-control-fails-first-time-then-works-on-subsequent-submits).
Change
Visible ="false"
to
style="display:none"
and change it from code behind.
If you set Visible="false, control is not actually rendered as HTML. To rendered it as HTML, use style = "display:none" instead of Visible="false"
I have created 2 modaldialogs. My problem is that I need to show them from server-side if a few conditions are met (after clicking a button). I've been googling around and there was a solution to add the extender to an invisible control and launch it from code.
But since there's nothing showing, I suppose I'm doing something wrong. I tried it with a click on the linkbutton, to see if that was working and this is showing the dialog.
Thanks in advance.
Markup:
<asp:LinkButton ID="lnkPrompts" runat="server">LinkButton</asp:LinkButton>
<asp:ModalPopupExtender ID="lnkPrompts_ModalPopupExtender" runat="server"
BackgroundCssClass="modalBackground" Enabled="True"
TargetControlID="lnkPrompts" PopupControlID="pnlPromptModal"
OkControlID="pnlPromptModal">
</asp:ModalPopupExtender>
<asp:Panel ID="pnlPromptModal" runat="server" Width="350px" Height="70px"
CssClass="modalPopup" Style="display: none;">
Some text
<div style="">
<asp:Button ID="btnModalPromptOk" runat="server" Text="OK" />
</div>
</asp:Panel>
On server-side:
protected void btnViewPrompts_Click(object sender, EventArgs e)
{
if (conditionMet)
{
Response.Redirect("IvrPrompts.aspx?Id=" + breakdownView.Id);
}
else
{
//ToDo: Show modaldialogbox
lnkPrompts_ModalPopupExtender.Show(); //This does nothing...
}
}
The times that I've used the ModalPopupExtender in the way you're describing, I've wrapped them in an UpdatePanel. This is the only way to have the server side "initiate" the action like you're describing.
Well, seems it does work. The only problem was that I had a Response.Redirect right after the line lnkPrompts_ModalPopupExtender.Show(); and that was the problem. The dialog was never shown. After commenting out the Redirect, it all works as it should.
Anyway, sorry for wasting your time. Should be more awake next time when trying something new...
You need to do this from javascript on the client side. The server can never initate actions on the client, but the client can ask the server if the condition is met and take actions based on that. The way you want to do this is probably by performing an Ajax background call from the client to the server when the button is pressed.
I have an image that is a hyperlink. How do I access my "searchRedirect" function for a redirect from the server side after the image is clicked?
<input id="textSearch" runat="server" name="textSearch" type="text" />
<asp:HyperLink id="searchButton" runat="server">
<img alt="" src="images/SearchButton.png"/>
</asp:HyperLink>
protected void searchRedirect()
{
Response.Redirect("/NewProject/Home/?searchString=" + textSearch.Value;
}
Rather than a HyperLink, you'll want to use a LinkButton and listen for its Click event
<input id="textSearch" runat="server" name="textSearch" type="text" />
<asp:LinkButton id="searchButton" runat="server" OnClick="searchRedirect">
<img alt="" src="images/SearchButton.png"/>
</asp:LinkButton>
protected void searchRedirect(sender As Object, e As EventArgs)
{
Response.Redirect("/NewProject/Home/?searchString=" + textSearch.Value);
}
Al Kepp is suggesting that doing it this way causes the page to post back only to realize the redirect, leading to an unnecessary page load. A javascript version such as the one below would avoid the first post back:
<input id="textSearch" runat="server" name="textSearch" type="text" />
<a href="#" onclick="window.location='/NewProject/Home/?searchString=' + getElementById('textSearch').value; return false;">
<img alt="" src="images/SearchButton.png"/>
</a>
I didn't actually test that code, but I don't think I have any typos.
Either write it in JavaScript, because it is the only way how to perform that code on client side. That is necessary to make it work exactly as you wish.
Or use LinkButton as Nick Spiers said. In that case you won't see testSearch.Value in url address. (That is often good, but if you want to see it there, the best you can do is to write it in JavaScript.) But unlike Nick Spier's code, I would omit redirect command there and perform the required search action immediately. (Because redirect will cause sending two pages to client, which is not what user usually expects when he/she presses the search button.)
Or you could use javascript and get rid of an extra roundtrip to the server. Here's an example using jQuery
<input id="textSearch" class="textSeachClass" runat="server" name="textSearch" type="text" />
<asp:HyperLink id="searchButton" CssClass="searchButtonClass" runat="server">
<img alt="" src="images/SearchButton.png"/>
</asp:HyperLink>
<script type="text/javascript">
// This code should be put in a separate .js-file so it can
// be cached and the aspx page will be more SEO-friendly
$("a.searchButtonClass").click(function (e) {
e.preventDefault();
window.location = "/NewProject/Home/?searchString=" + $("input.textSeachClass").val();
});
</script>
I use css classes as selectors since ASP.Net Webforms will change the client id of the controls when they get rendered, unless you use .Net Framework 4.
There are other similar posts, but they all want a progress bar. I don't care.
I will probably end up buying Ajax Uploader, but I would like to know if there is a way to just let the user know if a file is in the process of being uploaded. I have tried an Ajax ProgressIndicator but it doesn't work...The file upload part works, but the progresscontent does not get displayed.
Here is what I have without the Ajax:
<asp:FileUpload onchange="clickTheButton();" ID="FileUpload1" runat="server" />
<asp:Button ForeColor="#ffffff" BackColor="#ffffff" BorderColor="#ffffff" BorderWidth="0"
ID="Button1" runat="server" Text="Add Image" OnClick="AddImage_Click" />
Just a file upload control and a button that uploads the file.
All I need is a way to let the user know that it is busy sending the file.
Why not just create some hidden element on the page like this:
<div id="loadingDiv" style="display: none;">Please wait, uploading file...</div>
and then in the OnClientClick of your upload button, return a function like so:
function displayWaitingMessage(){
document.getElementById('loadingDiv').style.display = 'block';
return true;
}
Should display the message and then proceed with the postback to upload the file.
Just query your server at reasonable intervals with Ajax to see if the file you're trying to upload exists yet, and show an appropriate indication based on the response.