[nitajanorkar]

Hi,

In dynaform, i am using multi file upload control.. and i am giving 2MB max file size limit...

I want to show an alert message if someone try to upload the file more than 2MB...


Thanks,

[mishika]

Hello,

Handling MultipleFile web control with javascript goes a bit complicated, though I am working on it to find a way to achieve your requirement.
I would suggest an alternative that would work exactly as desired.

Use a Grid and take a single field of file upload web control in it.
For this field define the acceptable extensions and the size of the file to be uploaded.
In the file upload control, if the uploaded file exceeds the entered max size of the file, a message is displayed warning about the size limit.
You can add and delete the rows in a grid which will be the functionality same as the MultipleFile control.

Hope this helps

Best Regards,
Mishika

[amosbatto]

One option is to fire a trigger after the DynaForm which checks the size of the uploaded files. If too large, then delete the file and redisplay the Dynaform using PMFRedirectToStep(). Redirection with PMFRedirectToStep currently doesn't work in the ProcessMaker mobile app, but that bug is scheduled to be fixed.

Another option is to use the new file spec in HTML 5. See:
http://stackoverflow.com/questions/1601 ... ith-jquery
Right now the setOnchange() method doesn't work for file and multipleFile controls, but that bug is fixed in PM 3.2, so this might work.

Do you support contract with ProcessMaker? If so, you can ask for new features like this. If I have some time today, I will try test this and see if I can find a solution.

[amosbatto]

I found a solution.
Edit the file workflow/public_html/lib/pmdynaform/build/js/PMDynaform.js
In line 21085, change from:

Code: Select all

            if (!this.model.get("isValid")) {
                this.progressBar.setPercentage(100);
                this.progressBar.setType("danger");
            }

To:

Code: Select all

            if (!this.model.get("isValid")) {
                this.progressBar.setPercentage(100);
                this.progressBar.setType("danger");
                var fileAttr = this.model.attributes;
                var maxFileSize = fileAttr.size * (fileAttr.sizeUnity=='KB' ? 1024 : 1024*1024);
                if (fileAttr.file && fileAttr.file.size > maxFileSize) {
                	this.progressBar.setMessage("Error: "+fileAttr.size+' '+
                	  fileAttr.sizeUnity+" is maximum file size");
                }    
            }

After you make this change in the code, the red progress bar should contain an error message about exceeding the max file size:

ExceedMaxFileSize.png (15.68 KiB) Viewed 6826 times

Note: you may have to clear the cache on your web browser after changing the JS file.

[amosbatto]

I have filed an internal bug report to get this code added to PM:
https://processmaker.atlassian.net/browse/TRI-2392
Hopefully it will get added to PM 3.2.

[nitajanorkar]

Thanks a lottt... Its working properly....

[mustapah]

Given amosbatto's code, I come up with this little snippet to handle file size error in MultipleFile control:

Code: Select all

$('#multifile_id').find('button:first').click(function () {
    var lengthBeforeUpload = getFieldById('multifile_id').model.attributes.fileCollection.models.length;

    $('input:file').change(function (event) {
        var controlAttr = getFieldById('multifile_id').model.attributes;
        var uploadedFiles = controlAttr.fileCollection.models;
        if (uploadedFiles.length === 0 || uploadedFiles.length <= lengthBeforeUpload) return;
        let maxFileSize = controlAttr.size * (controlAttr.sizeUnity === 'KB' ? 1024 : 1024 * 1024);

        var error = {
            flag: false,
            msg: `Error: the following file(s) exceed the maxiumum allowed size per file (${controlAttr.size} ${controlAttr.sizeUnity}):` + '\n'
        };

        uploadedFiles.forEach(function (element, index) {
            var fileAttr = element.attributes
            if (index < lengthBeforeUpload || fileAttr.isValid) return;
            if (fileAttr.file.size > maxFileSize) {
                error.flag = true;
                error.msg += ' - ' + fileAttr.file.name + '\n';
            }
        });

        if (error.flag) alert(error.msg);
        $(this).off(event);
    });
});

[richvle]

Mustapah and Amos's code works great when uploading the file. The warning pops up and everything. Except there seems to be 2 smart apostrophes in Mutapah's code, just FYI.

So it warns the user, however, neither code, nor the control's built-in validation keeps the dynafrom from being able to be submitted. What's the cleanest modification to this to stop the dynafor from being able to submit?