Warning With Uploading Too-Large Image

I’m using the $form->addField(‘imageField’ … to allow a user to upload a photo into a form. It is working well unless the user tries to upload an image that is too large. In this case a pop-up Is displayed with the following displayed:

Warning : POST Content-Length of 16276669 bytes exceeds the limit of 8388608 bytes in Unknown on line 0

A json representation of the value I am returning from the onUpload function is also displayed in the dialog.

When I click outside the dialog to close it, my form is displayed but the error handling that I specified in the return from the onUpload handler wasn’t executed.

I’ve stepped through and it appears that the warning is displayed inside the ATK javascript before the onUpload method is called. So, I don’t see any obvious way to handle the UPLOAD_ERR_INI_SIZE and UPLOAD_ERR_FORM_SIZE errors on the server side.

I’d appreciate any help getting around this issue as well as any suggestions for how to check the file size on the client size.

Thanks.

The issue is that when the upload file size is greater than the max post size in php.ini, the XMLHttpRequest api call throws an error. Eventually that leads to the pop-up warning. The other issue is that the complete callback in doFileUpload is not resetting things when an upload fails.

As a quick and dirty fix, I added an alert and return to the uploadFiles method in upload.service.js:

    for (let i = 0; i < files.length; i++) {
     const param = (i===0)? 'file': 'file-'+i;
     formData.append(param, files.item(i));
     if (files.item(i).size > 8388608)
       {
         alert(files.item(i).name + ' is too large.');
         completeCb(null, files.item(i).name + 'is too large.');
        return;
      }
  }

And I updated the complete callback in the doFileUpload method of file-upload.plugins.js to reset things when the upload is not successful:

// setup task on upload completion.
let completeCb =  function(response, content) {
  if (response != null && response.success) {
    that.bar.progress('set label', that.settings.completeLabel);
    that.setState('delete');
  }
  else
    {
      that.bar.progress('reset');
      that.bar.hide('fade');          
      that.setState('upload')
      }

  if (that.settings.submit) {
    $('#'+that.settings.submit).removeClass('disabled');
  }
};