webcompat / web-bugs

A place to report bugs on websites.
https://webcompat.com
Mozilla Public License 2.0
740 stars 63 forks source link

nmscd.com - Images upload failed when attempting to upload multiple files #133387

Open Lenni009 opened 7 months ago

Lenni009 commented 7 months ago

URL: https://nmscd.com/Image-Compressor/

Browser / Version: Firefox 122.0 Operating System: Windows 10 Tested Another Browser: Yes Chrome

Problem type: Something else Description: Some Web Workers don't complete their task Steps to Reproduce: I dropped 4x the same file (with different names) into the upload field. The file is ~18MB large. Only 2 of these 4 files were compressed though, the other 2 just had their workers running indefinitely.

This works in Chrome without issue. Also Chrome spawns 8 workers for compressing these 4 images, Firefox spawned 10-12 during my testing.

Website code: https://github.com/NMSCD/Image-Compressor Compression library code: https://github.com/Lenni009/simple-image-compressor

View the screenshot Screenshot
Browser Configuration
  • None

From webcompat.com with ❤️

softvision-raul-bucata commented 7 months ago

We appreciate your report. I was not able to reproduce the issue following the steps to reproduce: Screenshot_21

Notes: Files larger than 10mb are not accepted:

Screenshot_22

Tested with:

Browser / Version: Firefox Release 122.0.1 (64-bit)/ Operating System: Windows 10 PRO x64

Suggestion: Try clearing cache/data/cookies, disabling add-ons and Ad-blocker (if available) and extensions or use a clean profile, and check again? If there are any changes made to the default settings of the browser (e.g. in about:config) please revert to the default settings and try again. Also, have the required cookies been accepted for this page?

[qa_07/2024]

Lenni009 commented 7 months ago

Sorry, I should have clarified that the files have to be larger than 10MB.

about:config has no relevant changes, the worker limit is still at the default 512.

The page doesn't use any cookies in its code.

Lenni009 commented 7 months ago

I think I found the issue:

On line 19 of the web worker file, the blob variable is sometimes dropped by FF. It shows this error:

InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable

However, if I wrap that line with a try-catch block, and try to console.log the blob variable in the catch block, it works properly.

As a temporary fix, I made a recursive function that just calls itself again in the catch block:

async function createBitmapRecursive(blob: Blob) {
  try {
    const bitmap = await createImageBitmap(blob);
    return bitmap;
  } catch {
    return createBitmapRecursive(blob);
  }
}

This doesn't completely fix the issue, but it seems to at least help a bit under the right conditions (not switching tabs, etc.)

softvision-raul-bucata commented 7 months ago

@Lenni009 Is there a bypass method to upload files that are bigger than 10mb? I am getting an error when trying to upload files above 10mb, on both Chrome and Firefox.

[inv_07/2024]

Lenni009 commented 7 months ago

Huh, the upload process works fine for me (it's all in your local browser, there is no backend server involved). Have you made sure your image files aren't corrupted in some way?

softvision-raul-bucata commented 7 months ago

@Lenni009 I've tried with different browsers, only 1 image gets compressed, the other 3 are returning the "File to large" error. Can you please attach the file here, so we can investigate more?

Screenshot_1

[inv_07/2024]

Lenni009 commented 7 months ago

This is is very odd, that error should not appear anymore.

I was able to reproduce my issue on a different PC. It's exactly the same behaviour I observed on my own machine, FF doesn't work, Chrome works.

I'll try to build a minimal repro for my issue and share it here when I can get it working. I'll also try to see if I can get a deeper understanding for the reason of this bug in the process, so maybe I can also put in a bug on bugzilla directly.

GitHub doesn't seem to accept my uploaded files (probably too large lol), but I'll put them in that repro repo when it's done.

Thanks for your help so far!

softvision-raul-bucata commented 7 months ago

Please ping me once that is sorted. In the meantime, please feel free to report other encountered issues. Your input is highly appreciated.

[inv_07/2024]

Lenni009 commented 7 months ago

@softvision-raul-bucata

Here is the reproduction repo, including test files: https://github.com/Lenni009/ff-worker-issue Here is the website: https://lenni009.github.io/ff-worker-issue/

I have a feeling it may have something to do with file size, since many small jpgs (a few hundred KB) run without issue.

Let me know if anything is unclear!

Lenni009 commented 7 months ago

I just tested with 40 small jpg images from my Steam screenshot folder (each file is around 200KB). FF sometimes just ignores one or two of them, without giving any error. In Chrome, this runs fine.

I have uploaded these 40 test files as well.

softvision-raul-bucata commented 7 months ago

@Lenni009 Thanks for that. I was able to reproduce the issue with 16 files in a queue. 2 workers seem to fail:

Screenshot_8 We appreciate your report. I was able to reproduce the issue by following the steps to reproduce

Tested with:

Browser / Version: Firefox Release 122.0.1 (64-bit)/ Firefox Nightly 124.0a1 (2024-02-15) (64-bit) /Chrome Version 121.0.6167.161 (Official Build) (64-bit) Operating System: Windows 10 PRO x64

Notes:

  1. Reproducible regardless of the status of ETP.
  2. Reproducible on the latest build of Firefox Nightly and Release.
  3. Works as expected using Chrome.
  4. Both Chrome and Firefox are using a fair amount of resources.

Moving this to NeedsDiagnosis for further investigations.

[inv_07/2024]

Lenni009 commented 7 months ago

@softvision-raul-bucata do you need the website in its broken state for diagnosis or is my minimal reproduction enough?

If you don't need the full website, I would update it to handle the errors properly.

softvision-raul-bucata commented 7 months ago

@Lenni009 That is something that our development team investigating the issue would no know best. If more info is needed, they will ping you here.

[inv_08/2024]