Krajee Bootstrap File Input fails with large files

Question

I am using krajee file input to upload images. It works well for small images. But it fails to upload large images. When I checked requests in server side the small images has mimeType=image/jpeg and large images has mimeType=application/octet-stream with size=0 Here are my file uploader configurations.

$("#file-4").fileinput({
theme: 'fa',
uploadUrl: uploadUrl,
allowedFileExtensions: ['jpg', 'png', 'gif', 'jpeg'],
overwriteInitial: false,
maxFileSize: 12500,
maxFilesNum: 4,
showCaption:false,
rtl: true,
showRemove: false,
showUpload: false,
showCancel: true,
browseOnZoneClick: true,
initialPreview: imageData,
initialPreviewConfig: JSON.parse(unescape(configData)),
deleteUrl: 'http://localhost:8000/ajax/upload/image/delete?fileName=' + $('#fileName').val(),
deleteExtraData: {file: this.key},
initialPreviewThumbTags: tags,
browseLabel: 'Upload Images',
layoutTemplates: {
    footer: footerTemplate,
    actions: actionsTemp
},
uploadExtraData: {
    folder: $('#folder').val()
}
});

Answer 1

Likely the issue is with server side settings, for example in php.ini.

; Maximum allowed size for uploaded files.
upload_max_filesize = 40M

; Must be greater than or equal to upload_max_filesize
post_max_size = 40M

Both should be set above the max size you wish to upload.

Answer 2

The issue is not in the server settings. My server has upload_max_filesize and post_max_size=150M.

The problem with large file (>2MB) is the Resumable option of plugins . You have to disable uploadAsync and set this option:

enableResumableUpload: false,