News:

Bored?  Looking to kill some time?  Want to chat with other SMF users?  Join us in IRC chat or Discord

Main Menu

[FREE/PAID] NO Upload Button & Improved Attachment User Interface Mod

Started by FrizzleFried, May 19, 2022, 10:44:18 AM

Previous topic - Next topic

Antechinus

Quote from: davo88 on May 21, 2022, 05:16:53 PMThe question of how simple and easy a UI should be, depends on the demographic of your forum. Younger users will just hack it until it works. Older users are intimidated more easily, disinclined to experiment and risk failure. If something goes wrong, that's it...  spit the dummy.
I am 61. I usually have no trouble figuring out a new interface. :P

QuoteNow let's have a look at phpBB which does something similar to SMF.
It has to be more complicated because of the additional functionality. But it manages the complexity quite well and does a reasonable job.
It starts like this...

With phpBB, you can upload instantly by doing drag/drop directly into the post textarea. It won't automatically insert dropped images into the post (that still has to be done manually) but having the entire post textarea as a drop target is a clever idea. Saves space, saves clutter, and the target area is big enough that there's no way you can miss it.

QuoteThen once you start adding...
  • The Delete button removes both the file and the code from the text message.
  • No previews of the added images. (there might be, didn't look too hard)
  • Has ability to add additional text comments - not sure how these are displayed - maybe mouseover.

1/ Yes, leaving the useless old text in the post is a failing of the 2.1 code. I think Sesq has submitted a PR to fix that.

2/ No, phpBB does not do image previews, although TBH I kinda think they are a good thing to have. If someone uploads a group of images in one hit, being able to see what they are before inserting them is likely to be very helpful.

3/ The comments are displayed as a basic text caption, under the image. :)

QuoteI don't use any of the major social media platforms so maybe they have some interesting solutions too.
What's the point of all this?
We can only go so far with a mod. But if we look around and see how other people solve the problem, maybe we can design something simple, yet powerful, that will help the authors of the underlying attachment code evolve the attachment UI into a winner.

It's going to need a mod. AFAIK the SMF devs have no interest in "evolving" the system before 2.2.

davo88

Quote from: Arantor... would you also like comparison screenshots from MyBB, Flarum, IPS and Woltlab? I have instances of those to hand if it would be helpful.
Yes please. Any observations on (even minor) features within their UIs would be most helpful as well.

Quote from: AntechinusIt's going to need a mod. AFAIK the SMF devs have no interest in "evolving" the system before 2.2.
Yes, a mod for sure. And we can contribute to the progress of 2.2 by doing some groundwork and perhaps providing a direction.

Antechinus, could you give us some indication of what you could do with an attachments mod? (I've only done minor code tweaks.)
What big changes are realistically within the range of a mod? And which are not? For example, the current three step process - Add, Upload, Insert. What is involved with changes to that? You mentioned above "Making it work without an upload button is obviously possible though" Is it really within the scope of a mod?

Another example. Inserting a file is currently an optional action. Could optional things like Inserts,  BB code display, etc be made part of a little power-user menu or something? So your average user who just wants to tack five images on to the end of their message can go Add x 5 ---> Post ... done. They aren't confronted by buttons saying "Insert" or other words suggesting more actions are needed. All they really see is just Add and Delete. The power-user options might be accessible by a mouseover, or maybe a small menu button.

Also little things like the overlaid links in the top corners of the Xenforo thumbnails (Insert... and trashcan). Similarly the X (delete) button in the top RH corner of the Ebay thumbnails. Are these sort of things doable?

Mouseover help bubbles, or Wikipedia style page previews, or SMF Admin panel popup help windows... any of these realistic in the attachments UI world?




Antechinus

You generally want to avoid mouseover gizmos these days, simply because it's no good for mobile, so you end up needing more code to cover mobile too. :) A button probably makes the most sense.

QuoteAntechinus, could you give us some indication of what you could do with an attachments mod? (I've only done minor code tweaks.)
What big changes are realistically within the range of a mod? And which are not? For example, the current three step process - Add, Upload, Insert. What is involved with changes to that? You mentioned above "Making it work without an upload button is obviously possible though" Is it really within the scope of a mod?
Honestly? At this stage I don't know. I'm mainly good at markup and presentation. I'm just trying to get my head around the fileUpload.js a bit. But, offhand, since it has events for uploading on click...
// Hookup the upload button.
_thisElement.find('.upload').on('click', function () {
myDropzone.enqueueFile(file);
});
$('a#attach_upload_all').on('click', function () {

if (!confirm(smf_you_sure)) {
return;
}

myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED));
myDropzone.options.createMaxSizeBar();

myDropzone.options.hideFileProgressAndAllButtonsIfNeeded();
});

...then my guess is that, logically, you can remove the code for the buttons and click events, and just make the code go straight to actual uploading as soon as a file is dropped in the target area. Lots of others platforms seem to do it, so...

FrizzleFried

Whatever solution you come up with ... the presentation changes along are making my leg tingle with excitement...


;)


Arantor

As requested, attached are some screenshots from other platforms about how they detail with this. I'm not going to embed in the post, just going to discuss them.

MyBB - quite a streamlined interface even if the attachments box is waaaaaaaay down there. Note there are no attachments at all in quick reply, and even if you use the insert-into-post function you don't get the preview in WYSIWYG editing mode. (Also of interest, they don't assign the ids based on global ids the way SMF does; the first attachment in the post is handled by [attachment=1])

IPS - has the attachments in the editor in both post creation and quick reply. Note that if you attach an image by default it'll just post it full size under the post (this is configurable, I just couldn't be bothered), and you can click the attachment while in the editor to just insert it where the cursor is. Very slick. Notice also the 'other media' button where you can re-insert an existing attachment of yours through a browser interface.

Flarum - doesn't even have attachments in the core. I believe it's available as an extension but I CBA to go digging for it especially since the first few search results are posts from 2015 whining about how it's not going to be a core feature. I will say that if you're 'mobile first' there is some logic for the idea but it's not a *good* idea.

Woltlab - attachments are under a tab in the editor, but you press the upload button, get your file selector, select your file, and boom it's uploaded. And you're given nice tidy buttons to remove it or insert it into the post as either a thumbnail or a full size file.


At no point was I required to press 'upload' after selecting a file, the act of selecting uploaded it to the server for me. In fact the only hint that there was anything going on was in IPS where I hit upload and then post sufficiently fast it had to tell me off because it was still uploading the image.

But I think this makes a compelling argument that the current approach is in need of love.


EDIT: And I found a bug too.

Sir Osis of Liver

Quote from: Arantor on May 22, 2022, 03:28:37 PMthe act of selecting uploaded it to the server for me.

Isn't there a simple way to auto execute an onclick function in js?  Vaguely remember doing it once, but can't find it as I don't remember the context.
Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

Antechinus

Yes,there is. You basically just change it so instead of being a separate click function it's just something that happens when you do something else (ie: drop a file in the box, etc). But doing it in this case, and doing it properly, is not quite that simple. It's obviously possible though.

Incidentally, I have noticed various other details with the default interface. For a start, the "attachment nag" when you reach the maximum number of attachments is useless in practice because it doesn't update in real time (only when the page is reloaded). So, having it displayed is just misleading, because it will always lag behind where you are up to.

And, depending on how you are adding/deleting/cancelling files even the other string...
<strong>', $txt['attach_restrictions'], ' ', implode(', ', $context['attachment_restrictions']), '</strong>';...can get tricked sometimes, although that is less of an issue (most of the time it is accurate).

Arantor


Antechinus

I was using it "correctly". I'm not sure how you could use it "incorrectly". I should handle uploading/deleting/cancelling as SOP.

Arantor

I filed a bug today where I uploaded one file and it told me I had 19 of 36 remaining uploads. And that's using the most optimal path without any deletes or anything.

Sir Osis of Liver

Is there any practical way to make 2.0 post template work in 2.1?  It adds and posts attachments correctly, but modify is a bit squirrelly.
Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

Antechinus

Quote from: Arantor on May 22, 2022, 05:08:24 PMI filed a bug today where I uploaded one file and it told me I had 19 of 36 remaining uploads. And that's using the most optimal path without any deletes or anything.
Yes I saw that. :D Haven't hit that one yet, but it looks like fun.

Sir Osis of Liver

Not a major thing, but post submit buttons should be under editor text box, not below attachments.  Get lost if there are several attachments, especially on mobile.  Something like this -


// If this message has been edited in the past - display when it was.
if (isset($context['last_modified']))
echo '
<div class="padding smalltext">
', $context['last_modified_text'], '
</div>';

/// Finally, the submit buttons.
echo '
<div id="post_confirm_buttons">
', template_control_richedit_buttons($context['post_box_name']),' </div>';

// If the admin has enabled the hiding of the additional options - show a link and image for it.
if (!empty($modSettings['additional_options_collapsable']))

Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

Antechinus

Yes, I was thinking the same thing. Already got it that way on local. I also put the "post settings" checkboxes down the bottom, under drafts, because they are rarely used anyway unless you are doing a lot of moderation (in which case attachments and drafts are collapsed, and the checkboxes are now always visible).

davo88

@Arantor ... thanks very much for the snips and comments. Worth a close look I think. Will try them out in their test forums.  

Sir Osis of Liver

Been tinkering with the layout, it's really not too difficult to clean it up, several ways to do it.  Big thing would be to auto upload added attachments.  I'm not getting that. >:(
Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

Antechinus

Y'know, as long as you don't have to chase the "Upload all" button down the page*, and as long as it is obvious where it is and what it does**, then I really don't think being able to queue all your proposed files before hitting "Upload all" is really that much of an issue.***

*IOW, not like the default arrangement.
**IOW, clearer and more distinct than the default.
***If you can queue them first you will get a warning if you exceed the limit, in which case you can decide which ones to cancel before you hit "Upload all". Which is not really a stupid arrangement.

Karmasterrr

A bit of Javascript and I managed to remove that stupid "UPLOAD" button.

Inside "Themes/default/scripts/smf_fileUpload.js" file, change code from:
                // Show the upload and cancel all buttons only if there is something to cancel/upload.
                if (myDropzone.getFilesWithStatus(Dropzone.ADDED).length == 1) {
                        $('div#attachment_upload').find('#attach_cancel_all, #attach_upload_all').css('display', 'inline-block');
                }
        });

to this:
                // Show the upload and cancel all buttons only if there is something to cancel/upload.
                if (myDropzone.getFilesWithStatus(Dropzone.ADDED).length == 1) {
                        $('div#attachment_upload').find('#attach_cancel_all, #attach_upload_all').css('display', 'inline-block');
                }

                (function(element){
                        setTimeout(function(){
                                element.find('.upload').click();
                        }, 100);
                })(_thisElement);
        });


Arantor

Think that'll only upload the first one if you drag and drop multiple files over it.

Advertisement: