UploadMany: How to check whether all files have been uploaded completely

UploadMany: How to check whether all files have been uploaded completely

rf1234rf1234 Posts: 2,988Questions: 87Answers: 421

I need to create zip-archives from uploaded documents and also need to parse the contents of documents including doing an OCR-conversion if the uploaded documents aren't machine readable.

I do this on "submitSuccess" like this. The problem is: If the user hits the "save" button too early (while document upload is still running) this can be an issue.

How can I detect whether or not a file upload (it's always many files!) is still running? So on "submitSuccess" I would need to check whether there are still ongoing file uploads and wait until they are completed.

This is my current code:

.on('submitSuccess', function (e, json, data, action) {   
    //we need to process potential new labels!
    if ( action !== "remove" && typeof json.data[0] !== 'undefined' ) {
        parentTable.row({selected: true}).show().draw(false);
        $.ajax({
            type: "POST",
            url: 'actions.php?action=processLabelIdArray',
            data: {
        //labelIdArray can also contain text of newly created labels!
                ctrId: json.data[0].DT_RowId.substr(4),
                labelIdArray: JSON.stringify(ids)
            },
            success: function () {      
                ids = [];
                $.ajax({
                    type: "POST",
                    url: 'actions.php?action=zipCtrDocuments',
                    data: {
                        ctrId: json.data[0].DT_RowId.substr(4)
                    },
                    success: function () {
                        $.ajax({
                            type: "POST",
                            url: 'actions.php?action=parseCtrContents',
                            data: {
                                ctrId: json.data[0].DT_RowId.substr(4)
                            },
                            success: function () {
                                ajaxReloadTbls([ctrTable]);
                            }
                        });
                    }
                });
            }
        });
})

This question has accepted answers - jump to:

Answers

  • allanallan Posts: 63,489Questions: 1Answers: 10,470 Site admin
    Answer ✓

    That is a good question! Editor does actually already add a preSubmit event handler that should present a form from being submitted while a file is being uploaded. I've just tried that and it does seem to work for me, but it is possible that some configuration of usage prevents it from working. Are you able to give me a link to a page showing the issue?

    Another option is that Editor currently blocks the submit action is a field is in a processing state, however, uploading a file does not currently trigger that state I'm wondering if perhaps it should, but for the moment that could be emulated with the preUpload and postUpload events:

    editor.on('preUpload', function (e, name) {
      editor.field(name).processing(true);
    });
    
    editor.on('postUpload', function (e, name) {
      editor.field(name).processing(false);
    });
    

    That should block the submission of the form while the upload is happening.

    Allan

  • rf1234rf1234 Posts: 2,988Questions: 87Answers: 421

    Thanks for that, Allan!

    I was already trying something complicated. Counting the files on "preUpload" and on "uploadXhrSuccess" ... I had already figured out how to get the file names. But not required any longer :smile:

    subEditor
        .on('preUpload', function ( e, fieldName, file, ajaxData) {
            this.field(fieldName).processing(true);
        })
        .on('postUpload', function ( e, fieldName, fieldValue ) {
            this.field(fieldName).processing(false);
        })
        .on( 'preUpload', function( e, fieldName, file, ajaxData) {
            if ( typeof file !== 'undefined' ) {
                var fileName = file.name;
            }
        })
        .on( 'uploadXhrSuccess', function( e, fieldName, json) {
            if ( typeof json !== 'undefined' ) {
                var id = json.upload.id;
                var fileName = json.files.file[id].name;
            }
        })
    
  • rf1234rf1234 Posts: 2,988Questions: 87Answers: 421

    @allan - sorry that I didn't really read your reply, just took your code and it worked...

    Editor does actually already add a preSubmit event handler that should present a form from being submitted while a file is being uploaded. I've just tried that and it does seem to work for me, but it is possible that some configuration of usage prevents it from working. Are you able to give me a link to a page showing the issue?

    Unfortunately it is a very special use case in a highly complex application. So, I can't link you to that page. I am not even sure I can reproduce the problem all the time. But the problem happened. And I want to be sure it doesn't happen again. "Never trust the client" - I guess I learned that from you, Allan. Double safety doesn't hurt. I only need this for two of my data tables anyway because only those two have the additional file processing on "submitSuccess".

    Thanks again for your prompt support!

    Roland

  • allanallan Posts: 63,489Questions: 1Answers: 10,470 Site admin
    Answer ✓

    No worries - good to hear the workaround worked for you. I'm not sure why the built in one isn't working, but I quite like the idea of showing a processing indicator while a file is uploading. I've added it to my list!

    Allan

Sign In or Register to comment.