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

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

Previous topic - Next topic

FrizzleFried

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


Arantor

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.

FrizzleFried

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

FrizzleFried

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



EDIT: Updated link works.



Arantor

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

FrizzleFried

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


FrizzleFried

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


davo88

After reviewing all the platforms mentioned here and here 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.


FrizzleFried

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

;)


Antechinus

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

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

FrizzleFried


Sir Osis of Liver

Is it necessary to have a thumbnail when image is inserted?
Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

FrizzleFried


Antechinus

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

Antechinus

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

Sir Osis of Liver

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.
Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

Antechinus

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.

Arantor

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.

Antechinus

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

Sir Osis of Liver

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.


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

                                     - R. Waters

Advertisement: