Add drag & drop installation #14905

asika32764 · 2017-03-26T09:45:08Z

Summary of Changes

Add drag & drop file to install extension package.

The drag zone is whole page of the Extensions -> Manage -> Install view and it ~~works for 4 tabs~~ now only works for Upload package file tab.

Testing Instructions

Go to Extensions -> Manage -> Install and drag file from desktop to browser. Joomla will auto upload it to install.

Images

dgrammatiko · 2017-03-26T09:55:37Z

Formdata is not supported in IE8 http://caniuse.com/#search=formdata
so we need some sort of fallback (in tinymce we have a message)

brianteeman · 2017-03-26T09:55:47Z

First of all thank you very much for doing this. I drag and drop all the time to upload extensions and its a pain to hit the very small target so this will make a great difference

We have drag and drop in one other place in Joomla which is for images within tinmyce and it would be good if you could make the language string here match.

So can you change the string to "Drag and Drop ...." not just Drag

Secondly I can see in the tinymce plugin for dragndrop (media\editors\tinymce\plugins\jdragdrop\plugin.js) that we have a check and an error if the users browser doesnt support drag drop. So I presume we need a similar to check here?

brianteeman · 2017-03-26T09:56:15Z

I see that @dgt41 was writing the same thing at the same time as me ;)

asika32764 · 2017-03-26T09:59:12Z

Thanks for the feedback, I'll try fix the IE8 and language issues later.

asika32764 · 2017-03-26T10:17:26Z

Added an alert to notice IE8 users which is not support drag&drop upload. I don't have Windows now, could anyone help me to test?

The language key wrote by @Dg41 is only for Tinymce plugin and hard coded the image words in language string, so I added 2 new language keys for this feature in com_installer.

infograf768 · 2017-03-26T10:25:10Z

It works, but one has no idea that Drag and Drop is possible at looking at the UI.
I suggest adding this information on the page.

brianteeman · 2017-03-26T10:26:53Z

@infograf768 the same could be said of the drag and drop of images in tinmyce ;) I dont deel it is necessary as it is a standard web pattern now <http://www.avg.com/email-signature?utm_medium=email&utm_source=link&utm_campaign=sig-email&utm_content=webmail> Virus-free. www.avg.com <http://www.avg.com/email-signature?utm_medium=email&utm_source=link&utm_campaign=sig-email&utm_content=webmail> <#DAB4FAD8-2DD7-40BB-A1B8-4E2AA1F9FDF2>

…

On 26 March 2017 at 11:25, infograf768 ***@***.***> wrote: It works, but one has no idea that Drag and Drop is possible at looking at the UI. I suggest adding this information on the page. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#14905 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABPH8RwfLpGmVHvD8Kii8vaRHNWhLaClks5rpj0HgaJpZM4MpX-_> .

-- Brian Teeman Co-founder Joomla! and OpenSourceMatters Inc. https://brian.teeman.net/ <http://brian.teeman.net/>

brianteeman · 2017-03-26T10:28:59Z

administrator/language/en-GB/en-GB.com_installer.ini

@@ -12,6 +12,8 @@ COM_INSTALLER_CONFIRM_UNINSTALL="Are you sure you want to uninstall? Confirming
 COM_INSTALLER_CURRENT_VERSION="Installed"
 COM_INSTALLER_DISCOVER_FILTER_SEARCH_DESC="Search in discovered extension name. Prefix with ID: to search for an extension ID."
 COM_INSTALLER_DISCOVER_FILTER_SEARCH_LABEL="Search Discovered Extensions"
+COM_INSTALLER_DRAG_ERR_UNSUPPORTEDBROWSER="Drag and drop file upload is not available for your browser. Please consider using a fully HTML5 compatible browser"


perfect text - please add a . at the end

Also fixed the original text from TinyMCE

asika32764 · 2017-03-26T10:29:22Z

It works, but one has no idea that Drag and Drop is possible at looking at the UI.
I suggest adding this information on the page.

I have considered about this but I didn't implement this message yet, I'm open to let people decide what to do.

ghost · 2017-03-26T10:30:03Z

@infograf768 i guess most Users are surprised that its not working (like this PR allow). So you have experienced Users and they should got Info by Release-Data.

infograf768 · 2017-03-26T10:31:36Z

When we edit TinyMCE plugin, it is indicated.

It is indeed not indicated when using tinyMCE as an editor to drop images into the textarea.

ghost · 2017-03-26T10:33:43Z

I have tested this item ✅ successfully on 9641792

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

brianteeman · 2017-03-26T10:35:17Z

@infograf768 that is for the drag and drop of moving the tinymce buttons. NOT for the drag and drop image uploading ;)

brianteeman · 2017-03-26T10:37:54Z

@franz-wohlkoenig it has always worked (a bit) - just that you had to drop it on the button and then click on the upload button. This PR makes it work as it should

brianteeman · 2017-03-26T10:40:02Z

would something like this be acceptable to you

jeckodevelopment · 2017-03-26T11:07:20Z

In many applications, when there's the opportunity to drag and drop, there's a kind of dashed border to highlight the area in which you can drag and drop the file/whatever

Bakual · 2017-03-26T11:08:10Z

The drag zone is whole page of the Extensions -> Manage -> Install view and it works for 4 tabs.

Imho it should only work on the "Upload Package File" tab. To me it doesn't make much sense and could be confusing to be able to drop a file into the "Install by URL", "Install from Folder" or "Install from Web" tab.
Also, the code should be added by the plugin responsible for that tab (https://github.com/joomla/joomla-cms/blob/staging/plugins/installer/packageinstaller/tmpl/default.php) and not by com_installer.

dgrammatiko · 2017-03-26T11:09:23Z

@asika32764 can you move the code to the file form field (maybe with an option allowdnd) ?
This way we make it available everywhere, not only in this page

Ps: https://github.com/joomla/joomla-cms/blob/staging/layouts/joomla/form/field/file.php

brianteeman · 2017-03-26T11:09:32Z

oh i didnt spot it worked in all tabs - that is indeed confusing <http://www.avg.com/email-signature?utm_medium=email&utm_source=link&utm_campaign=sig-email&utm_content=webmail> Virus-free. www.avg.com <http://www.avg.com/email-signature?utm_medium=email&utm_source=link&utm_campaign=sig-email&utm_content=webmail> <#DAB4FAD8-2DD7-40BB-A1B8-4E2AA1F9FDF2>

…

On 26 March 2017 at 12:08, Thomas Hunziker ***@***.***> wrote: The drag zone is whole page of the Extensions -> Manage -> Install view and it works for 4 tabs. Imho it should only work on the "Upload Package File" tab. To me it doesn't make much sense and could beconfusing to be able to drop a file into the "Install by URL", "Install from Folder" or "Install from Web" tab. Also, the code should be added by the plugin responsible for that tab ( https://github.com/joomla/joomla-cms/blob/staging/plugins/installer/ packageinstaller/tmpl/default.php) and not by com_installer. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#14905 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABPH8dNQ1k9NDzJvmnKJibv3a1XXhSSkks5rpkcbgaJpZM4MpX-_> .

-- Brian Teeman Co-founder Joomla! and OpenSourceMatters Inc. https://brian.teeman.net/ <http://brian.teeman.net/>

brianteeman · 2017-03-26T11:10:07Z

@jeckodevelopment look at how its done in the tinymce plugin we already have for image uploads. You only get the box when you are dragging and dropping - not before

Bakual · 2017-03-26T11:26:09Z

an you move the code to the file form field (maybe with an option allowdnd) ?
This way we make it available everywhere, not only in this page

It's an idea, but it would have to work also when multiple file fields are present in a form. You can't have the whole form be the trigger area in this case. You probably need an attribute which specifies the area identifier.

dgrammatiko · 2017-03-26T11:34:27Z

@Bakual I guess we can append (programmatically) some unique classes to the drop area and have the script loop through the classes and do it's magic

asika32764 · 2017-03-26T11:36:57Z

Imho it should only work on the "Upload Package File" tab.

I didn't put code in plugin because I set whole page as the drag zone. And the upload from file function is hard coded in com_installer InstallerModelInstall, then the ajax upload must add a new task to controller, it is deep coupled to core installer component, so I decided to make the feature works for all tabs.

This concept also inspired by phpMyAdmin, it can drag file in any pages to import SQL file. (If someone always click the select file button, they won't notice this function, but if someone try to drag file to the small button, they will notice that there is a new feature...)

I can move code to plugin and make the drop zone only in install from upload tab content, but we need a box with dashed styling, I'm not sure how should I do this layout (what size? color? and etc...).

can you move the code to the file form field (maybe with an option allowdnd) ?
This way we make it available everywhere, not only in this page

@dgt41 It is a good idea for a drag & drop file field, but it is too big to me to implement this feature since I just got one night free to do this. Let's make this PR work first and leave the new field for future PRs.

asika32764 · 2017-03-26T11:46:50Z

@dgt41

About the drag & drop field, since Javascript is not able to inject file path to HTML file input, we have only two way that use ajax to send POST uploading or convert file to base64 and store in text field.

I have implemented this feature in my RAD framework, see:

But we must consider about this is not a standard way for JForm process, developer must manually handle the ajax or base64 string for every fields.

asika32764 · 2017-03-27T00:38:18Z

UPDATE

Based on discussion, moved code to plg_installer_packageinstaller and limited this function only work for Upload Install tab, also added the message to notice user.

I still set whole page as drag zone, whether we should create a dashed box depends on future discussion.

ghost · 2017-03-27T05:22:18Z

@asika32764 lets chose the Way People expect: i guess its a dashed box, if this is best Practice.

infograf768 · 2017-03-27T06:58:00Z

administrator/components/com_installer/views/install/tmpl/default.php

-		.css("display", "none")
-		.css("margin-top", "-10px");
+		JoomlaInstaller.getLoadingOverlay()
+            .css("top", outerDiv.position().top - $(window).scrollTop())


Could you use tabs instead of spaces to indent these js and css?

Fix in #14924

asika32764 · 2017-03-27T12:00:44Z

Create a new PR in #14924 that we can discuss for the new box layout.

joomla-cms-bot · 2017-03-27T15:03:39Z

Set to "closed" on behalf of @infograf768 by The JTracker Application at issues.joomla.org/joomla-cms/14905

infograf768 · 2017-03-27T15:03:40Z

Closed as we have new PR #14924

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

* Add drag & drop installation * Fix drag issue * Add more error message * Typo * CS * Style fix * Fix from review * Add return * Add `.` * Fix based on review * Add return url * Convert loading cover operation into object * MISC fixes * Fix indents * Add box uploader * CS * Styling * Move return val out * Moved token out

Add drag & drop installation

b07c967

joomla-cms-bot added Language Change This is for Translators PR-staging labels Mar 26, 2017

asika32764 added 3 commits March 26, 2017 17:46

Fix drag issue

c63ade0

Add more error message

65cd7dd

Typo

36baf3e

CS

80ad896

asika32764 added 2 commits March 26, 2017 18:06

Style fix

cf6a9a1

Fix from review

85de472

Add return

e9d4728

brianteeman mentioned this pull request Mar 26, 2017

Usability improvement on uploader #14280

Closed

brianteeman reviewed Mar 26, 2017

View reviewed changes

Add .

9641792

Fix based on review

6b0bab4

asika32764 added 3 commits March 27, 2017 08:52

Add return url

b1e8dc0

Convert loading cover operation into object

d819bea

MISC fixes

639e3a0

infograf768 reviewed Mar 27, 2017

View reviewed changes

asika32764 mentioned this pull request Mar 27, 2017

Add Drag and Drop Installation with upload box for #14905 #14924

Merged

joomla-cms-bot closed this Mar 27, 2017

asika32764 deleted the feature-drag-install branch July 29, 2017 15:57

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add drag & drop installation #14905

Add drag & drop installation #14905

asika32764 commented Mar 26, 2017 •

edited by joomla-cms-bot

dgrammatiko commented Mar 26, 2017

brianteeman commented Mar 26, 2017

brianteeman commented Mar 26, 2017

asika32764 commented Mar 26, 2017 •

edited

asika32764 commented Mar 26, 2017 •

edited

infograf768 commented Mar 26, 2017

brianteeman commented Mar 26, 2017 via email

brianteeman Mar 26, 2017

asika32764 Mar 26, 2017

asika32764 commented Mar 26, 2017

ghost commented Mar 26, 2017

infograf768 commented Mar 26, 2017

ghost commented Mar 26, 2017

brianteeman commented Mar 26, 2017

brianteeman commented Mar 26, 2017

brianteeman commented Mar 26, 2017

jeckodevelopment commented Mar 26, 2017

Bakual commented Mar 26, 2017 •

edited

dgrammatiko commented Mar 26, 2017 •

edited

brianteeman commented Mar 26, 2017 via email

brianteeman commented Mar 26, 2017

Bakual commented Mar 26, 2017

dgrammatiko commented Mar 26, 2017 •

edited

asika32764 commented Mar 26, 2017 •

edited

asika32764 commented Mar 26, 2017

asika32764 commented Mar 27, 2017

ghost commented Mar 27, 2017

infograf768 Mar 27, 2017

asika32764 Mar 27, 2017

asika32764 commented Mar 27, 2017

joomla-cms-bot commented Mar 27, 2017

infograf768 commented Mar 27, 2017

Add drag & drop installation #14905

Add drag & drop installation #14905

Conversation

asika32764 commented Mar 26, 2017 • edited by joomla-cms-bot

Summary of Changes

Testing Instructions

Images

dgrammatiko commented Mar 26, 2017

brianteeman commented Mar 26, 2017

brianteeman commented Mar 26, 2017

asika32764 commented Mar 26, 2017 • edited

asika32764 commented Mar 26, 2017 • edited

infograf768 commented Mar 26, 2017

brianteeman commented Mar 26, 2017 via email

brianteeman Mar 26, 2017

Choose a reason for hiding this comment

asika32764 Mar 26, 2017

Choose a reason for hiding this comment

asika32764 commented Mar 26, 2017

ghost commented Mar 26, 2017

infograf768 commented Mar 26, 2017

ghost commented Mar 26, 2017

brianteeman commented Mar 26, 2017

brianteeman commented Mar 26, 2017

brianteeman commented Mar 26, 2017

jeckodevelopment commented Mar 26, 2017

Bakual commented Mar 26, 2017 • edited

dgrammatiko commented Mar 26, 2017 • edited

brianteeman commented Mar 26, 2017 via email

brianteeman commented Mar 26, 2017

Bakual commented Mar 26, 2017

dgrammatiko commented Mar 26, 2017 • edited

asika32764 commented Mar 26, 2017 • edited

asika32764 commented Mar 26, 2017

asika32764 commented Mar 27, 2017

ghost commented Mar 27, 2017

infograf768 Mar 27, 2017

Choose a reason for hiding this comment

asika32764 Mar 27, 2017

Choose a reason for hiding this comment

asika32764 commented Mar 27, 2017

joomla-cms-bot commented Mar 27, 2017

infograf768 commented Mar 27, 2017

asika32764 commented Mar 26, 2017 •

edited by joomla-cms-bot

asika32764 commented Mar 26, 2017 •

edited

asika32764 commented Mar 26, 2017 •

edited

Bakual commented Mar 26, 2017 •

edited

dgrammatiko commented Mar 26, 2017 •

edited

dgrammatiko commented Mar 26, 2017 •

edited

asika32764 commented Mar 26, 2017 •

edited