CKEditor+elFinder in UniGUI, possible?

[elGringo]

Hello everyone here! I'm going to create web application that should keep records in database as (X)HTML format with pictures. In each record will be HTML text + <img src="some link to the image on the server">

 

The question is how to organize it, using UNIGUI that seems to be best framework for the Web on the Delphi Language.

 

In demos I've seen HTMLEditor (http://prime.fmsoft.net/demo/htmled.dll) but it doesn't have function of uploading files (pictures).

 

I tried to take a look at CKEditor+elFinder - so it's good variant to integrate it in some HTML page - but how to integrate it in UNIGUI and use after? Besides CKEditor script need Apache as i understood, so UniGui should be started under Apache for Windows?

 

So many difficulties for the moment. Does anyone know simple decision for the task (uploading files to the server and getting link to paste it like <img...>)?

 

 

Best Regards, Stanislav

[Sherzod]

Hi,

 

Later, I will try to create an exemplary test case with the HTML Editor:

 

Best regards.

[elGringo]

Delphi Developer! Thank you very much for the screen!!! So I see it's possible from UniGui.

I'm going to repeat it - could you give me simple example of code of how did you do that?

I mean that button - ImageUpload?

 

Best Regards!

[Sherzod]

Hi,

 

Perhaps this decision is not completely consistent your requirements, but try...

 

1. Add the following components: UniHTMLMemo1, UniFileUpload1

 

2. UniHTMLMemo1 -> ClientEvents -> UniEvents -> add function beforeInit:

function beforeInit(sender, config)
{
  config.listeners = {
    render: function(editor) {
              editor.getToolbar().add({
                 xtype: 'button',
                 text: 'imageUpload',
                 handler: function() {
                   ajaxRequest(sender, 'uploadImage', [])   
                 }
              });
             }
    }
}

3. UniHTMLMemo1 -> OnAjaxEvent:

procedure TMainForm.UniHTMLMemo1AjaxEvent(Sender: TComponent; EventName: string;
  Params: TStrings);
begin
  if EventName = 'uploadImage' then begin
    UniFileUpload1.Execute
  end;
end;

4. UniFileUpload1 -> OnCompleted:

procedure TMainForm.UniFileUpload1Completed(Sender: TObject;
  AStream: TFileStream);
var
  DestName : string;
  DestFolder : string;
begin
  DestFolder:=UniServerModule.StartPath+'UploadFolder\';
  DestName:=DestFolder+ExtractFileName(UniFileUpload1.FileName);
  CopyFile(PChar(AStream.FileName), PChar(DestName), False);
  UniSession.AddJS(UniHTMLMemo1.JSName + '.execCmd(''InsertHTML'', ''<img width="138" height="87" src="'+ 'UploadFolder/' + UniFileUpload1.FileName +'"></img>'')');
end;

5. MainForm -> OnCreate:

procedure TMainForm.UniFormCreate(Sender: TObject);
begin
  ForceDirectories(UniServerModule.StartPath+'UploadFolder');
end;

6.

uses ... ServerModule ...

Try,

Best regards.

[elGringo]

Delphi Developer! Excellent! I will try your code and will post if succeded or not here. Thank your for the code anyway!!!

[elGringo]

Delphi Developer, is function beforeInit in your example is written in javascript or some C-kind language? If so where should it be in UniGui Project?

Also to avoid lot's of questions - could you be so kind and attach your example project here?

 

Regards, Stanislav

[Sherzod]

where should it be in UniGui Project?

 

[elGringo]

Ok. That's clear now!

[elGringo]

As promised writing here result - test almost successful! Why almost - it uploads pics only from the second try.

So if i upload pic 1 time happens nothing, if second time and the same - it works - if different pic - happens nothing.

What could it be? 

 

 

[Sherzod]

Browser: Chrome ?!

[Sherzod]

I tested in FF

[elGringo]

Yes, Chrome, in FF really works fine (tested too).

[Sherzod]

I will try analyze "tomorrow", OK ?!

[elGringo]

Of, course, as convenient to you! You really helped me with the topic. See you later!

[Sherzod]

You are welcome!

[Sherzod]

Hi,

 

... "fixed" in Chrome ...

 

UniHTMLMemo1 -> ClientEvents -> ExtEvents -> add function initialize:

function initialize(sender, eOpts)
{
  sender.focus();
}

Try,

Best regards.

[elGringo]

Tested in Chrome. Works Fine! 

So if i understand correct to work with UniGui javascript knowledge is also needed?

[elGringo]

Delphi Developer, according to your experience, continuing the theme - is it possible to create something like elFinder in UniGui using only Delphi code (see picture attached)?

 

I mean - tool that will show which folders on the server we have, choose one of them, and after choosing create link to uploaded file (picture)  right to the folder chosen on server).

 

So if shortly i want to upgrade your example with the possibility of choosing diectory on the server, but i'm not sure if it's possible in UniGui by using only Delphi code or not.

 

Best Regards, 

[Sherzod]

Hi,

 

Need to analyze, of course it can be done with UniGUI, but it will take "some time"...

 

Best regards.

[elGringo]

Ok! I understand and realize that's complicated and big task. But i asked because for the moment i feel myself better in Delphi code rather than in javascript and wanted to evaluate difficulty of task for myself - for example - if there is a lot of javacript - it will be difficult for me and conversely.

 

Anyway, thank you for the answer. Also i'm going to create such theam ( thread ) in "Feature requests" on that forum

[Oliver Morsch]

Where is the problem making a file/folder dialog with uniGUI?

- make a new uniform

- You get the folders and files on server with FindFirst()/FindNext() or TDirectory.FindDirectories/TDirectory.FindFiles.

- Put this result in a UniTree and UniListBox or UnistringGrid on the form (with some code for changing and select folder)

- Open this form in "TMainForm.UniFileUpload1Completed" (with callback function)

 

No javscript needed...

[elGringo]

Thank you Oliver, just have done it. 

I just wasn't sure if i will need or not javascript - that's why i asked more experienced member in UniGui 

[elGringo]

Hello Delphi Developer and everyone! 

 

After time i tried to repeat an example and found that in Chrome and Opera picture uploading doesn't work. So it happens nothing when i choose file and press upload. In FF code works excellent! 

 

Also i found that in Chrome and Opera path looks like C:\fakepath\1.jpg and in FF it is just 1.jpg  Does it have any influence?

 

function initialize(sender, eOpts) is added (see attached picture);

 

Project attached.

 

 

178_UniPictureUpload.rar

[Sherzod]

After time i tried to repeat an example and found that in Chrome and Opera picture uploading doesn't work. So it happens nothing when i choose file and press upload. In FF code works excellent! 

 

Also i found that in Chrome and Opera path looks like C:\fakepath\1.jpg and in FF it is just 1.jpg  Does it have any influence?

 

Hi,

 

Try:

 

MainForm.Script add:

Ext.form.field.File.override(
     {onFileChange: function() {
       this.lastValue = null; // force change event to get fired even if the user selects a file with the same name
       Ext.form.field.File.superclass.setValue.call(this, this.fileInputEl.dom.value.replace(/C:\\fakepath\\/g, ''));
       }
     }
)

Best regards.

[elGringo]

DD Thank you! Found something else.

The reason why code didn't work sometimes was focus of UniHTMLMemo!!!

 

When i clicked to UniHTMLMemo before clicking ImageUpload so that caret appear everything works in Chrome, Opera, FireFox!!!

 

So i tried to change code like this

 

procedure TMainForm.UniHTMLMemo1AjaxEvent(Sender: TComponent; EventName: string;
  Params: TStrings);
begin
  if EventName = 'uploadImage' then
  begin
    UniHtmlMemo1.SetFocus; // doesn't work with that
    UniFileUpload1.Execute;
  end;
end;

but setfocus doesn't set focus and also webfocus, so how to set focus on UniHTML Memo so that caret would appear?