[New Feature] tinyMCE drag and drop images

[dgrammatiko]

As the title suggests: enable drag and drop

This is once again another of those @nikosdion's great ideas, as expressed in #JAB15.

The concept here is very simple: drag an image into the tinyMCE’s content area and the image should automatically be uploaded and then the correct tag should be inserted in the text area.

What’s in it?

There are some minor changes in the com_media file.json.php controller in order to incorporate the needed feedback (namely the relative url for the image) and also to make sure that the name is URL safe (no spaces allowed here).

The tinyMCE plugin introduces a new private function for building the script code required fro the functionality. That’s if the option is enabled in the back end (it is by default).
Also introduced an option for a custom solder (showable only if drag&drop is enabled) to save the images exists
The code also checks if the user is allowed to upload images.
There is a spinning joomla gif to indicate that the upload is actually happening
Also if the image gets successfully uploaded a green overlay will indicate the success
If an error happened the error will display shortly on a red background
For files dropped that are not images nothing will happen
For images that the filename already exists on the server the upload will not happen and the image that is already in the server will appear in the tinyMCE content area. (failsafe we can improve that by introducing incremental filenames as we already do for existing article aliases)

Preview

#### Testing

Apply the patch
Edit tinyMCE’s options to specify the folder for the images
Test it front end - back end

[Bakual]

Cool idea 👍
From the first look I don't like that you put a specific "tiny" controller into com_media. I don't think it is a good idea to have code in com_media which is specific to an editor.
I would try to use the existing file.json controller.

If that doesn't work then I would suggest to use com_ajax and do the upload part as a AJAX plugin event in the editor plugin itself. This way the code for tiny isn't spread all over the place but contained all in the plugin. 😄
Since Joomla 3.4 or so the plugin doesn't need to be anymore in the ajax group. Thus it works for all plugins as long as the event name (function name) starts with onAjax.... It would also be a great way to showcase what is possible :)

[brianteeman]

Didn't the latest version of tiny that you just did a PR for support this internally?

[mbabker]

Set this directly to the application please, JResponse is deprecated.

[dgrammatiko]

@Bakual i think I need to talk to @Buddhima and try to get one upload controller that fits all requests. The problem is that new media is not yet production ready!

@brianteeman They introduced a new Upload API but that works with a button next to the field source in the image pop up. try it in their at tiny

[brianteeman]

Not just the new upload and seriously cool inline editing here http://blog.moxiecode.com/2015/06/25/tinymce-4-2-with-image-tools/ but the release notes (sorry can't find the link right now) talk about drag and drop

[mbabker]

Can we make sure all the debug code is pulled out before merging?

[mbabker]

@brianteeman I think this PR is adding the code needed to turn it on and make the feature work server side (something's gotta process the images).

[Fedik]

@dgt41 👍 very cool! .. here is link for Tiny upload http://www.tinymce.com/wiki.php/Configuration:images_upload_url

I also think that file.upload will be better than tiny.upload ... potentially this can be used by other extensions 😉

[nikosdion]

Where should you put the controller part?

Regarding the controller part, I'd say that it's perfectly acceptable leaving it in com_media. It is generic code which can be reused by other editors or extensions which want to implement asynchronous uploads. It can even be used by com_media itself to implement d'n'd uploads (hint!).

Implementation of the controller

Do you need to call the files array tinyFiles or can we use a more generic name, e.g. uploadedMediaFiles?

Do we really have to go through $_SERVER['CONTENT_LENGTH']? The PHP files arrays do give you the size of uploaded media. Do take a look at the existing helper method JHelperMedia::canUpload. Use it instead of custom code in lines 70:97. Centralised code can be kept secure more easily.

Also, is there a compelling reason for using the code in lines 131:146 instead of JFile::upload? The latter is much better because it allows us to centrally control the security model for uploads. Whenever possible go through the existing helper methods instead of inventing new ways. It's easier for managing the system security.

[Bakual]

Fully agree with the controller being in com_media when it's generic.
Currently it's named tiny.php which doesn't look generic to me. And we already have a file.json.php controller with an upload task. That's why I suggested to try and use that. It looks like an Ajax upload endpoint, but haven't checked.

[nikosdion]

OK, fair enough. Having a single JSON endpoint sounds like a good idea.

[dgrammatiko]

@Bakual @nikosdion we still need the controller to return the relative path and the file name of the file uploaded! Which is not available right now, right?

[Bakual]

I think it should be possible to adjust/extend the existing controller to return that.

You can either add the additional information to the existing JSON response or in worst case add a URL parameter (eg &version=2) which acts as toggle for the response, keeping old behavior for B/C and returning new version of response if parameter is present.

[infograf768]

( ! ) Fatal error: Can't use method return value in write context in ROOT/plugins/editors/tinymce/tinymce.php on line 1003

I had patched with 4.2.1 and then this one.

[dgrammatiko]

@infograf768 sorry about that JM, latest commit should fix that

[infograf768]

hmm. Patched with #7423, then patched with this.
Addedimagetools, in the plugin array line 265 of tinymce.php + changed the line in advanced mode to
plugins : \"table link image code hr charmap autolink lists importcss imagetools\",

Result is negative: I can't see the new icon in the image popup and drag and drop does not work here.

Maybe I missed something?

[infograf768]

I also have
Timestamp: 14/07/15 18:37:30
Error: SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
Source File: http://localhost:8888/trunkgitnew/administrator/index.php?option=com_content&view=article&layout=edit&id=94
Line: 517

[infograf768]

These are also the errors I have when displaying the popup

[dgrammatiko]

@infograf768 this PR doesn’t require #7423, please try it with the earlier version 4.1.6 (?)

[infograf768]

You mean it does not require the new imagetools plugin? I am confused.

[dgrammatiko]

drag and drop is not part of the image tools, actually image tools are a bunch of plugins for client side image editing plus some generic upload code. So yes the drag and drop doesn’t really require the images tools

[dgrammatiko]

MediaHelper::canUpload() is deprecated and also for some reason break the upload

[dgrammatiko]

@mbabker thanks Mike. I also made that function static cause it was giving a strict error

[mbabker]

The class is designed to be all OOP without statics, so change it to this please:

$mediaHelper = new JHelperMedia;

if (!$mediaHelper->canUpload($file, 'com_media'))
...
`

[dgrammatiko]

@n9iels this simple change will make the directories look nice even for PCs, can you check it?
'location' => str_replace('\','/', $returnUrl)

[joomla-cms-bot]

This PR has received new commits.

CC: @hdwebpros, @jessicadunbar, @jwaisner, @n9iels, @nikosdion, @peterlose

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/7435.}

[coolcat-creations]

Hi there :)

• German umlauts are just removed instead of replaced with for example Ö with oe, and Ü with ue, ß with ss, Ä with ae.
• Successful with / and . inside the Name
• I named a jpg .png and it was uploaded as .png - i don´t know if there is a possibility to see the real type of a file?
• Can´t there be a rename dialog if file already exist?
• by dragging an Illustrator File .ai - the border appears green but nothing happens then. Is it possible to color it red if filetype is not allowed?
• Is it possible to add image processing (size, cropping,...) on this point, when the dragged picture is way too big?

[n9iels]

I have tested this item ✅ successfully on 30dde3e

Slashes are now replaced 👍

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/7435.}

[dgrammatiko]

Wow that’s a big list 😃

• About the German umlauts: I am using the standard function that is used elsewhere in com_media. If people don’t mind I can mix some transliteration function there. But the idea is either you use this tinyMCE drag and drop or the com_media old upload button you should get the same results. So if I change it for tinyMCE I guess that needs to be updated also for the com_media upload button.
• About extension rename, it doesn’t really matter as the file metadata is also taken into consideration
  
• Rename dialog: This is asynchronous data transfer so it needs some consideration, probably a v2
• About the red border: Yes it can be easily done IF we are dealing with one file. The problem is that we can have multiple files and this complicates it, so if 2 files are jpg (ok) and one is .ai (not ok) what color should we use? maybe use a blue or grey color like Facebook or twitter?
• Yes, but it needs to be done through a plugin. But don’t worry I am gonna publish that soon (For free of course). That is the mid term solution, once we get the new com_media we will be able to do so much more…

This was really constructive, thanks @designbengel 👍

[roland-d]

About the German umlauts: I am using the standard function that is used elsewhere in com_media. If people don’t mind I can mix some transliteration function there. But the idea is either you use this tinyMCE drag and drop or the com_media old upload button you should get the same results. So if I change it for tinyMCE I guess that needs to be updated also for the com_media upload button.

If this is the current behaviour I wouldn't change it here and call it out-of-scope and should be dealt with in another PR.

Keep up the good work guys 💯

[joomla-cms-bot]

This PR has received new commits.

CC: @hdwebpros, @jessicadunbar, @jwaisner, @n9iels, @nikosdion, @peterlose

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/7435.}

[dgrammatiko]

Just removed the green color, now the theme color of the toolbar will be used. So default will be light grey (same as twitter dropbox area 😃 )

[zero-24]

I have tested this item ✅ successfully on 3bb31c8

works great from a first look.

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/7435.}

[n9iels]

Looks better 👍

[coolcat-creations]

Thanks for the comments @dgt41 - the grey color is better i think because it does not make the user feel that the system will accept all the images.

There is an error message for duplicate file names, one for too large file size, but not at a wrong file type?

Regarding the umlauts i´d like to open a new issue because thats something really annoying in german when the umlauts are eliminated from the name @roland-d :-)

Can it be set this to change the "paste" position meanwhile the drag and drop process? Now i have to set the marker on the place where the image should be and then drag it anywhere.

Last but not least: it´s funny that after so much years of joomla i just realized that there are plugin parameters for tinymce :-) I´d rather search them in the "Global Configuration" and also expect some Permission Parameter Setting for the Editor - thats surely also another topic...

[dgrammatiko]

@designbengel starting from the last comment: there is a PR that will make tinyMCE ACL aware and is planned for 3.5 as well #8147
The paste position in fact is working but there is no blinking cursor and that makes it look like that is not working. Honestly the API of tinyMCE is not very helpful, trying to solve this. It also annoys me, as well!
About the wrong type: there isn’t one because the wrong file types are rejected in the client side and I followed the tinyMCE’s default behavior of silent rejection. I guess we could put another warning modal here…
I think we are getting closer to merging here 😃

[coolcat-creations]

:-) Great - one more suggestion for v2 - Here in github you have a "uploading your files..." text next to the progress icon.

[roland-d]

@designbengel Can umlauts be used in filenames? They became part of a URL, I don't know if that is a problem. I understand it is an issue and if it can be improved we should but not in this PR though.

Can you share your final test results again? If all is OK, we have 2 successful commits and we can commit this gem.

[nikosdion]

@roland-d In theory any UTF-8 character can be used in a URL and supported by all modern browsers and servers. However, if you have any visitors still using IE7 or earlier (don't get me started...) they won't be able to access them. Some servers with questionable localisation settings may also mangle the names. So by necessity we transliterate all URLs to 7-bit ASCII and more specifically in the subset consisting of lowercase unaccented a-z, 0-9, dash, underscore and dot. It's very fun when you have Greek and can transliterate phonetically, by visual resemblance or according to the ISO standard... IMHO we should just silently let people have to use the ASCII subset as we do right now.

@test Still works for me :)

[zero-24]

Thanks lets go for it with 3.5 as first version 👍 -> RTC Thanks @dgt41 this is awesome work

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/7435.}

[coolcat-creations]

@roland-d no i didn´t meant the umlauts to stay in the name like they are. It´s usual to transform ü to ue, ö to oe, ä to ae and ß to ss - currently they are completely removed with is not good :-) so should i open a new request? :-) Fun example: Übergrößenträger -> "Uebergroeßentraeger" or "bergrentrger"

Edit: Oh s* sorry didn´t knew the RTC is removed by a comment - please add it again!

[roland-d]

@designbengel Please create an issue for it, so we don't forget about it :) The RTC has been removed because this feature has been merged.

[lungkao]

folder for images upload /images only ? if have many picture not good

it possible upload to /images/2015/3/31/id ?

[dgrammatiko]

Try this: https://github.com/dgt41/imageUploaderHelper/releases