[Multiple File Upload] Suggestion: Include file size limit as input

Forge Component
(54)
Published on 2019-06-26 by Remco Dekkinga
54 votes
Published on 2019-06-26 by Remco Dekkinga

Hello,

First of all, kudos for a great component.

One common issue that I encounter in my projects is the need to limit the file size allowed by the component. I found this quick trick to allow this.

  • Create a new non-mandatory input parameter of type Integer. I called it FileSizeLimit with the following description:
The limit of each file size in bytes. If zero, no limit is defined.

This value should be less than what the OutSystems server is configured to allow, otherwise bigger files will not be stored in the cache and unexpected behavior may occur.

Examples:
- 26214400, which correspondes to 25MB.
- 0, which corresponds to no limit.
  • Change the script in the WebBlock (in bold and underlined, is the only change I made) to:
"<script type='text/javascript'>
var uploader = new qq.FileUploader({
    multiple: "+If(Multiple,"true","false")+",
    // pass the dom node (ex. $(selector)[0] for jQuery users)
    element: document.getElementById('"+EncodeJavaScript(If(DivId<>"",DivId,FileUploadDiv.Id))+"'),
    // path to server-side upload script
    disableCancelForFormUploads: true,
    action: '"+EncodeJavaScript(FileProcessURL)+"',
    params: {
    sessionid: '" + EncodeJavaScript(SessionId) + "',
        supportedextensions: '" + EncodeJavaScript(SupportedExtensions) + "'
    },
    sizeLimit: "+FileSizeLimit+",
    showMessage: function(message){
        OsNotifyWidget('" + EncodeJavaScript(MultipleFileUpload.RuntimeId) + "','error['+$('.qq-upload-file').length+']:'+message);
    },
    onComplete: function(id, fileName, responseJSON){
        $('.qq-upload-file').each(function(){
            if ($(this).text() == fileName || $(this).attr('textcontent') == fileName) {
                $(this).parent().remove();
                OsNotifyWidget('" + EncodeJavaScript(MultipleFileUpload.RuntimeId) + "','complete['+$('.qq-upload-file').length+']:'+fileName);
            }
        });
    },
    onCancel: function(id, fileName) {
        $('.qq-upload-file').each(function(){
            if ($(this).text() == fileName) {
                $(this).parent().remove();
            }
        });
    },
    template: '<div class=""qq-uploader"">' + 
                '<div class=""qq-upload-drop-area""><span>Drop files here to upload</span></div>' +
                '"+EncodeJavaScript(ButtonHtml)+"' + 
                '<ul class=""qq-upload-list""></ul>' +
             '</div>'
});
</script>"

That's it.

This uses the already implemented error messages that get sent through the Notify action, so it's an easy adaptation that shouldn't break anything that is already implemented.


Best regards

In my opinion it is an excellent suggestion.