Hide Upload control when adding another upload

[Alaa Majzoub]

Hello,

What I am trying to do is to have only one visible Upload at a time, selecting a file will result in hiding it and creating a new clean one - we are not actually hiding it, we are displaying it in a different GUI.

How can i do that? both client side and serverside (if ajax is used).

[Shinu]

Hi Alaa,

I hope the following forum link would be helpful in achieving the scenario.
Upload attachment similar to Telerik forums

Feel free to share the comments,
Shinu.

[Alaa Majzoub]

Thank you, I will check the code and let you know.

One more thing if you please.

Is there a way to set DISALLOWED file types instead of only setting Allowed types? i want to prevent uploading EXE file, but anything else is ok.

[Genady Sergeev]

Hello Alaa Majzoub,

There is no such property, however you can mock it very easily. What kind of validation do you need server or a client side one?

Best wishes,
Genady Sergeev
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]

Client side, as soon as the user selects a file.

I would love to see it possible at telerik not allow the user to select a specific type at all, or to multi select files, i am aware that this is restricted by the browsers, but i've seen this implemented using flash, why dont you add this option?

[Alaa Majzoub]

Hello,
for the Hiding the Upload control, i have exactly the same question, you are right.

But in both my question and the other question posted by your other customer, it is either you misunderstood us or that I - at least - didnt understand your sample.

i can see from the code that the only method you are using is clearFileInputAt which is does not do what we exactly need.

The idea is to HIDE the current (top most, 0 indexed) upload before adding a new one, so that there is only one upload that can be clicked by the user to choose a file, we can disable uploads but we prefer to hide them, especially that they are attached to other controls that we can clear, we cannot clear upload since clearing them will cancel uploading the file.

I hope this made it clearer, to see an example, see our site, we used it there. but it worked in your older version using ListContainer.childNodes, this property is not supported anymore by you, thats why we are asking again here.

Thanks.

[Alaa Majzoub]

Never mind the hiding issue, i can start from here:

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";
    }

}

[Genady Sergeev]

Hello Alaa Majzoub,

This can be achieved very easily using jQuery. Suppose we have the following function executed on onClientAdded:

var isFirst = true;
function clientAdded(sender, args) {

          if (isFirst) {

              isFirst = false;

              return;

          }

          var index = args.get_rowIndex() - 1;

          $telerik.$("li:eq("+ index + ")", sender.get_element())

              .css("display", "none");

      }

This will clear the previous row when a new one is added.

As for your validation statement, set the AllowedFilesExtensions property with the file extension you want to forbid. Then you can use the following function that returns true if your extension matches the criteria and false otherwise.

function validateFiles(radUpload) {
           var counter = radUpload._getRowCount();

           for (var i = 0; i < counter; i++) {
               var row = radUpload._getRow(i);

               var currentFileName = radUpload.getFileInputFrom(row).value;
               if (this.isExtensionValid(currentFileName)) {
                   return false;
               }
           }
           return true;
       }

Kind regards,
Genady Sergeev
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.