RDN-1234
1

Upload Documents to a Forum Thread

Scott on 10/7/2015 8:58 PM

Scott on 2/15/2016 5:35 PM

%
(hrs)
Logged

0 (hrs)


 Description

We need to be able to upload documents to the forum threads.

We have yet to be able to upload files to the forums, so this is new work.  It is related to: http://support.codingforcharity.org/Issues/IssueDetail.aspx?id=1189.

You should complete 1189 before this one.

Please review this example, as it shows the example to upload a image again: http://www.tinymce.com/tryit/basic.php

Locations we need to make sure the file can be uploaded:

  1. League > Forum > Add New Post
  2. League > Forum > Click on a thread > Reply to Post
  3. League > Forum > Click on a thread > Quote a Post
  4. League > Forum > Click on a thread > Edit a Post

As you can see from the QuotePost.cshtml page, the javascript logic to complete this is already implemented.  Look for UploadFileUrl.  It points to the ForumController > PostImageUpload.

  1. You will need to create a new method to upload the file on ForumController.
  2. You should be able to copy most the code from PostImageUpload or even use the same method.  Its up to you.
  3. When the file is uploaded, it should be displayed nicely on the forum thread.  

Please make sure inserting an file works within those 4 locations of the tinymce editor.  No other place should be allowed to upload a file on the tiny mce editor.

 

Need to be able to upload documents to a forum thread.

Skip Navigation Links
 

Scott Monday, February 01, 2016 10:22 PM #

ahh, didn't realize it was there.  Got it.

thats perfect.

thanks!

 

Icatalin Monday, February 01, 2016 10:09 PM #

Hi, I have some questions

For 1.  There is a button within the link button to upload documents. You want another one? ( Please see attachmets , I am asking just to be sure)

For 2. There is already a "filter" for this in PostImageUpload in RDN.League.Controllers.ForumController 

if (imageExtensions.Any(s => fi.Extension.ToLower().Equals(s)))  { ... return image string } else { ... doc string ...}

in fact the only difference between an image and a document is the string that is returned from PostImageUpload 

Isn't this what you want at point 2. or I have understood it wrong?

 

Scott Monday, February 01, 2016 9:44 PM #

  1. I need to add a new menu item to Insert.  That item should already have the Insert Image, but you need to add another menu item.
    1. Insert Document
  2. Upon uploading, it seems to think that the document is an image in the forum editor.  Is there any chance we can just make this the download link it its anything but a image?

Thanks!

 

 

Scott Thursday, January 21, 2016 4:04 PM #

Please resolve conflicts so I can merge.

 

Scott Wednesday, January 20, 2016 9:41 PM #

Please review the comments.

 

https://bitbucket.org/rdnation/rdnation/pull-requests/42/rdn-1234-upload-documents-to-a-forum/diff

 

Icatalin Thursday, January 14, 2016 10:50 PM #

Sorry my fault, I have undertood this "3. When the file is uploaded, it should be displayed nicely on the forum thread." wrong. Now it is working any file .txt .doc etc... is uploaded as a link from where it can be downloaded.

For now it inserts a link with something like <a href="/document/view/8c5831baea2746dfb01e81a508d180b4.html">Removed Apps.html</a> . If you want to add a title or something else changed let me know.

 

Scott Thursday, January 14, 2016 4:43 PM #

Why are you converting this to a string?

You don't need to display the text inside the forum.  Just display a link to the document.  So they can download it if they want.

 

Icatalin Wednesday, January 13, 2016 11:01 PM #

Hi, Done this for .txt so far ( I know is not really much). In fact this uses the same method as for image insert the only difference is that this will return a html  string and not a link (based on extension file).

You can check it https://bitbucket.org/rdnation/rdnation/branch/RDN-1234

All files ca be uploaded as far as they can be writen in html, for now I have done .txt (which is trivial).

Now I was thinking to continue with .doc and .docx and of course all MS Office files, the problem is that I need a way to convert a .doc to a html string ( while keeping the format , color , bold etc,...) for this I have found this lib https://github.com/OfficeDev/Open-Xml-PowerTools which is based on Open XML SDK. Can I use it? Or Interlop lib from MS Office (this [Interlop] I have useded before but I don't think is ok for server side it is more for desktop). 

 

Scott Saturday, January 09, 2016 5:30 PM #

Nope.  Any type of file should and can be uploaded.  It doesn't matter.

 

Icatalin Saturday, January 09, 2016 5:29 PM #

Hi, do you have a preference for that type of file should start with ( what extensions file .txt . docx  ....) ?

 

Scott Saturday, December 05, 2015 3:02 AM #

Icatalin,

Can you try to look at this one?

 

Scott Thursday, November 26, 2015 11:24 PM #

Keep working at it.  

Have you looked at this?

https://www.tinymce.com/docs/demo/custom-toolbar-button/

 

Dharmesh Monday, November 23, 2015 5:59 PM #

I aleary did similar things. Still I am not able t get file upload button on editor. I have added code below for your review.

 

this.SetupPost = function (uploadType, forumId, forumType, topicId, groupId) {
          
        tinymce.create('tinymce.plugins.imageUpload', {
            createControl: function (n, cm) {
              
                switch (n) {
                case 'imageupload':
                    var c = cm.createButton('mysplitbutton', {
                        title: 'Upload Image',
                        image: '/content/images/icons/imageUpload.png',
                        onclick: function() {
                            $dialog.dialog('open');
                        }
                    });
                    return c;
                }
                return null;
            }
        });
        tinymce.PluginManager.add('imageIupload', tinymce.plugins.imageUpload);
        tinymce.init({
            mode: "textareas",
            elements: "wmd-input",
            theme: "modern",
            content_css: '/content/tinymce/tinymce.content.css',
            plugins: "imageIupload, mention,layer,table,preview,media,contextmenu,directionality,fullscreen,noneditable,visualchars,nonbreaking,template,link",
            theme_advanced_buttons1: "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,bullist,numlist,|,outdent,indent,blockquote,|,formatselect,fontsizeselect",
            theme_advanced_buttons2: "link,unlink,anchor,image,imageupload,cleanup,code,|,preview,|,forecolor,backcolor,|tablecontrols,|,hr,removeformat,visualaid,|,iespell,media,|,ltr,rtl",
            theme_advanced_buttons3: "",
            theme_advanced_buttons4: "",
            theme_advanced_toolbar_location: "top",
            theme_advanced_toolbar_align: "left",
            theme_advanced_statusbar_location: "bottom",
            theme_advanced_resizing: true,
            language: "en",
            relative_urls: false,
            uploadType: uploadType,
            ForumId: forumId,
            ForumType: forumType,
            TopicId: topicId,
            GroupId: groupId,
            UploadFileUrl: "/forum/postimageupload",
            mentions: {
                source: function(query, process, delimiter) {
                    if (delimiter === '@') {
                        $.getJSON('/Utilities/SearchNamesForLeague?q=' + query + "&groupId=" + groupId, function(data) {
                            process(data)
                        });
                    }
                },
                render: function(item) {
                    var markup = '<li><a href="#">';
                    if (item.picture != '')
                        markup += '<img src="' + item.picture + '" class="w20 round-corners"/> ';
                    else
                        markup += '<i class="fa fa-user fa-lg text-muted"></i> ';
                    if (item.name && item.realname)
                        markup += item.name + " [" + item.realname + "]";
                    else if (item.name)
                        markup += item.name;
                    else if (item.realname)
                        markup += item.realname;
                    markup += '</a></li>';
                    return markup;
                },
                highlighter: function(text) {
                    //make matched block italic
                    return text.replace(new RegExp('(' + this.query + ')', 'ig'), function($1, match) {
                        return '<b>' + match + '</b>';
                    });
                },
                insert: function(item) {
                    var html = '';
                    if (item.name && item.realname)
                        html = '<span class="mentioned_name" id="' + item.id + '">' + item.name + ' [' + item.realname + ']</span>';
                    else if (item.name)
                        html = '<span class="mentioned_name" id="' + item.id + '">' + item.name + '</span>';
                    else if (item.realname)
                        html = '<span class="mentioned_name" id="' + item.id + '">' + item.realname + '</span>';
                    return html;
                }
            }
        });
        var $dialog = $('#insertForumImageDialog').dialog({
            autoOpen: true,
            closeOnEscape: false,
            modal: false,
            open: function(event, ui) {
                $(this).parent().css('position', 'fixed');
                $(".ui-dialog-titlebar-close").hide();
            }
        });
        var $loader = $('span.loading-small', $dialog);
        var $url = $('input[type=text]', $dialog);
        var $file = $('input[type=file]', $dialog);
        var dialogInsertClick = function() {
            dialogClose();
        };
        var dialogCancelClick = function() {
            dialogClose();
        };
        var dialogClose = function() {
            $url.val('');
            $file.val('');
            $dialog.dialog('close');
        };
        $dialog.dialog('option', 'buttons', {
            'Insert': dialogInsertClick,
            'Cancel': dialogCancelClick
        });
        var uploadStart = function() {
            $loader.show();
        };
        var uploadComplete = function(response) {
            $loader.hide();
            if (response.success) {
                tinyMCE.execCommand("mceInsertContent", false, "<img src='" + response.imagePath + "'/>");
                dialogClose();
            } else {
                alert(response.message);
                $file.val('');
            }
        };
        $file.unbind('change').ajaxfileupload({
            action: $file.attr('data-action'),
            onStart: uploadStart,
            onComplete: uploadComplete,
            'params': {
                'Id': forumId,
                'TopicId': topicId
            },
        });
        $dialog.dialog('close');
    };
 @Html.TextArea("Message", string.Empty, new
                        {
                            id = "wmd-input",
                            style = "width:100%"
                        })
                        <div id="insertForumImageDialog" title="Insert Image">
                            <input type="file" name="file" id="file" data-action="/forum/postimageupload" />
                        </div>
 

Scott Monday, November 23, 2015 3:51 AM #

You need to add that button on the Plugins part of the editor.

Look for the following keywords on the blog post:

imageupload
imageIupload

Searching for these two keywords, you can see that it adds the plugin to the editor and places it in 

theme_advanced_buttons2

That should get the button added to the editor.

 

Dharmesh Sunday, November 22, 2015 5:58 PM #

I tried to add file upload plugin using a link given by you http://www.spoiledtechie.com/post/2013/11/23/TinyMCE-writer-Image-Upload-for-C-MVC.aspx.

But It's not working at my end. Might be issue is on my side.  I am not able to see upload button in file tinymce textarea.

I have added javascript code of your example in forumviewmodel.js file in SetupPost function.

Do I need to add any other plugin or javascript file for this?

Please guide me to use this upload plugin. 

 

 

 

 


Powered by BugNET 1.6.339.0