Simple Machines Community Forum

We have all see a number of posts by a number of users (myself included) lamenting on the attachments system here.  It's very close... but needs a little help IMHO. 

First,  lets address the requirement to click UPLOAD or UPLOAD ALL.  This requirement is... from a user experience perspective... a pain in the backside.  Many of us have forgotten to click that damn upload button.  It's un-necessary.  If you select ONE file to upload... that file should upload.  If you select MULTIPLE files... they all should upload.  It's a simple interface that we've all be using for a long long time.  Adding the requirement to click that UPLOAD or UPLOAD ALL is unnecessary and confusing.

Now,  the next issue with the attachments user experience is the vast amount of "real estate" the system takes up down bottom.  Add 8 images and you will see what I mean.  At 5 images (for me,  you have to start scrolling... through just the attachments you're adding... how ridiculously obtuse).  Simply going from a single column to two columns reduces this ridiculousness by 100 fold IMHO...

(This is a quick photoshop mockup... please ignore the "same attachment" repeated... you get the idea)

You cannot view this attachment.

Can this happen?  Can we get a NO UPLOAD BUTTON and improved interface mod to greatly improve the user experience?!?  I'd PAY MONEY!  :D

Since it's my thread... why not talk about the padding within each of the attachment cells.

With a slight tweak,  you can fit 10 attachments in less space than 4 attachments currently fit.

You cannot view this attachment.

Yes, the amount of padding is bonkers at the moment. I mentioned that somewhere else.

https://www.simplemachines.org/community/index.php?topic=581261.msg4114628

the attachments  system is very messy

Just noticed that if you are drag/dropping images one at a time, you have to constantly chase the drop box down the page because it is underneath everything else. Clever. :P

(Yes, can fix...)

Should not be a mod, should be fixed in core.

It's unlikely to be fixed in core until 2.2 at this point.

Quote from: Sir Osis of Liver on May 19, 2022, 05:46:20 PMShould not be a mod, should be fixed in core.

Agreed... but I'll take what I can get.

:)

Ok, this is a roughed-out "improvement" based on simple template, CSS and js tweaks.

The js tweak is just changing  .show() to .css('display', 'flex'). IOW, show it as flex instead of the default block.

Template changes are basically just changing the order of stuff, so you don't have to chase new attachments down the page.

CSS is (frankly) a bit wilder than it would need to be if someone rewrote the order that js adds new things, but I can't get my brain around that at the moment. :P So, I cheated a bit with large CSS hammers. :D

Anyway, the copper.jg (copper tubes pic) is the last one uploaded. The green emerald pic was the first one uploaded. IOW, you don't have to go looking to see if you got your latest one done. It's always (visually) the first one in the previews.

Rearranged button order too, and made the "upload/upload all" buttons have bold text.

This is all functional code, but I haven't gone looking at responsive or different file types yet. Can't see those being an issue.

ETA: Oh yes, one thing that would make sense is to change the message about upload limits. At the moment it tells you the allowed total, and the amount you have taken up so far.

This is not optimal. It would make more sense to tell you the allowed total, and the amount you had left. This would save people having to do mental arithmetic when deciding what to attach next. :P

Should be an easy tweak to the text string in languages/Post.english.php.
$txt['attach_max_size_progress'] = 'The current total attachment size allowed per post is {currentTotal} KB. The total amount of the selected files is {currentRemain} KB.';
So that needs to be (more or less):
$txt['attach_max_size_progress'] = 'Total attachment size allowed per post is {currentTotal} KB. You can still attach ({currentTotal} - {currentRemain}) KB of extra files.';
It seems there may be a Sources bug here. Offhand it does not seem right that {currentRemain} is returning a value for (effectively) {currentUploaded}. Seems like bad naming of the variable to me.

Anyway, Im sure it's not hard to fix.

Gave it a bit more thought. Figure if the idea is to make things more compact, it's a bit silly having notifications sitting outside the drag/drop box. Might as well save space by using the box to hold most of the text, and use the text to make the box a bigger target.

Apart from that, gave it a bit more of a clean-up. The different states of the previews now have different icons, so you can tell even if you are colour blind. Since the inputs for height and width don't do anything once the post has been saved, they are hidden once they become pointless.

The most recent attachments are still at the top, so you don't have to chase them. They obviously all stack straight down the page on a phone (got the responsive done). I think these are all generally good ideas.

Have not attempted to fix the "Upload" button thing yet, but at least the "Upload all" is obvious and easily accessible, so that in itself should reduce the issues. It can easily be made more obvious. Making it work without an upload button is obviously possible though.

Exciting times!   Looking QUITE nice!!!

Made it a bit cleaner. I think that will do me for today. :)

Ok, solved this issue:

Quote from: Antechinus on May 19, 2022, 07:20:34 PMETA: Oh yes, one thing that would make sense is to change the message about upload limits. At the moment it tells you the allowed total, and the amount you have taken up so far.

This is not optimal. It would make more sense to tell you the allowed total, and the amount you had left. This would save people having to do mental arithmetic when deciding what to attach next. :P

It turned out to require another minor edit of the javascript, but it works nicely now. :)

So how does it work exactly? Looking at #9_Wotcha... and the ticked attachments on the green background, have they been uploaded/inserted at this stage? What's the next thing the user has to do?

Yes, they have been uploaded (otherwise they would have the grey background, and no icon, as per https://www.simplemachines.org/community/index.php?action=dlattach;attach=281571;image).

They may or may not have been inserted (that's up to the user). But, they and the post have been saved, which is why they have a green background and a tick icon.

If they had been uploaded, but the post had not yet been saved, they would have an orange background and a different (!) icon (as per https://www.simplemachines.org/community/index.php?action=dlattach;attach=281573;image).

Thanks for the explanation. This layout is certainly an improvement. However, it does rely on the user knowing the process in advance, what the colours and symbols mean etc.
Is it possible to add text or design it so that the process is completely self explanatory? 

The challenge is that there are a number of similar sounding steps

• Add the file - Most users will get started OK, but not clearly understand what 'adding' means in this context. (Maybe it should be 'select'?)
• Upload - Do I need to 'upload' as well as 'add'? If so, when to click the upload button? ...now, after adding? Or at the end when I've finished the text?
• Insert - What does this mean? Do I need to 'insert' as well as 'upload' as well as 'add'? We all know that 2.1 offers inline attachments, but new users don't. They've never heard of "inline attachments".

It's all this forum-speak terminology that confuses users. Preferably, the attachment window would either explain the process, or guide them through it step by step so they can't miss.

Bear in mind that at this stage I have not attempted to rewrite all the back end shiz so that things work without an upload button. Wouldn't know how, at the moment. At this stage I'm just trying to get what is there presented as sanely as possible, in the hope that this will improve usability while we're waiting for someone to rewrite the whole shebang (and the presentation ideas will still be transferable then).

Quote from: davo88 on May 20, 2022, 09:13:21 PMThanks for the explanation. This layout is certainly an improvement. However, it does rely on the user knowing the process in advance, what the colours and symbols mean etc.

Can't see why that would be the case. If they drag/drop a file, or use the button to grab one, it appears with the grey background and no icon. It does this whether they have used it before, or not. The "Upload" and "Upload all" buttons are in bold text, and the former only appears in the preview of attachments that have not yet been uploaded. Seems pretty obvious to me (it's not something I would feel I needed an explanation for) but I can make the buttons flash and add dancing banana gifs to them if necessary.

So then they will presumably hit one of them there buttons, at which point the background will change and the upload button will vanish. This means the attachment is now on the server, which frankly should be obvious, given they will know they have just clicked an upload button. It doesn't have a green background yet, just to warn you that you have not actually saved the post (seemed like a good idea to me, but does not directly affect any process).

Green ones are ones that have already been saved last time you saved the post, and you don't have to do anything else with. But if you think having the orange background at the intermediate stage is confusing, that can easily be changed. I can make them any colour that works. For example, they could be orange when they have been dropped in the box, then turn green when uploaded, then default to grey for old ones that were saved last time. Whatever works.

QuoteIs it possible to add text or design it so that the process is completely self explanatory?

To who? Quite honestly, I find the default 2.1 interface self-explanatory, but I think the presentation could be significantly improved. I'm not sure it is possible to make anything self-explanatory to everyone. I assume you're familiar with "build a better idiot".

QuoteThe challenge is that there are a number of similar sounding steps

• Add the file - Most users will get started OK, but not clearly understand what 'adding' means in this context. (Maybe it should be 'select'?)
• Upload - Do I need to 'upload' as well as 'add'? If so, when to click the upload button? ...now, after adding? Or at the end when I've finished the text?
• Insert - What does this mean? Do I need to 'insert' as well as 'upload' as well as 'add'? We all know that 2.1 offers inline attachments, but new users don't. They've never heard of "inline attachments".

1/ Surely most people are familiar with "adding" attachments to emails these days, or to something else. It's pretty clear English, but you can use any word you like (language strings are editable in admin). Personally I'm not sure "select" would be a improvement (because you can "select" something without doing anything with it) but this may be personal preference.

2/ Are people really this helpless? I mean in the real world, not just hypothetically. What does uploading anything have to do with writing text? They are separate operations. Always have been, on any platform that I am aware of.

3/ Well no, you do not need to insert the file if you do not want it inserted in the post body text. But that's too much text for one button. That would require a help link of some sort.

QuoteIt's all this forum-speak terminology that confuses users. Preferably, the attachment window would either explain the process, or guide them through it step by step so they can't miss.

That's what help pages are for. You are not going to want a complete instruction manual in your face, particularly on a phone, after you have read it the first time. But maybe some help links would be a good idea.

Green is pretty much standard for Go/Yes/Affirmative/Etc.

Red is pretty much standard for Stop/No/Negative/Etc.

A green checkmark is pretty much standard for Go/Yes/Affirmative/ETc.

A red cross is pretty much standard for Stop/No/Negative/Etc.

Now,  when you add both visual stimuli ... Green box + Green Checkmark or Red box + Red Checkmark it baffles the mind as to exactly what level of intellect would be confused at this point.

There has gotta be more to it.  No?

Quote from: AntechinusBear in mind that at this stage I have not attempted to rewrite all the back end shiz so that things work without an upload button.

Absolutely... and I appreciate all the time and skill you are putting in to this issue. So thanks for that.

My comments are probably not really suited to this topic because we're discussing a mod here. I'm thinking more about both the UI and the underlying supporting code.
But anyway...

The 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.
My forum is more towards the older end of the spectrum. They are nuts and bolts people, used to handling three dimensional objects, experts at getting old machines working.
Unlike us, they spend a tiny amount of their lives with their hands on a keyboard looking at screens.
Yet these are the people we want to contribute to our forums - they know stuff! Whether it's machines, gardening, religion, fishing, travel, cooking or marsupials - they are good at those things because that's where they spend their time.

Maybe it would be beneficial to look around and see how other platforms solve the problem before putting in a lot of effort in any one direction.

So a couple of things to look at...
Starting with a really, simple UI from Ebay.

You cannot view this attachment.
From the top...

• The wording says "Add photos" (not a button or link) - just a very simple, clear description of what happens here.
• The X in the top RH corner of each image is good for a delete button.
• The + sign enclosed in an empty, dash bordered box - a clear indication of where to add more photos.
• So you just add and delete until you are happy, then Send. Any user can figure that interface out.
• Style? It has none. Nothing fancy here. But hell it's effective.

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

You cannot view this attachment.
Then once you start adding...

• The Add files button both adds and uploads
• The attachment list is compact
• They use the phrase "Place inline" - probably better than just "insert", but it could be improved.
• 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.

You cannot view this attachment.
Preview looks like this...

You cannot view this attachment.
I didn't experiment much further. But definitely worth trying out.

Xenforo starts like this...

You cannot view this attachment.
After the first file, an "Insert..." option overlay appears and a trashcan to delete.

You cannot view this attachment.
Adding a second file and mousing over the "Insert..." of the first file, produces further options - thumbnail or full image - nifty.

You cannot view this attachment.
Choosing thumbnail inserts and previews it.

You cannot view this attachment.
So some good ideas there - also worth looking at.

Discourse doesn't have a separate attachment UI.

You cannot view this attachment.
You just drag and drop the images where you want them.

You cannot view this attachment.

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

@davo88 would you also like comparison screenshots from MyBB, Flarum, IPS and Woltlab? I have instances of those to hand if it would be helpful.

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.

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?

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

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


;)

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.

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.

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

Quote from: Antechinus on May 22, 2022, 04:52:48 PMcan get tricked sometimes

It gets tricked even when you're using it correctly.

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

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.

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.

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.

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']))



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

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

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

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.

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);
        });


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

Oh boy... we're still talking about Drag/Drop.   Am i just old in that I never use that method?   

Wait... don't answer that.

:D

Drag and drop is useful if you're doing multiple at once. I'm also not sure offhand if trying to add multiple files through the selector won't *also* trigger that branch seeing how I'm on an iPad right now and not in front of the actual code.

I am confused. (this is obvious!  never mind the rabble prior to this edit)

I just tested the edit... IT WORKS!  Multiple files too... both by selecting and by drag and drop!  IT WORKS!!!!



EDIT: Updated link works.

Neat, that's genuinely unexpected from the code. Good job @Karmaster - it's certainly something @Antechinus was noodling with.

That video was pretty crappy.  I've put the edit through the paces and it seems to work ... is it's supposed to.  I've tried to "break" it every which way (different file types, deleting then adding, etc... etc... etc...)... it just works.  I think in conjunction with Antechinus's CSS mastery the improvement will be stark.  The way things work now,  that first screen for each attachment could essentially just be the progress bar (though I guess keeping the cancel button makes sense if one accidently chooses the wrong "very large" attachment?)...

Here is a much better video of how things work...

Note... if you leave your message body empty and attempt to attach,  you will get one successful attachment but then it "errors out" and you get the error up top. (Which I do believe is "normal" behavior).

After reviewing all the platforms mentioned here (https://www.simplemachines.org/community/index.php?msg=4125901) and here (https://www.simplemachines.org/community/index.php?msg=4125992) above, below is a summary of what I learnt and suggestion for a way forward.

Summary
At one end of the scale we have retail platforms (eg Ebay) whose UI's are

• Very easy to understand
• Fast and efficient to operate
• Maximum economy of screen real estate
• Minimum (or zero) control over size and positioning of the attachment

You cannot view this attachment.

At the other end of the scale, we have SMF2.1 which offers

• Maximum, even surgical, level of control over size and positioning
• Cumbersome and slow to operate
• Expansive use of screen real estate requiring lots of scrolling
• Challenging to use, even for many experienced users

You cannot view this attachment.

In the middle of this range, we have UI's like WoltLab and Xenforo which strike a balance between simplicity and complexity. They offer compact UI's with some controls, but lack the ability to exactly size your image, grab the code and place it where you want it as SMF2.1 does.

WoltLab

You cannot view this attachment.


Xenforo

You cannot view this attachment.

A way forward
This suggestion assumes we have solved the problem of combining the Add and Upload functions into a single Add operation. It seeks to retain the all the power of SMF2.1, but simplify the UI to look more like a retail interface - compact, fast and easy to operate.

The surgical level controls are made available through a link associated with each image. This link clearly indicates these controls are optional. This is really important. The novice user needs to quickly understand that once files are added, no more is required except for 'Post. The post will be successful. The optional controls are not required for success and can be left alone.

Power users will naturally sniff out the extra features available and use them to make more precise attachments as they wish.

What does this look like?
For compactness and efficiency, we line them up across the page

You cannot view this attachment.

Then we add just two controls at surface level - Delete and Options.

The delete control could just be an X in the corner of the thumbnail. If that can't be done, a button preferably underneath, or to the side. But once we start adding controls sideways, we lose screen real estate and a certain level of intuitiveness that happens when controls are overlaid or underneath.

You cannot view this attachment.

This options control could be similarly overlaid on the thumbnail, or a button underneath, or to the side.
It could be presented using

• A hamburger menu You cannot view this attachment.
• Three vertical dot context menuYou cannot view this attachment.

• Or just the word "Options".

You cannot view this attachment.

The important thing is that it says to the user, "you don't need to use this for a successful attachment".

What happens when the options link is clicked? I don't know. Designing that probably requires knowledge of presentation on mobile devices. Maybe the options are more limited on a mobile device since the user is operating it by fingertip?

So the finished file queue looks something like this.

You cannot view this attachment.

So this suggestion has focused on the heart of the UI - the file queue and user controls for each image 
Of course we have other elements to consider like the size of the drop zone, upload limits,  progress info and wording. But once we get the file queue worked out, the other elements can be built around it.

I vote for Ant's CSS + the upload button free code above = WIN WIN WIN!

:D

That said,  I think it could be possible to get 3 columns instead of 2 ... but that's just me taking a mile when given an inch.

;)

EDIT:

Questions.... when looking at Ants latest version.

(A) What do we need the BBC code line for?  Does anyone actually use that rather than simply clicking... insert?  Seems the insert button relegated that line to nearly being useless,  no?

(B) Could we go to 3 or even 4 columns by removing the BBC line,  moving the DELETE and INSERT to under the thumbnail (which should be reduced slightly in max size IMHO)... then moving the name of the file as an overlay on the thumbnail or maybe above the thumbnail... leaving a line below for manual dimensions.

(C) I could just be quiet and be very happy with whatever comes down channel...

;)

Quote from: Karmaster on May 24, 2022, 09:30:18 AMA bit of Javascript and I managed to remove that stupid "UPLOAD" button.

Inside "Themes/default/scripts/smf_fileUpload.js" file, change code from:

Code Select Expand

                // 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:

Code Select Expand

                // 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);
        });

Excellent. Works perfectly on FF/W10. Haven't tested on anything else yet.

I was just saying to Arantor last night that the "Upload all" button, which was what was necessary (at a minimum) for the original GUI to be worth using, was not even functional on my test site. Clicking it did nothing at all, which I would call a pretty major bug. Now it's not necessary, so no problem.

This will allow getting rid of a lot of other crud too. Half the default js is for dealing with elements that will not be required now. :)

I'm on Chrome/W10 and works great here.

Is it necessary to have a thumbnail when image is inserted?

The image isn't always inserted... so,  yeah.

:)

Quote from: FrizzleFried on May 24, 2022, 04:57:54 PMThat said,  I think it could be possible to get 3 columns instead of 2 ... but that's just me taking a mile when given an inch.

Can be done easily enough, when the screen is wide enough, but I'm inclined to think 2 columns might be best as default.

QuoteQuestions.... when looking at Ants latest version.

(A) What do we need the BBC code line for?  Does anyone actually use that rather than simply clicking... insert?  Seems the insert button relegated that line to nearly being useless,  no?

(B) Could we go to 3 or even 4 columns by removing the BBC line,  moving the DELETE and INSERT to under the thumbnail (which should be reduced slightly in max size IMHO)... then moving the name of the file as an overlay on the thumbnail or maybe above the thumbnail... leaving a line below for manual dimensions.

(C) I could just be quiet and be very happy with whatever comes down channel...

(A) Had been wondering about that myself. AFAICT there would only be any point in using the BBC size under two conditions:

    1/ You want to float the image next to text content, in which case you would just use the float tag anyway, and the image would adapt to fit whatever width you set on that.

    2/ If setting a BBC size on the image actually created a smaller image, that would load faster (which it does not do).

Other than that, there is only one other case I can think of: if you had a custom BBC tag (which I have been thinking of making) that sets a flexbox div to hold your images, so they can stack side by side in the post until the screen width gets down to a certain point (ie: where the images would be getting too small to be useful so you would change the presentation via media query). But even in this case it can be done via the flex tag's CSS, so no need to set a size on the image itself.

(B) You end up with less width, but more height. Is this actually useful in terms of presentation?

(C) Never going to happen. :D

Incidentally, I'm getting a javascript error with that new "instant upload " code:
Uncaught Error: This file can't be queued because it has already been processed or was rejected.
    value http://127.0.0.1/SMF_21x/Themes/default/scripts/dropzone.min.js?smf211_1653427053:1
    smf_fileUpload http://127.0.0.1/SMF_21x/Themes/default/scripts/smf_fileUpload.js?smf211_1653427053:274
    jQuery 8
        dispatch
        handle
        trigger
        trigger
        each
        each
        trigger
        n
    smf_fileUpload http://127.0.0.1/SMF_21x/Themes/default/scripts/smf_fileUpload.js?smf211_1653427053:288

It still uploads files, but fixing the error would be good anyway. The error is coming from dropzone.min.js, and it's throwing a handful of errors for every upload.

ETA: Correction. It's throwing the errors on page reload, or page open. This is what happens as soon as I go to edit a post which already has attachments:

Uncaught Error: This file can't be queued because it has already been processed or was rejected.
    value http://127.0.0.1/SMF_21x/Themes/default/scripts/dropzone.min.js?smf211_1653427053:1
    smf_fileUpload http://127.0.0.1/SMF_21x/Themes/default/scripts/smf_fileUpload.js?smf211_1653427053:274
    jQuery 8
        dispatch
        handle
        trigger
        trigger
        each
        each
        trigger
        n
    smf_fileUpload http://127.0.0.1/SMF_21x/Themes/default/scripts/smf_fileUpload.js?smf211_1653427053:288
    setTimeout handler*smf_fileUpload/</< http://127.0.0.1/SMF_21x/Themes/default/scripts/smf_fileUpload.js?smf211_1653427053:287
    smf_fileUpload http://127.0.0.1/SMF_21x/Themes/default/scripts/smf_fileUpload.js?smf211_1653427053:290
    value http://127.0.0.1/SMF_21x/Themes/default/scripts/dropzone.min.js?smf211_1653427053:1
    smf_fileUpload http://127.0.0.1/SMF_21x/Themes/default/scripts/smf_fileUpload.js?smf211_1653427053:545
    each jQuery
    smf_fileUpload http://127.0.0.1/SMF_21x/Themes/default/scripts/smf_fileUpload.js?smf211_1653427053:536
    <anonymous> http://127.0.0.1/SMF_21x/index.php?action=post;msg=114;topic=3.36:1170
    jQuery 11
        e
        t
        setTimeout handler*Deferred/then/l/<
        c
        add
        then
        Deferred
        then
        ready
        init
        S
    <anonymous> http://127.0.0.1/SMF_21x/index.php?action=post;msg=114;topic=3.36:1169
    EventListener.handleEvent* http://127.0.0.1/SMF_21x/index.php?action=post;msg=114;topic=3.36:1148
6 dropzone.min.js:1:24635
    value http://127.0.0.1/SMF_21x/Themes/default/scripts/dropzone.min.js?smf211_1653427053:1
    smf_fileUpload http://127.0.0.1/SMF_21x/Themes/default/scripts/smf_fileUpload.js?smf211_1653427053:274
    jQuery 8
        dispatch
        handle
        trigger
        trigger
        each
        each
        trigger
        n
    smf_fileUpload http://127.0.0.1/SMF_21x/Themes/default/scripts/smf_fileUpload.js?smf211_1653427053:288
    (Async: setTimeout handler)
    smf_fileUpload http://127.0.0.1/SMF_21x/Themes/default/scripts/smf_fileUpload.js?smf211_1653427053:287
    smf_fileUpload http://127.0.0.1/SMF_21x/Themes/default/scripts/smf_fileUpload.js?smf211_1653427053:290
    value http://127.0.0.1/SMF_21x/Themes/default/scripts/dropzone.min.js?smf211_1653427053:1
    smf_fileUpload http://127.0.0.1/SMF_21x/Themes/default/scripts/smf_fileUpload.js?smf211_1653427053:545
    each jQuery
    smf_fileUpload http://127.0.0.1/SMF_21x/Themes/default/scripts/smf_fileUpload.js?smf211_1653427053:536
    <anonymous> http://127.0.0.1/SMF_21x/index.php?action=post;msg=114;topic=3.36:1170
    jQuery 11
        e
        t
        (Async: setTimeout handler)
    l
        c
        add
        then
        Deferred
        then
        ready
        init
        S
    <anonymous> http://127.0.0.1/SMF_21x/index.php?action=post;msg=114;topic=3.36:1169
    (Async: EventListener.handleEvent)
    <anonymous> http://127.0.0.1/SMF_21x/index.php?action=post;msg=114;topic=3.36:1148

1

Which, to be frank, is quite a spectacular result simply for opening the edit page. :P

ETA2: Ok, this only happens when going to edit a post which has existing attachements, and it happens once for each attachment when you open the full edit page.

There are no further errors when adding or deleting extra attachments. All of that seems to be fine. It just needs code to tell it to not try and process attachments which are already there. :P

Quote from: FrizzleFried on May 24, 2022, 05:45:27 PMThe image isn't always inserted... so,  yeah.

Well, no, if image is inserted thumb isn't needed, you'd only want thumb if it's not inserted.

I'm not seeing any forum or server errors with that code.

You won't see it in the forum error log, or the server. It's a javascript error. Look in your document inspector. :P

Basically, it's spitting its dummy for every existing attachment.

Also note that the thumbnail is *going* to be generated whether you like it or not for any attachment that is an image where it is larger than the thumbnail size. And there are plenty of times you won't want to insert the full version into the post itself.

Oh for a lightbox.

Quote from: Arantor on May 24, 2022, 06:10:06 PMAnd there are plenty of times you won't want to insert the full version into the post itself.

I just tried to think of some, and couldn't, unless you are thinking of code to actually generate a smaller image to save on load time, which the existing BBC size doesn't do anyway. Anything else can be dealt with via the float tag or a flexbox tag, AFAICT.

But yeah, a lightbox could be good too (and I know where I can get one).

I've stripped everything off that's not functional, looks like this -


Wow, using core version is really bad.  Also locked editor for some reason on this post.

I have this...

Quote from: Antechinus on May 24, 2022, 05:56:00 PM(B) You end up with less width, but more height. Is this actually useful in terms of presentation?

(C) Never going to happen. :D

(B) If you sacrifice a little height in the name of more columns then the answer is yes... but if you stick to two columns,  then nope,  not at all.  Honestly... I'm perfectly happy with whatever you go with.

(C) Damn... I'm much too transparent. ;)

Hmm. The "no upload button" code also spews errors for every file over the allowed number of attachments (if you try to upload too many, which people will do). Similar cause: trying to reprocess things that have already been processed.

Uncaught Error: This file can't be queued because it has already been processed or was rejected.
    value http://127.0.0.1/SMF_21x/Themes/default/scripts/dropzone.min.js?smf211_1653427053:1
    smf_fileUpload http://127.0.0.1/SMF_21x/Themes/default/scripts/smf_fileUpload.js?smf211_1653427053:274
    jQuery 8
        dispatch
        handle
        trigger
        trigger
        each
        each
        trigger
        n
    smf_fileUpload http://127.0.0.1/SMF_21x/Themes/default/scripts/smf_fileUpload.js?smf211_1653427053:288
    setTimeout handler*smf_fileUpload/</< http://127.0.0.1/SMF_21x/Themes/default/scripts/smf_fileUpload.js?smf211_1653427053:287
    smf_fileUpload http://127.0.0.1/SMF_21x/Themes/default/scripts/smf_fileUpload.js?smf211_1653427053:290
    value http://127.0.0.1/SMF_21x/Themes/default/scripts/dropzone.min.js?smf211_1653427053:1
    value http://127.0.0.1/SMF_21x/Themes/default/scripts/dropzone.min.js?smf211_1653427053:1
    value http://127.0.0.1/SMF_21x/Themes/default/scripts/dropzone.min.js?smf211_1653427053:1
    value http://127.0.0.1/SMF_21x/Themes/default/scripts/dropzone.min.js?smf211_1653427053:1
    value http://127.0.0.1/SMF_21x/Themes/default/scripts/dropzone.min.js?smf211_1653427053:1
    drop http://127.0.0.1/SMF_21x/Themes/default/scripts/dropzone.min.js?smf211_1653427053:1
    value http://127.0.0.1/SMF_21x/Themes/default/scripts/dropzone.min.js?smf211_1653427053:1
    value http://127.0.0.1/SMF_21x/Themes/default/scripts/dropzone.min.js?smf211_1653427053:1
    value http://127.0.0.1/SMF_21x/Themes/default/scripts/dropzone.min.js?smf211_1653427053:1
    value http://127.0.0.1/SMF_21x/Themes/default/scripts/dropzone.min.js?smf211_1653427053:1
    value http://127.0.0.1/SMF_21x/Themes/default/scripts/dropzone.min.js?smf211_1653427053:1
    b http://127.0.0.1/SMF_21x/Themes/default/scripts/dropzone.min.js?smf211_1653427053:1
    smf_fileUpload http://127.0.0.1/SMF_21x/Themes/default/scripts/smf_fileUpload.js?smf211_1653427053:133
    <anonymous> http://127.0.0.1/SMF_21x/index.php?action=post;msg=114;topic=3.36:1170
    jQuery 11
        e
        t
        setTimeout handler*Deferred/then/l/<
        c
        add
        then
        Deferred
        then
        ready
        init
        S
    <anonymous> http://127.0.0.1/SMF_21x/index.php?action=post;msg=114;topic=3.36:1169
    EventListener.handleEvent* http://127.0.0.1/SMF_21x/index.php?action=post;msg=114;topic=3.36:1148
4 dropzone.min.js:1:24635
    value http://127.0.0.1/SMF_21x/Themes/default/scripts/dropzone.min.js?smf211_1653427053:1
    smf_fileUpload http://127.0.0.1/SMF_21x/Themes/default/scripts/smf_fileUpload.js?smf211_1653427053:274
    jQuery 8
    smf_fileUpload http://127.0.0.1/SMF_21x/Themes/default/scripts/smf_fileUpload.js?smf211_1653427053:288
    (Async: setTimeout handler)
    smf_fileUpload http://127.0.0.1/SMF_21x/Themes/default/scripts/smf_fileUpload.js?smf211_1653427053:287
    smf_fileUpload http://127.0.0.1/SMF_21x/Themes/default/scripts/smf_fileUpload.js?smf211_1653427053:290
    value http://127.0.0.1/SMF_21x/Themes/default/scripts/dropzone.min.js?smf211_1653427053:1
    value http://127.0.0.1/SMF_21x/Themes/default/scripts/dropzone.min.js?smf211_1653427053:1
    value http://127.0.0.1/SMF_21x/Themes/default/scripts/dropzone.min.js?smf211_1653427053:1
    value http://127.0.0.1/SMF_21x/Themes/default/scripts/dropzone.min.js?smf211_1653427053:1
    value http://127.0.0.1/SMF_21x/Themes/default/scripts/dropzone.min.js?smf211_1653427053:1
    drop http://127.0.0.1/SMF_21x/Themes/default/scripts/dropzone.min.js?smf211_1653427053:1
    (Async: EventListener.handleEvent)
    value http://127.0.0.1/SMF_21x/Themes/default/scripts/dropzone.min.js?smf211_1653427053:1
    value http://127.0.0.1/SMF_21x/Themes/default/scripts/dropzone.min.js?smf211_1653427053:1
    map self-hosted:180
    value http://127.0.0.1/SMF_21x/Themes/default/scripts/dropzone.min.js?smf211_1653427053:1
    value http://127.0.0.1/SMF_21x/Themes/default/scripts/dropzone.min.js?smf211_1653427053:1
    value http://127.0.0.1/SMF_21x/Themes/default/scripts/dropzone.min.js?smf211_1653427053:1
    b http://127.0.0.1/SMF_21x/Themes/default/scripts/dropzone.min.js?smf211_1653427053:1
    smf_fileUpload http://127.0.0.1/SMF_21x/Themes/default/scripts/smf_fileUpload.js?smf211_1653427053:133
    <anonymous> http://127.0.0.1/SMF_21x/index.php?action=post;msg=114;topic=3.36:1170
    jQuery 11
    <anonymous> http://127.0.0.1/SMF_21x/index.php?action=post;msg=114;topic=3.36:1169
    (Async: EventListener.handleEvent)
    <anonymous> http://127.0.0.1/SMF_21x/index.php?action=post;msg=114;topic=3.36:1148

My Cheerios are starting to taste a little funny...

 :-\

I'm finding something odd on my test site too. If the post has existing attachments, with (for example) 1.5 meg left until the total byte limit, and I up a file which is  bigger than the remaining limit but less than the total limit, it is accepted and it uploads just fine.

Test: total limit is set to 1,920 kB. Remaining space (with 6 previous attachments) is 1,514 kb. If I drag/drop a 1,810 kb image, it is accepted.

So, the total size limit is being fooled. :P Not sure if this is due to the new code, or is default behaviour (will check).

Hmm, likely I'm doing it wrong, but not seeing any errors in FF inspector console.

May be related to this -

https://www.simplemachines.org/community/index.php?topic=582435.msg4125993#msg4125993

Not sure. Although I have seen that other error too, occasionally.

Quote from: Sir Osis of Liver on May 24, 2022, 06:50:19 PMHmm, likely I'm doing it wrong, but not seeing any errors in FF inspector console.

How are you testing it? Are you going to the full edit page, with a post that already has attachments?

Seeing them now when modifying post that includes attachments.  Errors don't seem to affect performance, works fine.  Should be just a matter of tweaking the code to clean it up.

Agreed, but it does need cleaning up, otherwise it's just more crap to deal with when trying to track down errors.

Especially as the errors can break other things if you're unlucky.

Quote from: davo88 on May 24, 2022, 04:51:54 PMWhat does this look like?
For compactness and efficiency, we line them up across the page

You cannot view this attachment.

Then we add just two controls at surface level - Delete and Options.

Good ideas in general, but you're only thinking of pictures. People are going to upload other things as well, and in those cases the file name will need to be displayed, along with the file type, so they know what they have attached (and where to insert it in the post, if they want to do that). It's not all about minimal displays of holiday snaps. ;)

Also, even if we are only talking about pictures, I can see cases where someone might want to upload two slight variations on the same shot. An example would be an image processing thread, to demonstrate the results of different settings. In a case like that you will also want the file name and file size displayed.

Quote from: Arantor on May 24, 2022, 07:35:07 PMEspecially as the errors can break other things if you're unlucky.

Well, fix it.  I'm nothing if not unlucky. :(

Ok, I think I know (in rough general terms) what is going on. The new code is part of this whopping function:
$.extend(true, dOptions, oOptions);

var myDropzone = new Dropzone('div#attachment_upload', dOptions);

myDropzone.on('addedfile', function (file) {

_thisElement = $(file.previewElement);

// If the attachment is an image and has a thumbnail, show it. Otherwise fallback to the generic thumbfile.
if (!file.type.match(/image.*/)) {
myDropzone.emit('thumbnail', file, smf_images_url + '/generic_attach.png');
}

Etc, etc...
Which seems to be just looking for anything that may have been droped into the dropbox, and/or anything that is already attached to the post.

So, my guess is when you chuck this on the end:
(function(element){
setTimeout(function(){
element.find('.upload').click();
}, 100);
})(_thisElement);
It tries to upload the existing attachments all over again, which causes the errors. So it needs a way of telling it to "Look for any new ones, but FFS leave existing ones alone!".

Which I suspect is not that hard to arrange (for anyone who knows what they are doing with javascript/jQuery).

Yay! Nailed it. :D All it needs is this:

// Nifty auto upload. Yay!
// Seems to run without bugs.
// Needs more checking: Android, Chrome, etc.
if (file.accepted !== true) {
(function(element){
setTimeout(function(){
element.find('.upload').click();
}, 100);
})(_thisElement);
}
});
That stops it hammering already existing attachments. Will need testing on things other than W10, but is looking good so far. :)

Ok was still buggy. This is better:

// Nifty auto upload. Yay!
// Seems to run without bugs.
// Needs more checking: Android, Chrome, etc.
filesLimit = (myDropzone.options.maxFileAmount - myDropzone.getAcceptedFiles().length);

if (file.accepted !== true || filesLimit > 0) {
(function(element){
setTimeout(function(){
element.find('.upload').click();
}, 1000);
})(_thisElement);
}
});
Added an extra condition, to check the number of files dropped vs number allowed. Also, increased the timeout function delay to 1000 ms.

Testing on local, if I dropped a bunch of files over the total limit (ie: 10, instead of the limit of 8 ) it was still throwing the error for the excess 2 files (because they had not been accepted, due to being over the limit).

However, if I increased the timeout to 1000 ms (still only one second) that seemed to give the server time to figure out that the others had been accepted first and the others were over the limit... BUT... this is a kludge that is dependent on response times from the server, so may break down out in the real world.

Still, as a kludge that works on local, it's pretty good. You don't really notice the one second timeout in practice. And it's only necessary if someone tries to dump an excessive number of files in one hit. Otherwise, no errors and problem.

Works for me FF99 Win 8.1.

People still use Windows 8? :o

Windows 10 / Chrome Version 101.0.4951.67


All works great.  Checking out the CONSOLE I am not seeing any errors popping up adding, deleting, deleting then adding, modifying posts, etc...

If there is a way to break it... I've not gotten to it.

Maybe I am not looking in the right tab or it works great!  :D

I just tried really hard to break things by uploading 24 images at once and then deleting then uploading etc... I never got an error.  I did,  however,  manage to get 5 images to show up on one post even though the maximum number of images is set for 4.  Is this is the same 'issue' Antechinus came across?

It's a variant of the one I posted where here for example it says you have 36 but attaching one means you have 19 left.

Basically the whole thing is busted and the *team* should be fixing it. Or at least acknowledging it so any work gets integrated.

@Sesquipedalian

Not holding my breath. :P  The insert preview bug on this site that was reported a week ago has still not been fixed.  Is anyone paying attention?

Some of us have other things to do in life from time to time. We are aware of the situation, and we'll interact when we have had time to assess it and deal with it. If that timeframe doesn't fit within the constraints of certain individuals' degree of patience, those individuals are cordially invited to take a long walk off a short dock.

Thank you for acknowledging that there is a fairly substantial problem here, with a core feature.

I tested with my sons ipad.  I really don't know how to to manipulate this device very well (I really don't do ios or android) but...

The good news is that the uploads auto-upload in both Chrome and Safari on his ipad (both single and multiple files).

I do not know if there are errors in the console as I have no idea how to access the console.

But they do work!

:D

Having been doing some pretty decent amount of testing on this auto-attachment upload...

I've determined that pressing INSERT on each is a slight annoyance as each time you click insert the browser pops up to the editor field (as is necessary to show placement, etc)...

Would it make sense to add an "INSERT ALL" option now somewhere that would do just that... insert all attachments one after another with perhaps a space between (or carriage return?)?

Carriage return? You're showing our age my friend.  :P

but then why do I know exactly what that is? (hello typewriter)

In my defense... carriage return was used in ASCII code,  DOS ...IIRC, and a few other places for the computer as well.  :)

I am old... but not THAT old...

;)

I'm old enough to remember dealing with carriage returns and newlines when programming stuff to be printed out to a physical printer.

I also know that Windows still mostly treats a 'line break' as being made up of 'a carriage return marker' (ASCII 13) followed by a 'new line marker' (ASCII 10).

But I'm kinda old.

Remember these?

You cannot view this attachment.

FORTRAN IV, back in the 60's. :P 

I remember those in the late '70's and early '80's. :P

Quote from: FrizzleFried on May 26, 2022, 08:26:42 AMI do not know if there are errors in the console as I have no idea how to access the console.

Standard mobile browsers generally don't have development tools (which is a nuisance).

Quote from: Sesquipedalian on May 26, 2022, 12:33:02 AMSome of us have other things to do in life from time to time. We are aware of the situation, and we'll interact when we have had time to assess it and deal with it. If that timeframe doesn't fit within the constraints of certain individuals' degree of patience, those individuals are cordially invited to take a long walk off a short dock.

No offense, Sesq, but if 2.1 had been managed properly over 10 years of development, we wouldn't be having this discussion.  As you have seen, other folks have stepped up since official release and offered several very good fixes for the more obvious hairballs.  That could have been done years ago, but it wasn't.  Whose fault is that?

Stop whining

Not whining, Kindred, just belaboring the obvious. ;)

There's no point escalating the ******ing at this stage. It won't help matters. He has said they will look at it as soon as they can.

Nope..  at this point it's whining.

I got told off by my wife the other day for the same thing.  If you keep harping on it, despite it being past, done and unalterable  -- then it's 100% whining.
Get over it. Move on.

BTW, about this:

Quote from: FrizzleFried on May 26, 2022, 10:42:08 AMWould it make sense to add an "INSERT ALL" option now somewhere that would do just that... insert all attachments one after another with perhaps a space between (or carriage return?)?

Could be done, but how many times would it be used in practice? People usually want to put specific images in specific places in a post. If you just want to upload the whole lot without caring where they go, there's hardly any point in inserting them. Might as well just leave them underneath the post, and people can click on any they want to see full size.

If you move the draft/preview/post buttons up under the editor text box, it's not nearly as annoying when insert returns to editor.  And unless you attach a lot of images to one post (don't think I've ever seen anyone on any forum attach more than 2-3), it's not much of a problem.  If you do need to post a dozen attachments, putting them in columns as Ant has done above makes it easier to use.

Which is why I moved the post/preview/draft buttons to that location, and put the "add moar" dropbox straight after them, and rearranged the attachment previews so the last one added is at the top. Means you don't need to chase things down the page when adding new ones (big UX fail of the default setup). You can see the "add moar" dropbox and the newest attachments right them where you want them.

Quote from: Antechinus on May 26, 2022, 05:35:25 PMBTW, about this:

Quote from: FrizzleFried on May 26, 2022, 10:42:08 AMWould it make sense to add an "INSERT ALL" option now somewhere that would do just that... insert all attachments one after another with perhaps a space between (or carriage return?)?

Could be done, but how many times would it be used in practice? People usually want to put specific images in specific places in a post. If you just want to upload the whole lot without caring where they go, there's hardly any point in inserting them. Might as well just leave them underneath the post, and people can click on any they want to see full size.

Probably true.  I was testing things out hence the reason I was doing that... I'm guessing that situation wouldn't come up all that often normally.

Oh... and when I get a chance to get my wifes phone from her,  I can test android... even though I absolutely loathe using it...

;)

I have an Android phone anyway, so you don't need to annoy your wife. I can make an online test site and flog Android to death with any available browser. :)

If you have Firefox, it has mobile emulations in Tools > Browser Tools > Responsive Design Mode.

Yes, but there's no substitute for testing on the real thing. All Firefox does is give you various presets that match the screen sizes of mobile devices. It's not an accurate full emulation.

Can't speak for the droids among us, but if you have a Mac you can plug in an iDevice to it and enable Developer mode for the console there.

You might, I don't remember (it's been a while), have to deal with the devil that is Xcode.

Quote from: Antechinus on May 26, 2022, 07:12:10 PMIt's not an accurate full emulation.

No, it's not, but it's useful if you don't have a phone.

I think this is far enough along functionally that we should decide on best format for attachments feature, there've been a lot of variants posted.  Then maybe it could be packaged as a mod, and eventually integrated into core.

I want to see what the team do with the existing coded before thinking about packaging a mod. Bear in mind that there are known bugs with attachment limits/counting, which are going to require some rewriting of the current code.

I removed that from ui.  Don't think it's necessary, and doesn't work anyway.

Some people are going to think that letting members know what the limits are is useful. It seems like the polite thing to do, IMO.

@FrizzleFried - Edited files, with current state of play on my local test site.

TBH I can't actually remember what all the edits were (have not done a full compare against vanilla files) but this lot should work if copy/pasted into a vanilla installation..

No worries... something to play with.  :D  Thanks.  I do look forward to what this ultimately ends up looking/working like.

:D

Quote from: Arantor on May 26, 2022, 02:54:05 PMBut I'm kinda old.

Says the guy in his forties.  :P

But I digress ...

Strange... this is the first time I've come across a post such as this where that statement doesn't apply.  I turned 50 a couple months ago...

That makes you the young'n in this discussion... :P

I'll take it where I can get it these days.  50 with a 12 year old boy.  He keeps me young... and tired.

Quote from: Steve on May 27, 2022, 09:12:44 AM

Quote from: Arantor on May 26, 2022, 02:54:05 PMBut I'm kinda old.

Says the guy in his forties.  :P

But I digress ...

I'm 38. But in web developer terms that makes me at least 80 years old, in no small part because I don't embrace the modern development approaches.

Sorry about making you older than you are @Arantor  :P

And most everyone here is a young'n compared to me.  ;D

You are as old as you feel.  Some days I feel 70... others 35.  :)

I am absolutely in the "old man, get off my lawn phase of life".

It also lends itself to having opinions about the pace and priority things should be looked at, and in particular some perhaps older-fashioned views of taking responsibility for things.

Quote from: Arantor on May 26, 2022, 03:19:29 AMThank you for acknowledging that there is a fairly substantial problem here, with a core feature.

??? This was acknowledged days ago (https://www.simplemachines.org/community/index.php?msg=4126240). I'm not sure what you are getting at here. If it is something relevant to fixing the problem, please elaborate. Otherwise, um... ???

I think that may be a different issue ... at least it presents itself differently.

Quote from: Sesquipedalian on May 27, 2022, 11:48:37 AMThis was acknowledged

So there are multiple issues here.

1. The issue you linked relates to id shuffling with attachments.
2. The number of reported attachments 'left' is routinely wrong; e.g. this site says 36 attachments quota, but uploading 1 item leaves me with it saying 19 left.
3. It's possible to post files over the quota in a single post as long as each individual file is below its own quota.
4. This thread is a demonstration of how confusing and unintuitive the user interface is for attachments.

My comment about acknowledgement was a reflection that I thought the team understood how angry the new UI has made people, to the fact that there are multiple threads trying to fix it and make it less unintuitive, even to the point of doing screenshots of multiple other platforms to demonstrate how bad the user experience really is.

And so I was hoping this was the team acknowledging that work was needed, and that potentially work would be accepted into the core for a future version. This in particular is a sticking point for me because I have a litany of features that would be great for a future version of SMF but no-one will give me any clue whatsoever if any of them *might* be included.

Since no-one can give me any idea what a future version might look like, I refuse to spend any time trying to help without *some* indication that it might be worth the effort, but alas I realise my mistake, the only thing acknowledged here was one specific bug, not that change might be needed, let alone any acknowledgement of what future improvements might be accepted.

I'm fairly sure you think my stance is unreasonable, but I find it unreasonable to put any effort in for improvements (actual improvements) without some reassurance that my time won't be completely wasted. I've already seen bug fixes thrown back and completely redone, I've had some of my feature contributions to 2.1 completely redone because it wasn't the style the rewriter preferred (even if it was consistent with 2.1's own existing style), so excuse me for wanting some reassurance that my time wouldn't be wasted.

Quote from: Antechinus on May 26, 2022, 08:00:41 PMSome people are going to think that letting members know what the limits are is useful. It seems like the polite thing to do, IMO.

Still have this 'Restrictions: 4 per post (4 remaining), maximum total size 1.88 MB, maximum individual size 1.25 MB' below add files box.  Count is correct from 1-4, will not allow fifth attachment.

Quote from: Arantor on May 27, 2022, 12:48:15 PMSo there are multiple issues here.

1. The issue you linked relates to id shuffling with attachments.
2. The number of reported attachments 'left' is routinely wrong; e.g. this site says 36 attachments quota, but uploading 1 item leaves me with it saying 19 left.
3. It's possible to post files over the quota in a single post as long as each individual file is below its own quota.
4. This thread is a demonstration of how confusing and unintuitive the user interface is for attachments.

That's a helpful summary, thank you. I have not had time recently for more than the occasional check-in on the forum here, so a condensed statement of the known issues is useful.

QuoteI was hoping this was the team acknowledging that work was needed, and that potentially work would be accepted into the core for a future version.

Consider that acknowledged.

QuoteThis in particular is a sticking point for me because I have a litany of features that would be great for a future version of SMF but no-one will give me any clue whatsoever if any of them *might* be included.

Well, I can't give a promise that all contributions will be approved before they are submitted, but if you have specific things in mind that you want to discuss before starting work on them, that's a great idea.

Regarding the nice list of issues you gave above, I can definitely say that we will want to include fixes for the first three in a patch for SMF 2.1.x. Regarding the fourth, I can't yet say whether changes to the UI would make it into a patch or would need to wait for a future version. It would depend on the nature of the proposed changes. We try to avoid changing the template files after a release, because we want to minimize the risk of breaking third party themes, but that's not an iron-clad prohibition. But even if proposed changes cannot be included in a patch, I would very much like to improve the attachments UI in a future version.

QuoteI'm fairly sure you think my stance is unreasonable,

??? I have no particular opinion about that, actually. Your time is your own. I have no problem or concerns with how you choose to use it or with what criteria you use in making decisions in that regard.

Quote from: Sesquipedalian on May 27, 2022, 02:34:17 PMRegarding the fourth, I can't yet say whether changes to the UI would make it into a patch or would need to wait for a future version. It would depend on the nature of the proposed changes.

I can summarise the proposed changes for you. There is already working code for them too. Personally I'm happy to do it as a mod, or just custom coding tips, if the team don't want to make it a patch (a mod is basically a patch anyway). Anyway...

1/ No "Upload" or "Upload all" button. I understand the rationale for including them, but people are used to simpler interfaces which upload instantly, and such interfaces seem to work well in practice.

Provisional working code for that is in this post: https://www.simplemachines.org/community/index.php?msg=4126332

2/  Naturally, this also means the "Cancel all" button is probably superfluous, but the individual "Cancel" buttons for each file should stay.

3/ As for rest of the interface, by default it has three main issues:

    a/ The dropbox/upload button is underneath the attachments previews, which means that each time you want to add another attachment you have to chase things up and down the page. Honestly, this is pretty much designed for maximum inconvenience.

    b/ The previews are ordered with the earliest one at the top and the newest at the bottom, which compounds the previous issue. If the dropbox goes under the textarea and above the previews (and it really should) it's better for the newest attachment preview to be at the top so you can always see it immediately. That can be fixed just with CSS changes (slightly convoluted, but not a big deal).

    c/ The post/preview/drafts buttons should be directly under the textarea, between it and the dropbox. Again, to minimise chasing things up and down the page.

    d/ This one is fairly minor, but IMO worth doing: in practice the post options are rarely used, and they don't take up much space anyway. I'm inclined to leave them on permanent display below the drafts. Having them between the textarea and the attachments will just be a nuisance for most people, most of the time. It's better if they are out of the way.

---

Apart from that it's going to come down to personal preference for how much the display of previews is simplified. Given that people will be uploading a range of things (not just holiday snaps) I think it's worth having the file name and size displayed by default. Anyone who doesn't want them can always hide them with a bit of custom CSS.

This is what I'm running at the moment, and I think it's pretty good: https://www.simplemachines.org/community/index.php?msg=4126746

Ant - uploaded your zip to clean 2.1.2 install, much is broken.  Do you have working files?

Yes, those are working files. They are running live on my test site, with no issues (apart from the profile menu in the top bar, which I haven't bothered fixing yet).

Those files are me trying to get 2.1 sorted so I like it, and they are WIP. Frizzle wanted to take a look at what I had so far, so i zipped it. If you don't like it, at this stage I don't care. Go code something you like. That's what I'm doing. :D

Ok, somehow I forgot to include three template in that zip. No idea how, since other templates went in, but whatever. So...

Quote from: Antechinus on May 28, 2022, 03:14:49 AMIf you don't like it, at this stage I don't care.

Didn't say didn't like, stuff doesn't work or is missing altogether.  Will try templates you posted.

QuoteGo code something you like.

Been doing that, keeping it simple.  Will pm access, if you get a minute take a look.

Ok, mostly working now (except user dropmenu). 

Things I like -

Attachments:  Simple and compact.  Don't need the collapse/uncollapse button, should always be open.  And collapsible additional post options in post settings should always be disabled (never understood why that's there).  Could do without max_files_progress bar, pretty much just decorative and doesn't always work.  Also I'd remove post options, nobody uses them.

Things I don't like -

ACP:  First off, main menu admin button doesn't take you to ACP, just opens/closes dropmenu.  Mostly, when you click on menu items, it looks like nothing happens, as working parts are offscreen, have to scroll down to see what's there.  With sidebars content appears next to menu, not below, like that better.  Just have to get around to doing something with all the crap that's next to sidebars when you first get to ACP, put something else there.

Quote from: Sir Osis of Liver on May 28, 2022, 06:01:34 PMOk, mostly working now (except user dropmenu). 

Things I like -

Attachments:  Simple and compact.  Don't need the collapse/uncollapse button, should always be open.  And collapsible additional post options in post settings should always be disabled (never understood why that's there).  Could do without max_files_progress bar, pretty much just decorative and doesn't always work.  Also I'd remove post options, nobody uses them.

1/ I like it collapsed by default, but that's an admin setting anyway. And yes, I removed the conditional for it (mine just does collapsed by default) but it could easily go back in.

2/ The progress bar is handy for a visual representation of where you are in relation to the kB limit. Most of the time it works. If Sesq and Co. tweak the code, it might even work all the time. :D

3/ Post options are worth keeping, and are mostly out of the way. They're useful if you need to edit a post as a moderator or admin, and move it or sticky it or whatever.

Also, just removing them has some tricky bits. For example, I've hidden the label/checkbox for "Return to topic" because returning to the topic by default is a profile option, so I saw no reason to have it in the post options too. But, if you remove it entirely, for some obscure reason (haven't looked yet) it breaks the profile setting. Personally I would call this a bug (removing the label/checkbox from post options should NOT override the profile setting) but at this stage I can't be bothered chasing it down, so just went with hiding the mongrel. :P

QuoteThings I don't like -

Refer to my previous statement re this. :D :P

QuoteACP:  First off, main menu admin button doesn't take you to ACP, just opens/closes dropmenu.

Yes, I know. It uses click activation for all drop menus, just like the top bar drops do by default. In other word: it is consistent, not just with the top bar but with touchscreen too. Consistent UX across devices is not a bug. It's a feature.

However, at some point I will be coding a complete fallback to no-js hover-activated drops (which may include keyboard access to drop menu content). This will be selectable via a profile option, with automatic default click activation on touchscreen (which is something that needs to be specifically coded, since pure CSS hover-activated drops "work" on touchscreen, but are crap on touchscreen).

QuoteMostly, when you click on menu items, it looks like nothing happens, as working parts are off screen,

No, they aren't. They're all right in front of you. :P

QuoteYou have to scroll down to see what's there.

Welcome to web site pages, You'll love them.

QuoteWith sidebars content appears next to menu, not below, like that better.

Refer to my previous statement re... :D

QuoteJust have to get around to doing something with all the crap that's next to sidebars when you first get to ACP, put something else there.

IMO that whole page is pretty much pointless. There's nothing here that isn't handled on other pages.

Admin page posts split to this topic: https://www.simplemachines.org/community/index.php?topic=582516.0

I don't get to see that forum.  Bummer.

 :(

It was split off and then then merged into https://www.simplemachines.org/community/index.php?topic=582515.0 where my thoughts and screenshots are contained. Since it's merged, it no longer exists on its own.

Oddly one of the few times I'd wished that posting order was more malleable than 'the order posts were physically made in' as I fear the last post in the topic is the one that's most interesting.

<sigh> My post got lost in the merge. :(

If Arantor gives the okay, I'll move that topic to a forum you all can see, like this one.

Well, my topic (ID ending in 515) was in Feature Requests which is a public board... I assumed the other topic (ID ending in 516) was a split and then merge so that it didn't exist any more - because I can't see it either if it is still a topic.

But your topic IS in the Feature Requests board. https://www.simplemachines.org/community/index.php?topic=582515.0

I don't know anything about your topic (ID ending in 516), I just split the ACP posts out of this one and merged them to your topic (ID ending in 515).

It's the one you linked to in your post, though. It looks like the posts were split out into a new topic (516), then merged to mine (515), so 516 would be gone and 515 is what's left.

I see what you're saying.

So no posts are missing (they're either here or in the 515 topic)? (which everyone should be able to see?)

@FrizzleFried, I'll check on why that is.

@Sir Osis of Liver - which post? It should be in the other topic if it's not here. I didn't delete any posts.

Everyone can see Feature Requests... but if you link to a topic that no longer exists (because it got merged, and this can't make a redirection topic), the link says "the topic or board is off limits to you".

The issue here is simply that the link in #135 doesn't exist any more.

Ohhhhhh ... now I understand! So those whose posts are no longer in this topic needs to click here:

https://www.simplemachines.org/community/index.php?topic=582515.0

@Steve  everyone can see the feature requests board......

Thanks Kindred. It was the link that I had wrong, as Arantor pointed out.  :)

Other thing is, because of the way posts are ordered, merging a post into an existing topic can place it somewhere other than at the end, so it will be missed.

Yes, I know. But as the merged topic only has 11 posts, it's easy enough to see if yours is there or not.

I wouldn't have merged them into a large topic. Would probably just have made the split posts a topic of their own.

Quote from: Antechinus on May 25, 2022, 01:43:30 AMOk was still buggy. This is better:

Code Select Expand

        // Nifty auto upload. Yay!
        // Seems to run without bugs.
        // Needs more checking: Android, Chrome, etc.
        filesLimit = (myDropzone.options.maxFileAmount - myDropzone.getAcceptedFiles().length);

        if (file.accepted !== true || filesLimit > 0) {
            (function(element){
                setTimeout(function(){
                    element.find('.upload').click();
                }, 1000);
            })(_thisElement);
        }
    });
Added an extra condition, to check the number of files dropped vs number allowed. Also, increased the timeout function delay to 1000 ms.
...

1000ms - this is server problem and can not and should not be fixed with javascript, leave it alone, keep it 100ms.

I know it is a kludge. I said so already. If you want to fix it with javascript, go ahead. :)

However, it works with that kludge in place, and it does not work (without errors) if I remove it. So, in the absence of a better solution, I'm keeping it for now.

Quote from: Antechinus on May 31, 2022, 04:32:23 PMBut, that code of yours is buggy, and throws masses of errors if there are existing attachments and someone goes to edit the post. It needs to be fixed before it is ready for a mod.

No, I've checked and zero error or warnings with my original code. Have you tried original theme without  modifications?

Nope. Not interested in using the original theme without any changes. The whole point of this exercise is to change it. ;)

...just toying around...

@FrizzleFried, do you have any bugs/errors/warnings Antechinus mentioned ? (with unmodified theme and code)

Quote from: Karmaster on June 02, 2022, 07:09:17 AM@FrizzleFried, do you have any bugs/errors/warnings Antechinus mentioned ? (with unmodified theme and code)

FWIW,  he's referring to errors that appear on your browsers console,  not errors that pop up in the SMF log anyplace...

I honestly can't answer the question as I've been using his updated tweak of your code to test with... I only used the original code for a couple days and to be honest with you,  I never checked the console to see if there was anything strange going on in the background.

LOL, @FrizzleFried, do you have any bugs/errors/warnings in browser console Antechinus mentioned ? (with unmodified theme and code)
Can you test it ? I think if there is no bugs, nothing should be fixed ;)

Quote from: FrizzleFried on May 31, 2022, 09:56:28 PM...just toying around...

Is it just me or did those green boxes come in reverse order?

Yup. Reverse order. CSS trickery.

I figured that if you were adding more attachments to an existing post, it made sense for the latest attachments to be at the top. That way you could see they had been added successfully, without having to go looking down the page. IMO, that's better UX. ;)

Same applies if you just upped the wrong file by mistake. If it's at the top you can see straight away, and it's easy to delete.

Quote from: Karmaster on June 02, 2022, 04:30:16 PMLOL, @FrizzleFried, do you have any bugs/errors/warnings in browser console Antechinus mentioned ? (with unmodified theme and code)
Can you test it ? I think if there is no bugs, nothing should be fixed ;)

I'll test it over the weekend. :)

Yeah... at first I was 'WTF' and even asked Ant if it was a bug...

...but the more I thought about it the more it makes sense.

:)

Just noticed the width/height options in attachment_previews don't work.  They don't resize the image, just add space around it.

Ant, I'm trying to work your code into my custom theme to place attachment previews in two columns as you have them, but not having any luck.  Don't want to change anything else, just the size and placement of the previews.  If I use your post template and index.css it doesn't work right. :(

If I use them, it works perfectly. Which I why I coded them, of course. And the width/height options work on my test site too.

I have not just edited Post.template.php and index.css. Your problem is probably related to one of the other files in the mix.

Width/height is working now here and on my test install.  Arantor posted elsewhere that it was reported as a bug, but it should either work or not.

Your zip contains a lot of files and changes a lot of things in addition to attachments.  I just wanted to use your format for stacking attachment previews two across, I've made other changes in post template that I'd like to keep.