upload attachment similar to Telerik forums

[Mohan]

Hi,

I have a radupload control on the form. Currently if i want to upload multiple files, I have to use the Add button which creates a new file Input control.  What I want to implement is similar to what you have for attaching files in the forums.


Is it possible with RadUpload control?

thanks

[Shinu]

Hello Mohan,

I guess you want to add new fileInput control when selecting a file. If so you can try adding new fileinput control in OnClientFileSelected event handler. See the example that I tried.

aspx:

<telerik:RadUpload ID="RadUpload2" OnClientFileSelected="OnClientFileSelected"
    runat="server" ControlObjectsVisibility="ClearButtons">
</telerik:RadUpload>

javascript:

<script type="text/javascript">
    function OnClientFileSelected(sender, args) {
        sender.addFileInput();
    }
</script>

-Shinu.

[Mohan]

Shinu,
Thanks for the reply. I had implemented something similar to what you suggested. 

What i wanted to avoid was having multiple file input  controls.

Take a look at the attached image. You can see there is only 1 file input control. Any attachment you select is added to a list.
I want to minimize the amount of space in case the user decides to upload many files.

thanks
Jay

[Paul]

Hello Mohan,

Here's a sample code snippet that shows the needed approach.

<form id="form1" runat="server">
   <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
   </telerik:RadScriptManager>

   <script type="text/javascript">
       function attachImageStep(state) {
           if (state == 'attachImageExpandLink') {
               document.getElementById("attachImageExpandLink").style.display = 'block';
               document.getElementById("attachImageForm").style.display = 'none';
               $find("<%= fileBrowser.ClientID %>").clearFileInputAt(0);

           } else if (state == 'attachImageForm') {
               document.getElementById("attachImageExpandLink").style.display = 'none';
               document.getElementById("attachImageForm").style.display = 'block';
           }
       }
   </script>

   <div id="attachImageExpandLink">
       <a href="javascript:attachImageStep('attachImageForm')">Attach your files</a> <span>
           (optional)</span>
   </div>
   <div id="attachImageForm" style="display: none;">
       <label id="lblAttachFile">
           Attach file</label>
       <telerik:RadUpload ID="fileBrowser" runat="server" AllowedFileExtensions=".zip,.rar,.ace,.jpg,.bmp,.png,.gif"
           MaxFileSize="20971520" ControlObjectsVisibility="None" />
       <span>(optional)</span>
       <telerik:RadProgressArea runat="server" ID="RadProgressArea1" />
       <telerik:RadProgressManager runat="server" ID="RadProgressManager1" />
   </div>
   </form>

All the best,
Paul
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Alaa Majzoub]

hello Mohan, you can start from this code.

function enableUploadBtnValidation (radUpload, eventArgs){
    var inputFL = eventArgs.get_fileInputField();
    if (radUpload.isExtensionValid(inputFL.value))
    {
        var selectedFileName = inputFL.value.toLowerCase();
        var selectedFileExt = selectedFileName.substring(selectedFileName.lastIndexOf("\\") + 1);
        inputFL.parentNode.parentNode.className = 'uploadAnother';

        if(selectedFileName !="") {
            document.getElementById("selectedImageFileName").innerHTML += '<li><em>'+selectedFileName+'</em>' + selectedFileExt + ' <a href="#" onclick=\'removeFileFromUploadList(this); return false; \'>remove</a></li>';
        }

        radUpload.addFileInput();

        attachImageStep("selectedImage");
        document.getElementById("fileExtraValidator").style.display = "none";
        document.getElementById("fileSizeExtraValidator").style.display = "none";

        if(document.getElementById("lblAttachFile").innerHTML == 'Attach file')
            document.getElementById("lblAttachFile").innerHTML = 'Attach another';

        var lis = document.getElementById("selectedImageFileName").getElementsByTagName("li");

        if(selectedFileName !="") {
            FadeFromYellow(lis[lis.length-1],255,255,255,"backgroundColor");
        }

    } else {
        document.getElementById("fileExtraValidator").style.display = "inline";
    }

}