search

psolom / RichFilemanager

An open-source file manager. Up-to-date for PHP, Java, ASHX, ASP, NodeJs & Python 3 Flask. Contributions are welcome!
http://fm.devale.pro
906 stars 252 forks source link

how to upload images with ckeditor Enhanced Image plugin and RFM? #297

Closed Guanche closed 6 years ago

Guanche commented 6 years ago

In raising this issue, I confirm the following (please check boxes):

I use the following server-side connector (check one):

My familiarity with the project is as follows (check one):

Hi.

I'm trying to integrate RFM with CKEditor4 for uploading images with the Enhanced Image plugin (https://ckeditor.com/cke4/addon/image2)

Is there any reference about how to integrate any of these plugins with RFM?

The setup I've made is:

CKEDITOR.replace( 'editor',{ filebrowserBrowseUrl: '/rfm', filebrowserImageBrowseUrl: '/rfm', filebrowserUploadUrl: '/rfm/connectors/php/filemanager.php?mode=upload&path=/', filebrowserImageUploadUrl: '/rfm/connectors/php/filemanager.php?mode=upload&path=/' });

But when the plugin sends the file I obtain this response (error) from filemanager.php:

{"errors":[{"id":"server","code":"500","title":"ERROR_UPLOADING_FILE","meta":{"arguments":[]}}]}

Thanks.

psolom commented 6 years ago

Generally you did correct, but this fails because CKEditor sends file within $_FILES['upload'] parameter and RFM expects for $_FILES['files']. I can't see that CKEditor provides configuration parameter or another way to change a name of the upload parameter. This would be the easiest way to fix. Let me know if you find it.

Another option I can see is to provide a new server-side configuration option to modify expected parameter at the filemanager side. I can consider to implement this if you won't be able to find how to solve the issue with CKEditor.

NOTE: image you fix it. On success upload the response will look as the following:

image

Are you ok with this?

As alternative, remember that you can upload files directly in the filemanager dialog window with "upload" button.

Guanche commented 6 years ago

Thanks for answering. I've just joined github yesterday for asking about this.

I realized that the problem was that, the name of the files field, but I'm new with RFM too and I didn't say anything because may be there was another thing... (i have not a great english, excuse me).

But I asked also about this at the Enhanced Image plugin page (https://ckeditor.com/cke4/addon/image2). Because I think I changed the field name at the plugin script and I don't see it different. Let's see if they tell something.

I've been for days learning about this great plugin (RFM), that's so much time for me. I thought that may be I'll go on without this function, just allowing to select a file using the browser, which works fine, yes, and try to change the server script later (I'll see...). I was thinking about the same option as you, to set the script for expecting any of the two parameters. If I do something I'll upload it here.

Thanks again.

psolom commented 6 years ago

I have tested it with the plugin you mentioned and it works well. If you want to try it yourself set the param_name option to "upload" in the UploaderHandler.php file.

If you will get satisfied of the result we can talk about implementation it as a configuration option (as described before).

Guanche commented 6 years ago

I obtain the same error:

{"errors":[{"id":"server","code":"500","title":"ERROR_UPLOADING_FILE","meta":{"arguments":[]}}]}

I changed this line at UploaderHandler.php

$this->options['param_name'] = 'upload';

psolom commented 6 years ago

Oh, I missed that, you have to change one more line in LocalApi.php file. Replace:

$files = isset($content['files']) ? $content['files'] : null;

with this:

$files = isset($content['upload']) ? $content['upload'] : null;

Now it should work.

Since there are just few places to be replaced with configuration option I'm going to implement this to the next release.

Guanche commented 6 years ago

It works fine. Thanks. The response is shown at the dialog window. May be some another response would be more user friendly, but it works.

psolom commented 6 years ago

I can't change the response, because it's used for a regular upload inside RFM.

I got another your message at the email, but seems it's missed here:

oh, wait. Now when I use the browser for uploading files, when I click on upload button an error message says "Some files didn't upload correctly". Thumbnails remain at the browser selector with a X over each one. This with every photo. Passing the mouse over the image a red note appears with no text. Response for each upload is "{"errors":[{"id":"server","code":"500","title":"ERROR_UPLOADING_FILE","meta":{"arguments":[]}}]}" The file selector window remains on top that way and files are not uploaded.

Is it due to these changes?

The answer is YES. It was just an example and you shouldn't use it in production. I have already implemented a reliable and flexible solution via config option. I will let you know when it will be released.

Guanche commented 6 years ago

Sorry, I typed that and then I thought I should have checked it better. I deleted the post and reinstalled the plugin, because I was moving it from an app to another and may be... I did the changes again into the new installation and now it works fine, with no errors.

psolom commented 6 years ago

Released in v2.7.3 Checkout new configuration option paramName in config.local.php file (PHP-connector)