Jump to content

File Input Fields: drag'n'drop gone when cloned


Recommended Posts

I have cloned (duplicated) a few file input fields today, but found the following odd behaviour:

- Drag'n'drop is no longer possible.

- Trash icon doesn't display in Mac/Safari + Mac/Chrome.

- I can't delete any uploaded files anymore.

addtl. infos:

Filetypes are usual stuff / allowed file-types (PDF mostly) etc.

PW 2.3.2 dev

Files are visible in the backend and in the DB.

Tried on Mac Safari + Win Google Chrome (in the latter, the trash icon is fine)

Due to a large number of input fields, we've resized the input field width to 50 or 25%, but changing them back to 100% didn't do anything.

Link to comment
Share on other sites


Looking in the page edit HTML source, I noticed this:

How it looks in the duplicated input fields where drag'n'drop doesn't work:

<span class="AjaxUploadDropHere description"><span class="ui-icon ui-icon-arrowreturnthick-1-s ui-priority-secondary"></span>  drag and drop files in here</span>

How it looks in those that do work normally:

<span class="AjaxUploadDropHere description" style="display: inline;"><span class="ui-icon ui-icon-arrowreturnthick-1-s ui-priority-secondary"></span>  drag and drop files in here</span>

.InputfieldFileUpload .AjaxUploadDropHere {

    display: none;


In other words:

display: inline doesn't get rendered in the buggy fields. It overrides the display: none in wire/modules/Inputfield/InputfieldFile/InputfieldFile.css?v=100

This explains why the drag'n'drop area isn't visible. But what could possibly trigger this?

That still doesn't explain why uploaded files can't be deleted :(

The client already has backend access to update content, so unfortunately he already uploaded several files in several pages...

Anybody have a hint what went wrong when duplicating fields?
Link to comment
Share on other sites

Looking at it some longer, it turned out that there are either CSS bugs, or browser bugs.

Duplicating file input fields with Apple Safari or Firefox on Mac: Buggy. Trashcan icon is not visible.

Doing the same with Google Chrome on Mac: works fine.

Same with Google Chrome Win: works fine.

You'd think that Webkit browsers behave the same, but apparently not...

Link to comment
Share on other sites

That is some very strange stuff, since i would assume cloning a field is mostly a backend process. If you duplicate/clone file field on Safari or Firefox, does that cloned field work on Chrome? Or is it broken on every browser?

And clone with Chrome, works everywhere?

Are you using the default theme or some alternative?

Link to comment
Share on other sites

Strange indeed. Tell me about it.

The relevant CSS was in no way altered. We use the default admin theme, too.

Today I've spent 2 hours more on this.

Turns out that if you name an input field "file" with some sort of language code at the end like so: download_manual_fr, download_manual_en, download_manual_de

the system is somehow confused, for whatever reasons.

If you name a field foo_fr for type "text", everything works fine. I have these all over the place.

But as soon as you use such naming conventions for file-fields, it gets all sorts of confused.

Renaming such fields worked. e.g.

download_manual_fr -> download_manualfr

it works as advertised.

Perhaps someone who's an admin can cross-link it to the multilang forum?

Link to comment
Share on other sites

  • 2 weeks later...
But imho that still doesn't explain why drag-and-drop uploads stop working, and the trash can icon disappears.

I haven't been able to duplicate this one yet. You might want to see if updating your dev branch version helps at all? We're in a bit of a transition with the admin theme, so you might also see if using the new admin theme (copying /site-default/templates-admin/ to your /site/templates-admin/) makes any difference?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...