Custom Upload File Fields

[Chris]

Is it possible using RadFileExplorer to customize the upload window with controls to specify additional fields (i.e. description) to be passed to StoreFile(...)? The last parameter of this method is a string array called "arguments", which I assume is for this purpose.

[Fiko]

Hello Chris,

I believe that this online demo and this help article will be of help. The difference is that you need to attach the OnClientAdded event handler on the server side as follows :

RadFileExplorer1.Upload.OnClientAdded = "addTitle";

On the client-side, you can get reference to the embedded into RadFileExplorer RadUpload control by using the followings approach :

 var oUpload = $find("<%= RadFileExplorer1.Upload.ClientID %>");

Then you can use its client-side API and manipulate that object.
In case that you use a custom content provider you can use the StoreFile() function as well.

For your convenience I have attached a demo to the thread, that includes all of the parts in one project. In that project I used the ItemCommand server event of the RadFileExplorer control (in this help page a button_click event is used) and get the values from the fields, but please note that the event fire for every uploaded file. For example if you upload two files at the same time, this event will fire two time as well. That is why I used a comparison in that event handler in order to get the values of the fields one time only.


Kind regards,
Fiko
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Chris]

Thanks for the help. I ended up assigning (in the codebehind) the OnClientAdded event to my javascript function, then manipulating the upload fields on the client as the documentation has suggested.

 

radFileExplorer.Upload.OnClientAdded = "AddFields"

[Gonzalo]

hi telerik team...
I have similar problem but in my case i added some controls to popup window upload. But i need set tabindex to this controls.
When press tab key the popup window loses focus and i need pick up the mouse and make click in some control in popup window  to set again the focus in popup window.
Regards...

[Petio Petkov]

Hello Gonzalo,

I already answered your support ticket on the same subject. Please send us the sample project that I asked for and we will check it right away.


Kind regards,
Petio Petkov
the Telerik team

[Felipe Casanova]

Hello,
I'm trying to do this in the FileBrowser dialog from a RadEditor control using the ExternalDialogs path.
The FileBrowser control has no code behind so i'm using inline code in the markup like the following to try and set the FileExplorer's RadUpload OnClientAdded event

<script runat="server">
protected override void OnInit(EventArgs e) {
        RadFileExplorer1.Upload.OnClientAdded = "addTitle";
}
</script>

Doesn't seem to work however, is there something special I need to do or a different event to use?
Or is there a better way of customising the Upload form used by the Image Manager / RadEditor?

[Dobromir]

Hi Matt,

To be able to modify RadEditor's built-in dialogs server-side you need to register a WebUserControl to the dialog and access the dialog's controls from there. Please review the following KB article for example of this approach:
Displaying single upload control in the FileBrowser Upload manager

Greetings,
Dobromir
the Telerik team

[Felipe Casanova]

Thanks Dobromir, that worked.

Is it possible to do something like open a RadWindow by hooking it up to the FileExplorer's RadUpload OnClientFileSelected event?

The event fires but the code below fails:

var oWnd = $find("<%= RadWindowImageSize.ClientID %>");

I have the RadWindow control included in the FileBrowser.ascx file.

<custom:customControl ID="customControl1" runat="server">
<telerik:RadWindow ID="RadWindowImageSize" runat="server">
</telerik:RadWindow>

etc

[Felipe Casanova]

Also how do I pass the retrieved extra values to my Custom content provider's StoreFile method? I see there is a string[] arguments parameter but how do I set this value?

protected void RadFileExplorer1_ItemCommand(object sender, Telerik.Web.UI.RadFileExplorerEventArgs e)
{
    if (e.Command == "UploadFile")
    {
        Telerik.Web.UI.RadFileExplorer explorer = sender as Telerik.Web.UI.RadFileExplorer;
        Telerik.Web.UI.RadUpload upload = explorer.Upload;

        //e.Path holds the file path
        string name = e.Path.Split(new char[] { '/' }).Last(); // get the filename including extension ;

        foreach (Telerik.Web.UI.UploadedFile uploadedFile in upload.UploadedFiles)
        {
            if (name.Equals(uploadedFile.GetName()))
            {
                string fileName = uploadedFile.GetName();
                string imageSize = uploadedFile.GetFieldValue("imageSize");
                //string description = uploadedFile.GetFieldValue("Desc");
                //bool createThumbnail = uploadedFile.GetIsFieldChecked("Thumbnail");

                // would like to pass imageSize to StoreFile method...

                break;
            }

        }
    }
}

[Dobromir]

Hi Matt,

In order to pass the arguments to the StoreFile() method you need to cancel the default execution of ItemCommand event and manually call the method, e.g.:

FileSystemContentProvider _contentProvider = null;
private FileSystemContentProvider ContentProvider
{
    get
    {
        if (object.Equals(this._contentProvider, null))
        {
            this._contentProvider = new FileSystemContentProvider(this.Context,
                                            RadFileExplorer1.Configuration.SearchPatterns,
                                            RadFileExplorer1.Configuration.ViewPaths,
                                            RadFileExplorer1.Configuration.UploadPaths,
                                            RadFileExplorer1.Configuration.DeletePaths,
                                            string.Empty,
                                            string.Empty);
        }
        return this._contentProvider;
    }
}


void RadFileExplorer1_ItemCommand(object sender, RadFileExplorerEventArgs e)
{
    if (e.Command == "UploadFile")
    {
        //.........
        foreach (UploadedFile uploadedFile in upload.UploadedFiles)
        {
            if (name.Equals(uploadedFile.GetName()))
            {
                string[] arguments = new string[] { "argument1", "argument2" };
                explorer.InitialPath = this.ContentProvider.StoreFile(uploadedFile, explorer.CurrentFolder, uploadedFile.GetName(), arguments);

                //.......
            }
        }
    }
}

Regards,
Dobromir
the Telerik team

[Terri-Lynn]

Hi Fiko:

I've downloaded your customfields.zip file and I believe it's exactly what I'm looking for.  I'm getting tripped up though in one line that doesn't seem to conver to VB (yes, I'm using VB).  Specifically:

private void ConfigureRadFileExplorer()

{

    RadFileExplorer1.Configuration.ViewPaths = new string[] { "~/Thumbs/" };

    RadFileExplorer1.Configuration.DeletePaths = new string[] { "~/Thumbs/" };

    RadFileExplorer1.Configuration.UploadPaths = new string[] { "~/Thumbs/" };

    RadFileExplorer1.InitialPath = Page.ResolveUrl("~/Thumbs/");

    RadFileExplorer1.Upload.OnClientAdded = "addTitle";

    RadFileExplorer1.ItemCommand += new RadFileExplorerEventHandler(RadFileExplorer1_ItemCommand);  <-- this line!

}


If you or anyone has any suggestion on how to do this line in VB that would be GREATLY appreciated.
Thanks,
TL

[Terri-Lynn]

I figured it out on my own quickly (thankfully).  For anyone else that has the same issue as me above, here's the VB equivelant!

AddHandler RadFileExplorer1.ItemCommand, AddressOf RadFileExplorer1_ItemCommand

[Samir]

The code only works when EnableAsyncUpload="False".
If I set to true it is not showing any fields which was added via addTitle

[Vessy]

Hi Chris,

The control, which is nested by default in RadFileExplorer is RadUpload (EnableAsyncUpload="False") and RadAsyncUpload otherwise. This is why you will have to modify the code above to access the AsyncUplaod control as well as to use its events and properties.

For your convenience I have modified the Fiko's project, so now its is working with enabled RadAsyncUpload.

Regards,
Vesi
the Telerik team

[G]

Hi Vesilina,

Thank you. The sample project works, but there's a bug after you have selected the file to upload.
The labels for the custom fields then suddenly disappear. The actual input textboxes are still there and their values are correctly uploaded once you click upload. But the missing label texts for the custom fields are very inconvenient for the user.

Hope you have a quick fix for this. Thanks.


 

[Vessy]

Hello,

I tried to reproduce behavior but the sample is working as expected on my side - video. I have done my test with the latest version of RadControls, both in IE and FireFox.

Additionally, I would like to kindly remind you that the solutions provided by our support services are provided only to show how to achieve a specific functionality with the components and it is a developer's task to integrate them into a real web application. They are not fully working solutions and the developer should feel free to modify them in order to fit his scenario best.

Kind regards,
Veselina Raykova
Telerik

[G]

Hi,

Thank you.
Your video shows exactly the same problem as I have over here.
Please check your video again: Your labels for input "Title" and "Description" disappear after you have selected a file to upload.

I understand that it is my task to integrate your samples into a working application. But this is a bug in the upload component of your control. Or are the disappearing labels "by design" ?

Thanks

[G]

Any clue on how to fix the disappearing labels in the upload component? This is a showstopper in my project. Thank you, much appreciated.

[Vessy]

Hi,

Please, excuse me for the lapse - it seems that I did not understand the issue properly.

Regarding the labels themselves - yes, by design the AsyncUpload cleans all inserted labels. If you want to have permanent text before the custom inputs you can use other element type, e.g. span:

function CreateLabel(text, associatedControlId) {
    var label = document.createElement("span");
    label.innerHTML = text;
    //label.setAttribute("for", associatedControlId);
    label.style.fontSize = 12;

    return label;
}

Regards,
Veselina Raykova
Telerik

[G]

Thank you, that fixed it.