News:

Want to get involved in developing SMF, then why not lend a hand on our github!

Main Menu

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

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

Previous topic - Next topic

FrizzleFried

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

Antechinus

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

FrizzleFried


Antechinus

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

Sir Osis of Liver

Hmm, likely I'm doing it wrong, but not seeing any errors in FF inspector console.
"The best laid schemes o' mice an' men / Gang aft a-gley." - Robert Burns

Sir Osis of Liver

"The best laid schemes o' mice an' men / Gang aft a-gley." - Robert Burns

Antechinus

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

Antechinus

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?

Sir Osis of Liver

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.
"The best laid schemes o' mice an' men / Gang aft a-gley." - Robert Burns

Antechinus

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

Arantor

Especially as the errors can break other things if you're unlucky.
Perhaps it would have been better if I'd simply never bothered. Y'all clearly would be less unhappy that way.

Antechinus

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.

Sir Osis of Liver

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

"The best laid schemes o' mice an' men / Gang aft a-gley." - Robert Burns

Antechinus

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

Antechinus

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

Antechinus

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.

Sir Osis of Liver

"The best laid schemes o' mice an' men / Gang aft a-gley." - Robert Burns

Oldiesmann

Michael Eshom
Christian Metal Fans

FrizzleFried

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


Advertisement: