Image Manager Not Displaying Images if filename has certain characters

[Angela]

Hello,

We have added the ImageManager in our Rad Editor. It's working fine, except when we try to upload images with certain 'invalid' characters (ex. '#'). Is there any work around for this? The image is not displayed when we try to insert it in the rad editor.


Thanks

[Rumen]

Hi Angela,

This is a browser behavior. Even more if you try to rename an image in Visual Studio and set the # symbol in the image name then the VS will pop up the following warning dialog:

---------------------------
Microsoft Visual Studio
---------------------------
Item and file names cannot:

- contain any of the following characters: / ? : & \ * " < > | # %

- contain Unicode control characters

- contain surrogate characters

- be system reserved names, including 'CON', 'AUX', 'PRN', 'COM1' or 'LPT2'

- be '.' or '..'


Please enter a valid name.
---------------------------
OK   
---------------------------

You should avoid putting such characters in the file names.

Sincerely yours,
Rumen
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.

[Martin]

Now I have same problem with the "+" sign. Is still a problem?

[Rumen]

Hi Martin,

I was able to upload an image with + in the name in the Default Example and the Image manager was able to display it.

If you want you can implement a FileSysteContentProvider and
you will be able to get a reference to the uploaded image file, check it name and rename it if needed using the StoreFile method. Here is an example demonstrating how to create a thumbnail, which you can modify to fit your scenario:

Copy Code

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using Telerik.Web.UI;
using System.Drawing;
using System.IO;


public partial class static_test_editor : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        RadEditor1.ImageManager.ViewPaths = new string[]{"~/"};
        RadEditor1.ImageManager.UploadPaths = new string[] { "~/" };
        RadEditor1.ImageManager.DeletePaths = new string[] { "~/" };
        RadEditor1.ImageManager.ContentProviderTypeName = typeof(myprovider).AssemblyQualifiedName;
    }

    public class myprovider : Telerik.Web.UI.Widgets.FileSystemContentProvider
    {

        public myprovider(HttpContext context, string[] searchPatterns, string[] viewPaths, string[] uploadPaths, string[] deletePaths, string selectedUrl, string selectedItemTag)
            : base(context, searchPatterns, viewPaths, uploadPaths, deletePaths, selectedUrl, selectedItemTag)
        {
        }

        public bool ThumbnailCallback()
        {
            return false;
        }

        public override string StoreFile(UploadedFile file, string path, string name, params string[] arguments)
        {

            string result = base.StoreFile(file, path, name, arguments);

            System.Drawing.Image.GetThumbnailImageAbort myCallback =
                new System.Drawing.Image.GetThumbnailImageAbort(ThumbnailCallback);

            string fileName = Path.Combine(path, name);
            //Create a copy of the image with a different size
            using (System.Drawing.Image originalImage = Bitmap.FromStream(file.InputStream))
            {
                using (System.Drawing.Image thumbnail = originalImage.GetThumbnailImage(300, 300, myCallback, IntPtr.Zero))
                {
                    thumbnail.Save(Context.Server.MapPath(fileName));
                }
            }

            return result;
        }
    }
}

You can also see the following KB article on the subject: Custom FileBrowserContent Provider.

Note that the code above uses FileSystemContentProvider as a base class and not FileBrowserContentProvider. These are two different classes: FileBrowserContentProvider is the base class for all content providers and is the one with the abstract members; FileSystemContentProvider is the default content provider used by the editor - it works with the file system and has implementations for all necessary methods. This is why when you subclass the FileSystemContentProvider class, you do not need to re-define all content provider methods - just the ones you want to change. In the example above we override the StoreFile method, which is called when you upload a new file (image).




Sincerely yours,
Rumen
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.