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

[dragan]

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.

[dragan]

 

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?

[dragan]

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...

[apeisa]

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?

[dragan]

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?

[Soma]

I use those naming conventions also in certain places for image or file fields and I have no problems.

[ryan]

Do you have the LanguageSupportFields module installed? If so, and if the language codes used in the filenames are consistent with the language names in your system, then it's assuming they are language-alternate fields. 

[dragan]

Do you mean this one?

http://modules.processwire.com/modules/language-support/

Yes, that is installed.

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

[ryan]

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?