Uploading large JPG image files > 2GB

[johndoegpt]

Hi,

I want my application to be able to upload large files of several gigabytes.
The goal is not to preview them, but just to upload them successfully.
I use the fileUpload component in "advanced" mode to upload files.

I am therefore testing the upload of image files of 2 GB or more, of different types (JPG, PNG, TIFF, BMP).
However, the JPG and PNG types have a problem, the other types are uploaded correctly.
Indeed, for the JPG and PNG formats, the chrome browser redirects me to a page with the STATUS_BREAKPOINT code.
Regarding this status, we can find the following description :

The STATUS_BREAKPOINT error in Chrome and Edge typically indicates that there's an issue with the JavaScript code that's causing the browser's debugger to halt execution.

One hypothesis could be that it is the calculation of the preview that is problematic.
So I masked its display with CSS:

.ui-fileupload-preview{
   display: none;
}

or using the previewWidth="0" attribute.

However, the problem still persists.
In addition, there is no other attribute on the fileUpload component that allows you to deactivate the preview, when using "advanced" mode.

To conclude, regardless of the source of the problem, the fileUpload component have problems for JPG and PNG formats, but not for TIFF and BMP formats. Moreover, it seems that the JPG and PNG formats are previewed by the component, which is not the case for TIFF and BMP formats. (The upload also works with PDF or BIN files of 2GB or more, which are not previewed formats)

Thank you for your time!

In order to reproduce the problem, you will find the following reproducer

https://github.com/johndoegpt/primefaces-reproducer-fileupload-bigfiles.git

In order to have sample files, you will need to execute the main method of

• JpegGenerator.java (or PngGenerator.java)
• BmpGenerator.java

On Windows, these files will be located by default in C:\workspace but you can modify the path as you want.

[melloware]

Please provide an executable example using the PrimeFaces Test project. It is the only way developers can debug your problem to help.
Any chance you can wrap your code up into a real reprocucer using the above? If so then please open a GitHub Issue asking for whatever is causing this to have some way of being disabled.

[johndoegpt]

Hi !
I have updated my original message with the a PrimeFaces Test project reproducer.

[melloware]

ok try this in /src/main/webapp/resources/test.js add this code.

https://github.com/primefaces/primefaces-test/blob/master/src/main/webapp/resources/test.js

It removes trying the preview entirely...

if (PrimeFaces.widget.FileUpload) {
  PrimeFaces.widget.FileUpload.prototype.addFileToRow = function(file, data) {
    if (this.emptyFacet.length > 0) {
      this.emptyFacet.hide();
      this.filesFacet.parent().show();
    }

    var $this = this,
      row = $('<div class="ui-fileupload-row"></div>')
      .append('<div class="ui-fileupload-preview"></td>')
      .append('<div class="ui-fileupload-filename">' + PrimeFaces.escapeHTML(file.name) + '</div>')
      .append('<div>' + PrimeFaces.utils.formatBytes(file.size) + '</div>')
      .append('<div class="ui-fileupload-progress"></div>')
      .append('<div><button class="ui-fileupload-cancel ui-button ui-widget ui-state-default ui-button-icon-only"><span class="ui-button-icon-left ui-icon ui-icon ui-icon-close"></span><span class="ui-button-text">ui-button</span></button></div>')
      .appendTo(this.filesFacet);

    if (this.filesFacet.children('.ui-fileupload-row').length > 1) {
      $('<div class="ui-widget-content"></div>').prependTo(row);
    }

        //preview
        if(window.File && window.FileReader && $this.IMAGE_TYPES.test(file.name)) {
            var imageCanvas = $('<canvas></canvas>')
                                    .appendTo(row.children('div.ui-fileupload-preview')),
            context = imageCanvas.get(0).getContext('2d'),
            winURL = window.URL||window.webkitURL,
            url = winURL.createObjectURL(file),
            img = new Image();

            img.onload = function() {
                var imgWidth = null, imgHeight = null, scale = 1;

                if($this.cfg.previewWidth > this.width) {
                    imgWidth = this.width;
                }
                else {
                    imgWidth = $this.cfg.previewWidth;
                    scale = $this.cfg.previewWidth / this.width;
                }

                imgHeight = parseInt(this.height * scale);

                imageCanvas.attr({width:imgWidth, height: imgHeight});
                context.drawImage(img, 0, 0, imgWidth, imgHeight);
            };
        }

    //progress
    row.children('div.ui-fileupload-progress')
      .append('<div class="ui-progressbar ui-widget ui-widget-content" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="ui-progressbar-value ui-widget-header" style="display: none; width: 0%;"></div></div>');

    file.row = row;
    file.row.data('fileId', this.fileId++);
    file.row.data('filedata', data);

    this.files.push(file);

    if (this.cfg.auto) {
      this.upload();
    }

    this.postSelectFile(data);
  }
}

[johndoegpt]

Hi,

After selecting the file, nothing else is displayed. So we cannot click on the upload button that is supposed to appear after selection, to upload the selected file.

The js code removes the entire display that is supposed to appear (prerendered image + file name + file size + loading bar + upload and cancel buttons) but we would only like to delete the prerendered image.

[melloware]

OK i updated my script. Basically it creates the image the only line i remove is this line....

img.src = url;

So it won't try and LOAD the image.