Custom Pages HTML editor image update failure


https://forum.kartris.com/Topic2574.aspx
Print Topic | Close Window

By tasosdr - Thu 14 Nov 2013
Dear all,

I am trying to upload an image from using the HTML editor insode a custom page I have created. The image is only 3 Kb but in numerous tries the upload proccess always fails.
In more details either using button "Select File" or I just drag a file to the drop zone, after pressing the upload button the upload proceess starts, goes to 100% (changes from -pending to uploading - ) but then nothing happens. Stays there infinitelly. No confirm message, no post back/ refresh nothing. The image never uploads.
Do I have missed something or is it just a bug?
I am developing a project for a client of mine and it is absolutely necessary to have the ability to upload images through the CMS (HTML editor).

Thanks for your consideration.

Tasos
By Paul - Mon 18 Nov 2013
Is this on a version 2.x Kartris? There is a known issue with the image upload in that. We're using the ajax toolkit HTML editor now, it seems that doesn't play well with update panels.

There is an alternative (though not as user friendly) which is to use the 'General Files' feature to upload images, and then link to these within the HTML editor.
By tasosdr - Thu 21 Nov 2013
Yes this is the 2.5004 version of Kartris.The problem is that is not only for me that I need the HTML editor option.
I need a user friendly way of uploading images into Custom Pages to expose it to my client in order to let him be able to upload and change the pages pics easily.

Any luck in this problem?
By mountier - Mon 20 Jan 2014
Has there been any update on this problem/issue at all? I also have a client using version 2.5 and has just alerted me to this problem.

I have managed to upload a file using the general files option but how would my client then use this file within a page? There is no facility to link to the file that I can see
By Paul - Tue 21 Jan 2014
This is an open issue - it's an issue with the html control in the ajaxtoolkit, and seems to be rather a technical issue to fix.

In Firefox, it is actually possible to drag and drop images into the HTML area, and it will base 64 encode them to the page, which is nice for small images though probably not so efficient for bigger ones. But neither IE or Chrome do this properly (though they will display them ok, including in the editor, if previously uploaded with Firefox).

Our client side scripting isn't really hot enough to build something to select an image, and embed the URL into the text area where the cursor is. So at present, we're just waiting on a fix in the ajaxtoolkit unfortunately.
By mountier - Tue 21 Jan 2014
Thanks for the update. Unfortunately though the dragging and dropping in FireFox doesn't work either. I've been trying this with a file that is less than 40kb and nothing happens.

Do you think it is likely that a fix will be available at any point?
By kentdivingdev - Fri 14 Mar 2014
Hi,

I've also come across the ajaxtoolkit issue and have a work around that gets it working, at least on the pages I have encountered. Since I've seen this a few times on the forum I thought I'd post.


Note, I use Chrome and have to drag and drop images in. I haven't looked at why the select button doesn't work yet.


The fix is based on these two articles I found:


http://ajaxcontroltoolkit.codeplex.com/workitem/27307
http://stephenwalther.com/archive/2012/05/01/ajax-control-toolkit-may-2012-release




General & Product Pages


The articles suggest that the issue is the htmleditor being in a hidden panel on page load. Since the actual editor is hidden by CSS in _HTMLEditor.ascx we are able to set the Visible = True property on the _LanguageContent.ascx page.


It is at the bottom:


<_user:HTMLEditor ID="_UC_Editor" runat="server" Visible="true" />



Next, the event handler didn't work for me in _HTMLEditor.ascx.vb so I made modifications to the function ajaxFileUpload_OnUploadComplete:




Protected Sub ajaxFileUpload_OnUploadComplete(sender As Object, e As AjaxControlToolkit.AjaxFileUploadEventArgs) Dim strFullPath As String = strFilesFolder & e.FileName htmlEditorExtender1.AjaxFileUpload.SaveAs(Server.MapPath(strFullPath)) e.PostedUrl = KartSettingsManager.GetKartConfig("general.webshopurl") + strFullPath.Replace("~/", "") End Sub






The above two changes should get it working in general.


Custom Pages


Fixing the custom page editor took a few more steps.


The extra problem here is that the editor is inside another hidden panel. I.e. even though visible is now true in _LanguageContent.ascx the panel containing this is still hidden. The article suggests a "ghost" editor which sits inside a hidden div on the page outside of any hidden panels.


Therefore, at the top of _CustomPages.ascx just under the Register tag I added this:



<div style="display:none"> <_user:LanguageContainer ID="ghost_UC_LangContainer" runat="server" /> </div>




Then you need to hook up the code behind Page_Load function. The extra challenge is to remove the required validation on the ghost editor. For this I changed the LANG_ELEM_TABLE_TYPE to PromotionStrings; just because it contains a htmleditor but doesn't require validation.


The final code change looks like this (it is at the bottom of Page_Load in _CustomPages.ascx.vb)



If GetPageID() = 0 Thenghost_UC_LangContainer.CreateLanguageStrings(LANG_ELEM_TABLE_TYPE.PromotionStrings, True)_UC_LangContainer.CreateLanguageStrings(LANG_ELEM_TABLE_TYPE.Pages, True)Else ghost_UC_LangContainer.CreateLanguageStrings(LANG_ELEM_TABLE_TYPE.PromotionStrings, False, GetPageID())_UC_LangContainer.CreateLanguageStrings(LANG_ELEM_TABLE_TYPE.Pages, False, GetPageID()) End If




That should be all for the custom pages.




I hope that is helpful, if it is not clear (I hope the code displays ok) let me know and I will try to explain it better. It feels like a bit of a hack, and there maybe a better solution, if you know it let me know.


Thanks
Craig

By Paul - Sat 15 Mar 2014
That looks really interesting, going to check this out with the latest source code and will report back!
By Paul - Tue 18 Mar 2014
Great job, I've tested this and it seems to work. I get the same issue with the select file button not working, but dragging images in works fine in Firefox too.

In IE11 though, the select button seems to work, and drag and drop doesn't. But the upload just seems to stick on uploading, but does not complete.

Still, aside from IE, it works so it's certainly still a result. If you pm me your URL and details we'll happily credit you for the fix in the change log.