check required file upload with radasyncupload

[S]

when using the radasyncupload in a scenario that you have several steps to complete until the final save can be done AND the upload of the file is not in the final step, you may find yourself in the situation that either you check the file in code behind (and force the postback trigger) or you postpone to the end when really processing the file to check if it's OK. 

First option has a drawback that you get the file info in your code behind but at the next postback you have nothing left as the radasyncupload looses its information. Second option has the drawback that you come with comment on missing file or other file problem in a step that does not correspond with the step they uploaded the file.

How to come over this????

Solution: just add a radtextbox (readonly) to your form below the radasyncupload. On client upload you set the value of that textbox. You have a regular required field validator linked to the textbox. If the upload is successful and valid you set the textbox with the filename and the validator passes. If the file upload is not done or invalid the textbox keeps or gets an  empty string. The validator will not pass and the next button will keep you at the page until the file thing is solved. When the file upload is correct you can have a postback going to next step and rewind to the previous step and you still find your file in radasyncupload. Only at the last step where you assigned the button ID as the postbacktrigger of radasyncupload the data including the file will be available at code behind and can be processed.

 

Below is the javascript that I used. I create dynamic upload controls on a form depending if the user defined to have upload controls. The number of upload controls is less than 10 at max. Each control has its related textbox to check the upload status and test it with a related required field validator.

function OnClientValidationFailed(sender, args) {
        // get the index number of the file upload object (if you have several on the same page the last character is the index number
        var CurrentFileIndex = sender.get_id().slice(-1);
        // reset the corresponding TB to an empty string to detect that is has not been uploaded
        var textbox = $find('RegisterForm1_Step3_TB_REQUIRED_file' + CurrentFileIndex);
        textbox.set_value('');
    }

      

    function OnClientFileUploaded(sender, args) {
        var CurrentFileIndex = sender.get_id().slice(-1);
        var textbox = $find('RegisterForm1_Step3_TB_REQUIRED_file'+CurrentFileIndex);
        textbox.set_value(args.get_fileName()); 
    }

    function OnClientFileUploadRemoved(sender, args) {
        var CurrentFileIndex = sender.get_id().slice(-1);
        var textbox = $find('RegisterForm1_Step3_TB_REQUIRED_file' + CurrentFileIndex);
        textbox.set_value('');
    }
   

[Peter Milchev]

Hello,

If the desired functionality is to process the files only on the Finish button click, then you can change the PostbackTriggers collection dynamically to determine if the files should be available after the postback or not. 

• https://docs.telerik.com/devtools/aspnet-ajax/controls/asyncupload/how-to/how-to-persist-uploaded-files;
• https://www.telerik.com/support/kb/aspnet-ajax/upload-(async)/details/dynamically-change-the-postbacktriggers-collection-of-the-asyncupload;
• https://docs.telerik.com/devtools/aspnet-ajax/controls/asyncupload/how-to/prevent-page-submitting-while-uploading-file.html;

Attached is a sample project implementing the suggested approach. To run it, you should add the .NET 4.5 version of the Telerik.Web.UI.dll assembly in the bin folder of the project. 

Regards,
Peter Milchev
Progress Telerik

[S]

Thanks for your suggestion. The issue I faced was that there is no easy "required field validator" for the asyncupload. So either you postback to see if the collection is empty at the server side, but as a consequence you need to process this as well otherwise you test that it is complete but you loose it after the test. If you don't postback so you can do some other checks or collect some other data in other steps of a radwizard for example, then you will maintain what you have (files persist) but you cant check if the files are there and you have no easy way to prevent going to the next step like you have with a textfield + required field validator.

My solution using a textbox to store the file name of the uploaded file at the client when the upload is successful makes it possible to check for the upload in the upload page and hold the user there until uploaded, go to next steps, and only at the end use the END button as postback trigger. 

To my big surprise the END button that is hosted in a different control then the asyncupload realy was seen by the asyncupload as postbacktrigger just using the ID of that button (BTN_END). That was a nice surprise because I would not know how to refer to this last button if it should be something like parent.findcontrol etc.... I think the postbacktrigger property just only supports an ID and happily it does not expect this ID only in the control that hosts the asyncupload.

Kind regards

[Peter Milchev]

Hello,

I am glad that you managed to implement a working solution.

What I can suggest about the RequiredFieldValidator alternative for the AsyncUpload is to use a CustomValidator as suggested in Required validator and RadAsyncUpload.

<script>
    function validateUpload(sender, args) {
        var upload = $find("<%=RadAsyncUpload1.ClientID%>");
        args.IsValid = upload.getUploadedFiles().length != 0;
    }
</script>

<telerik:RadButton runat="server" AutoPostBack="true" ID="RadButton1" Text="Postback" />
<telerik:RadAsyncUpload ID="RadAsyncUpload1" runat="server"></telerik:RadAsyncUpload>
<asp:CustomValidator runat="server" ID="CustomValidator" ClientValidationFunction="validateUpload"
    ErrorMessage="Select at least a single file">
</asp:CustomValidator>

Regards,
Peter Milchev
Progress Telerik

[S]

Thanks Peter, this is a useful alternative. I'm not very strong in javascript so I always prefer server side which is for me a more convenient way of programming. Your solution is a better alternative than mine. In future will use it.

Have a nice day and thanks for monitoring the posts.