[Bug] black image uploaded instead

[drxabdulrahman]

Is there an existing issue for this?

• I have searched the existing issues

Have you updated FilePond and its plugins?

• I have updated FilePond and its plugins

Describe the bug

sometimes when i upload images, it turned to black images, that appears in preview and in final uploaded file.

Reproduction

I don't know when this happened, I will take screen shot next time

Environment

- Device:
- OS:android or windows
- Browser:Mozilla
- framework : laravel

[rikschennink]

Perhaps the JPEG is too large in resolution for the device to handle?

[bronz3beard]

Is there a way for when this happens to pass a default fallback image?

this happens in image, media (video) and pdf.

[LionelHolt]

This happens to me apparently when there are dozens of tabs open. So far it's only happened in Firefox, but that could be simply because that's my default browser and in Chrome I never have dozens of tabs open. The issue resolves after closing all tabs and restarting the browser, so it's not caused by any specific file size or type. I upgraded to all of the current versions of Filepond and plugins, but the issue persists. My laptop runs Linux (Pop!_OS 22.04) and is most certainly not short on RAM. I was going to chalk it up to a video driver and/or Linux and/or Gnome and/or Firefox bug, but then one of my users recently reported it also happening and she uses Firefox in Windows 10.

[LionelHolt]

Update: It just happened again and this time only 6 tabs open in 4 Firefox windows.

[LionelHolt]

Today I'm finally able to reproduce it, and it has nothing to do with how many tabs are open. It happens consistently after resuming from suspend. So I think I was right about it being peculiar to my system's video driver and/or Gnome. I will try to get more details from my Windows 10 Firefox user.

[rikschennink]

@LionelHolt I truly appreciate the debugging here, these problems are so difficult to track down 🙏

[LionelHolt]

I created a function to detect the errant preview condition. It can be used in the onprocessfile handler to inform the user about the probable causes and advise restarting their browser or switching to a different one.

function detectFilePondPreviewIssue(container) {
  const previewCanvas = container.querySelector('.filepond--image-preview-wrapper canvas');
  if (previewCanvas) {
    const ctx = previewCanvas.getContext('2d');
    const width = previewCanvas.width;
    const height = previewCanvas.height;
    if (width === 0 || height === 0) return false;
    const imageData = ctx.getImageData(0, 0, width, height);
    // instead of nested array of pixel data, this returns performant
    // one-dimensional array of four elements per pixel  (red, green, blue, alpha)
    const arrPixelData = imageData.data;
    for (let p of arrPixelData) if (p > 0) return false;
    // when every pixel attribute == 0, it's far more likely a rendering issue
    // than a completely black/transparent image
    return true;
  }
  return false;
}

[rikschennink]

Thanks @LionelHolt, this is interesting. Currently spending all my time on FilePond v5, not sure if it'll be an issue there as under the hood it's completely different, but will keep an eye out for this.