Confusing interface when you attach a file to a post

[Gilbertdelyon]

When you want to attach a file to a post you get this menu

This is confusing because in practice you can attach many other kinds of file (pdf for example) and as long as you dont try you dont know you can.

Not a major issue, but it could be improved.

[marc-farre]

The audio, image, and video file types have been added for mobile.
It allows opening directly the correct interface.
E.g., if you click on "Attach an image", it will open the photo gallery and the camera to directly take a picture.
On a computer, it will add a filter to only show images when browsing your files.

[Gilbertdelyon]

On a computer, it will add a filter to only show images when browsing your files.

Ah! Ok, now I understand my 'mistake'. If I want to insert another kind of file (e.g. a pdf file) I need to click the "image button" (which is also confusing !) in the menu bar.

[marc-farre]

If I want to insert another kind of file (e.g. a pdf file) I need to click the "image button"

No. For any file types (PDF, etc.), you need to click on the "Cloud" button:

[spoorun]

On a computer, it will add a filter to only show images when browsing your files.

Ah! Ok, now I understand my 'mistake'. If I want to insert another kind of file (e.g. a pdf file) I need to click the "image button" (which is also confusing !) in the menu bar.

I agree it's confusing.

Many of our users are certainly confused by it.
.
Regardless of the technical reasons, (and the image and audio filters etc that were added are certainly appreciated) in practice it would be helpful to also add a file icon to the list of your types - as common users simply see a list of items they can attach, and no sign of files.

Also to click the 'upload' button for files, but instead to block the dropdown menu for images, audio etc feels a bit duplicative.

[marc-farre]

@spoorun I agree.
@Eladnarlea maybe you have a suggestion?

[Eladnarlea]

We are aware of this problem and are actively looking for a good fix for this!

Thank you for your suggestions :)

[luke-]

Perhaps we could implement following as a workaround.

We replace the "Split Button" (Left side general Upload, Right Side More) with one button which always shows the dropdown menu.

• Here we add an option for regular files.
• Always show an icon, if necessary simply a fallback to the cloud or similar

[marc-farre]

@luke- What I would do (not sure, first idea reviewing the code):

Add UploadFileHandler::class to

humhub/protected/humhub/modules/file/Module.php

Line 114 in 72b0bb8

public $defaultFileHandlers = [UploadAudioFileHandler::class, UploadImageFileHandler::class, UploadVideoFileHandler::class];

Rewrite

humhub/protected/humhub/modules/file/widgets/FileHandlerButtonDropdown.php

Lines 62 to 82 in 72b0bb8

	if (!$this->primaryButton) {
	$firstButton = array_shift($this->handlers)->getLinkAttributes();
	Html::addCssClass($firstButton, ['btn', $this->cssButtonClass]);
	$output .= $this->renderLink($firstButton);
	} else {
	$output .= $this->primaryButton;
	}
	if (count($this->handlers) !== 0) {
	$output .= '<button type="button" class="btn ' . $this->cssButtonClass . ' dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span><span class="sr-only">Toggle Dropdown</span></button>';
	$cssClass = ($this->pullRight) ? 'dropdown-menu dropdown-menu-right' : 'dropdown-menu';
	$output .= Html::beginTag('ul', ['class' => $cssClass]);
	foreach ($this->handlers as $handler) {
	$output .= Html::beginTag('li');
	$output .= $this->renderLink($handler->getLinkAttributes());
	$output .= Html::endTag('li');
	}
	$output .= Html::endTag('ul');
	}

to deal with 2 possibilities:

• Module::defaultFileHandlers has 1 handler: display a basic button
• 2 or more handlers: display a dropdown button as you described

It means we must removeUploadButton widget in all HumHub core and all modules using file upload, e.g.:

humhub/protected/humhub/modules/content/widgets/views/wallCreateContentFormFooter.php

Lines 58 to 65 in 72b0bb8

	<?php $uploadButton = UploadButton::widget([
	'id' => 'contentFormFiles',
	'tooltip' => Yii::t('ContentModule.base', 'Attach Files'),
	'progress' => '#contentFormFiles_progress',
	'preview' => '#contentFormFiles_preview',
	'dropZone' => '#contentFormBody',
	'max' => Yii::$app->getModule('content')->maxAttachedFiles
	]); ?>

Do you think we should do this?
Maybe on HumHub 1.17 as some modules are already compatible with HumHub 1.16?
Or you have a better idea?

[luke-]

@marc-farre Thank you for your research here.

Here are a few thoughts without having looked at the code in detail.

• Does it make sense to always have two widgets here UploadButton and FileHandlerButtonDropdown. Wouldn't it make sense to have only one UploadButton, which always displays a DropDown.
• For better migration, FileHandlerButtonDropdown could always produce empty output.
• Are there cases where only UploadButton is used without FileHandlerButtonDropdown.
• Unfortunately it is probably too late for v16. But I hope we won't need that long for v17.

[marc-farre]

@luke- Yes, that's a good solution, I think.

So if you agree, when I have time (as it's for v17 only), I will try to do the following:

• Merge FileHandlerButtonDropdown code into UploadButton
• Mark FileHandlerButtonDropdown as deprecated and always return an empty output (so if there are cases where only UploadButton is used without FileHandlerButtonDropdown, it won't be a problem)
• Add UploadFileHandler::class to

  humhub/protected/humhub/modules/file/Module.php

  Line 114 in 72b0bb8

  public $defaultFileHandlers = [UploadAudioFileHandler::class, UploadImageFileHandler::class, UploadVideoFileHandler::class];

In all modules, the handlers widget param sent to FileHandlerButtonDropdown must be moved to UploadButton (e.g. 'handlers' => $fileHandlers in

humhub/protected/humhub/modules/content/widgets/views/wallCreateContentFormFooter.php

Line 66 in 72b0bb8

<?= FileHandlerButtonDropdown::widget(['primaryButton' => $uploadButton, 'handlers' => $fileHandlers, 'cssButtonClass' => 'btn-default']); ?>

).
If not, the default handler list will be used.
It seems to concern the Messenger and cFile modules. I'll also update them.

2 button types:

• if Module::defaultFileHandlers has 1 handler only: display a basic button
• if 2 or more handlers: display a dropdown button as you described

[luke-]

@marc-farre Sounds good to me!

Let me know if I can support you!