Add Drag and Drop Installation with upload box for #14905

[asika32764]

Pull Request for Issue #14905

Summary of Changes

This is a new PR for #14905 that for easy discuss about the new upload layout.

Images

Drag and drop install

Select install

If browser does not support FormData, will fallback to original upload layout. Please someone help me test in IE8.

[ghost]

I have tested this item ✅ successfully on d66be84

---

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

[C-Lodder]

All the JS and CSS should really go into separate files:

media/com_installer/js/com_installer.js
media/com_installer/css/com_installer.css

[asika32764]

All the JS and CSS should really go into separate files.

May I just let the maintenance team to do this since I just follows original code to write it in php.

For me, it is make sense to write this css, js in plugin file because we can close them by closing plugin instead couple them in com_installer.

[infograf768]

Agree with @C-Lodder

Also, I suggest that the dropbox be a bit different, something like

#dragarea {
    background-color: #fafbfc;
    border: 1px dashed #999;
    padding: 5% 0;
    transition: all 0.2s ease 0s;
    width: 100%;
}

It would give something like

What do you think?

[asika32764]

Not bad, I did the styling change, also added a box-sizing to align right-side.

[C-Lodder]

@asika32764 - In J4, we're trying to move ALL Javascript and CSS to the media directory, so that it's all in 1 place. This means debugging and finding code is much easier. So it would be appreciated if you could do this.

The CSS bit is easy. As for the JS, you'll need to get the $return value, so simply add a hidden input like so:

<input type="hidden" id="installer-return" value="<?php echo $return; ?>">

Then get this value in the JS file:

var returnUrl = $('#installer-return');

[infograf768]

hmm, found an issue which is not related to this PR.

In LTR, we do get OK

But in RTL, it is another matter

Will create a specific PR
#14934

[asika32764]

@C-Lodder

I know, my code is only against 3.7 now.

If I do this staff, I can only move my code since I don't know there may be any break after I moved other code wrote in the past and separated in different plugins. It will be clear that a PR just do one thing.

So I suggest make this thing happened after J4 that we can make sure code works currently in 3.7.

[C-Lodder]

Ok leave it for now, I'll move it myself once this is merged and staging has been merged into 4.0-dev

[C-Lodder]

I have tested this item ✅ successfully on 5cf5dce

Tested on:

• Firefox
• IE8
• IE9
• IE10
• IE11
• Edge

  ---

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

[infograf768]

I have tested this item ✅ successfully on 5cf5dce

---

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

[asika32764]

Moved return value out of JS from @C-Lodder 's suggest. That can be more easily to move code to single js file in the future.

[asika32764]

Also moved token out.

Maybe we can consider use Laravel way to handle CSRF token for Ajax and JS in J4: https://laravel.com/docs/5.4/csrf#csrf-x-csrf-token

[infograf768]

I have tested this item ✅ successfully on 13630da

---

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

[C-Lodder]

I have tested this item ✅ successfully on 13630da

---

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

[jeckodevelopment]

RTC

---

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

[brianteeman]

yay!!!!

[infograf768]

@asika32764
Please look at https://issues.joomla.org/tracker/joomla-cms/15119

we have no message of success or error when using drag and drop