simple text message in upload window

[Jed]

Hi,

  What is the easiest way to add a text message above the input fields in the upload window in file explorer?

Thanks,

Jed

[Vessy]

Hello Jed,

RadFileExplorer does not offer functionality to modify the Upload dialog. Nevertheless, you can achieve this by adding a <label> element to every row with upload information. You could use JavaScript for the implementation.

For your convenience I prepared a sample project, applying the mentioned approach.

Kind regards,
Veselina
the Telerik team

[Jed]

Hi Veselina,

  Thanks for the reply. This solution won't work though if your using asnyc upload. What would be the variation of your code sample for that?

Thank you,

Jed

[Princy]

Hi Jed,

Try the following code snippet to achieve your scenario.

ASPX:

<telerik:RadFileExplorer ID="RadFileExplorer1" runat="server" OnClientLoad="addTitle" Configuration-EnableAsyncUpload="true">
    <Configuration ViewPaths="~/" UploadPaths="~/" DeletePaths="~/" />
</telerik:RadFileExplorer>

JS:

<script type="text/javascript">
    function addTitle(explorer, args) {
        var upload = $find(explorer.get_id() + "_asyncUpload1");
        var uploadEl = upload.get_element(); // Get the upload's wrapper
        var spanelems = uploadEl.getElementsByClassName("ruInputs"); //Get the input field
        var currentSpan = spanelems[0];
        var customLabel = document.createElement("label");
        customLabel.innerHTML = "Value" ;
        currentSpan.parentNode.insertBefore(customLabel, currentSpan);
        currentSpan.parentNode.insertBefore(document.createElement("br"), currentSpan);

    }
</script>

Hope this helps.

Regards,
Princy.

[Jed]

Hi Princy,

  Thank you for the code, it does work in Firefox and Chrome, but not IE. Is there a universal solution or will I need to code differently for IE?

Thanks,

Jed

[Vessy]

Hi Jed,

We modified the previously suggested code for AsyncUpload. The script is tested in Mozilla Firefox, Chrome, Opera and IE, and seems to behave well.

Hope it works for your:

<script type="text/javascript">
    function addTitle(explorer) {
        var upload = $find(explorer.get_id() + "_asyncUpload1");
        var uploadEl = upload.get_element(); // Get the upload's wrapper
        var customLabel = document.createElement("label"); //Create a label element
        customLabel.style.display = "block"; //Change the display mode in order to be on a single row
        customLabel.style.height = "15px";
        customLabel.innerHTML = "Value";
        setTimeout(function () {
            customLabel = uploadEl.parentNode.insertBefore(customLabel, uploadEl); //insert the label as a first element the Upload-row
        }, 0);

        //assign handler to the OnClientAdded event of the underlying AsyncUpload control in order to move the label-element to the current upload-row
        upload.add_added(function (sender, args) {
            var addedRow = args.get_row();
            addedRow.insertBefore(customLabel, addedRow.firstChild);
        });
    }
</script>

Greetings,
Veselina
the Telerik team