json.net object from directory

Question

Tinymce is a fairly common WYSIWYG editor that allows users to purchase an image/file management system or build your own. I want to upgrade my Content Management system from tinymce 2x to 4x. In 4x the images need to be presented to the tinymce call as a json object in the image_list declaration: http://www.tinymce.com/wiki.php/Configuration:image_list

Based on this format, the goal is to have .Net read the image folder and present the title and value as the filename and 'images/filename' of each file. I've worked at it the past few days and I've made some headway but not to the point of a functional sample. This seems like it would be something that others using .Net and Tinymce would want to use if they roll their own image management system (which I have to do in this case).

This example (see link) seems to get close but my test (see code below) returns null values for the title and value. When I tried to include the other two variables in the example I get error messages that the variables are inaccessible or not available. Converting List of Files into JSON array in C#

Here is the C# script I'm trying to use in creating the JSON variable of image references:

<%@ Import Namespace="Newtonsoft.Json" %>
<script runat="server">

    public class FileInformation
    {
        [JsonProperty(PropertyName = "title")]
        public string actualFileName {get;set;}
        public string value {get;set;}
    }

    public string image_list()
    {

        string[] arr = new string[3]; // Initialize
        arr[0] = ".jpg";               // Element 1
        arr[1] = ".png";               // Element 2
        arr[2] = ".gif";             // Element 3

            var imgPath = Server.MapPath("~/images/");

            var list = new List<FileInformation>();

            //string[] fileNames = Directory.GetFiles(imgPath, "*", SearchOption.TopDirectoryOnly);
            string[] fileNames = Directory.GetFiles(imgPath);

            foreach (string filename in fileNames)
            {
              FileInfo fileInfo = new FileInfo(filename);

              string actualFileName = fileInfo.Name;
              string value = fileInfo.Name;

              list.Add(new FileInformation(){});
            }

            var yourJSONString = JsonConvert.SerializeObject(list);
            return yourJSONString;

    }
...

</script>

Here is the Javascript call in the page:

 <script type="text/javascript">
    tinymce.init({
            image_list:  '<%= image_list()%>', 
            image_class_list: [
                {title: 'None', value: ''},
                {title: 'Float Right', value: 'img_fright'}
            ]
    });

Abbreviated Source code from the pate where image_list is rendered:

image_list:  '[{"title":null,"value":null},{"title":null,"value":null},{"title":null,"value":null}]',

Any thoughts of where this may be going wrong?

Have you thought about putting the C# in a server side code behind / controller action (depending on which framework you're using)? And then, debug to see if the directory.GetFiles actually has values coming back. — George Stocker
– George Stocker, Commented Feb 16, 2015 at 14:27

H2O · Accepted Answer · 2015-02-16 18:23:16Z

Sorry... not quite sure how to edit an answer. This one is a bit more clear an usable with commenting. This one actually filters out specific extensions that you probably want to do and can be used for the documents or media list as well (with some modification). Good luck. I've learned so much here it is good to give back when you can.

public class FileInformation
{
    public string title {get;set;}
    public string value {get;set;}
}

public string image_list()
{

    //Set up the list of acceptible extensions
    string[] arr = new string[3]; // Initialize
    arr[0] = ".jpg";               // Element 1
    arr[1] = ".png";               // Element 2
    arr[2] = ".gif";             // Element 3

    //Declare the variable
    var filePath = "";

    //Set the path 
    filePath = Server.MapPath("~/images/");


   //Start the string for the list
   var list = new List<FileInformation>();

   //Get the filesnames from the path
   string[] fileNames = Directory.GetFiles(filePath, "*", SearchOption.TopDirectoryOnly);

   //Loop through each of the file names
   foreach (string filename in fileNames)
   {
        //Get the information on the filename
        FileInfo fileInfo = new FileInfo(filename);

        //Loop through each of extension provided
        foreach (var ext in arr) {
            //If the extenion on the filename matches one of the list then...
            if (fileInfo.Extension == ext) {
                //Add the filename and location to the list in the title: filename, value: "images/filename" format
                list.Add(new FileInformation(){ title = fileInfo.Name, value = "images/" + fileInfo.Name });
            }
        }
    }

    //Convert the list to a JSON string using JSON.net (use the correct framework format)
    var yourJSONString = JsonConvert.SerializeObject(list);
    //Return the JSON string for use in the javascript call.
    return yourJSONString;
}

... And your javascript in the file:

<script src="//tinymce.cachefly.net/4.1/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
    selector: "textarea",
    theme: "modern",
        encoding: 'xml',
        convert_urls: false,
    removed_menuitems: 'newdocument',
    plugins: [
        "advlist autolink lists link image charmap print preview hr anchor pagebreak",
        "searchreplace wordcount visualblocks visualchars code fullscreen",
        "insertdatetime media nonbreaking save table contextmenu directionality",
        "template paste textpattern"
    ],
    toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright | bullist numlist outdent indent | link image | print preview media",
        content_css:  "",
        style_formats: [{ title: 'Bold', inline: 'span', classes: 'Bold' },
            { title: 'Italic', inline: 'span', classes: 'Italic' },
            { title: 'Superscript', inline: 'span', classes: 'Superscript' },
            { title: 'Subscript', inline: 'span', classes: 'Subscript' }],
        document_base_url: '',

        image_list:  <%= image_list()%>, 
        image_class_list: [
            {title: 'None', value: ''},
            {title: 'Float Right', value: 'img_fright'}
        ],
        cleanup: false,

    image_advtab: true,
    templates: [
        {title: 'Test template 1', content: '<div row><div class="col-md-6">Content</div><div class="col-md-6">Content</div></div>'},
        {title: 'Test template 2', content: 'Test 2'}
    ]
});

I plan to post the code if I write the json to file, as I want to dynamically be able to load and make the templates available to our users. If you have any example feel free to post here. Otherwise Good Luck!

Collectives™ on Stack Overflow

json.net object from directory

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related