Versions Compared

Old Version 3

changes.mady.by.user Debanraj Ravindran

Saved on

compared with

New Version Current

changes.mady.by.user Selvavignesh Perumal

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  • Supported only in assignment forms (e.g., those accessed from the user’s Inbox).
  • Works only with single-file upload fields; multi-file upload fields are not supported.
  • Customization required; you must update the form, dropzone, and saveAsDraft element selectors in the script to match the structure of your specific form.

How does it work?

  1. Identify In Form Builder, identify the single file upload field you wish to autosave.
  2. Locate the form’s form, dropzone, and Save As Draft button selectors. Please take note down the selector by inspecting your form element and update these selectors in the script.
    Image Added                         
    Figure 1: Identify and note the selector used to update the form_id within the script.
    Image Added
    Figure 2: Identify and note the selector used to update the file upload field_id within the script.
  3. Drag and drop a Custom HTML element from the palette to the form.
  4. Insert the following autosave script into a the Custom HTML element in your form. Modify the form, dropzone, and saveAsDraft element selectors with the selectors from your form.
    Code Block
    languagejs
    var autoSaveJob;
$(document).on('page_loaded', function () {
    clearInterval(autoSaveJob);
    var fileName = "";
    function saveForm() {
        var form = $('form#request'); //CHANGE THIS - if required
        const params = new URLSearchParams(window.location.search);
        const mode = params.get('_mode');
        
        var payload = new FormData(form[0]);
        var $dropzoneElm = $('#evidence').closest('.dropzone'); //CHANGE THIS
        
        dz = Dropzone.forElement($dropzoneElm[0]);
        
        if (form.length == 0 || mode != 'assignment') {
            console.log("autoSaveJob abort");
            clearInterval(autoSaveJob);
            return;
        }
        
        // skip autosave if file upload is empty or filename is same as previous one
        if (dz.files.length == 0 || dz.files[0].name == fileName) {
            console.log("autoSaveJob skipped");
            return;    
        }
        
        // replace filename if newly uploaded
        if (dz.files.length > 0) {
            console.log(dz.files[0].name);
            fileName = dz.files[0].name;
        }
        
        var submitBtn = $('#saveAsDraft'); //CHANGE THIS - the save as draft button
        payload.append(submitBtn.attr('id'), submitBtn.val());
        
        console.log("autoSaveJob " + new Date());
        
        fetch(form.attr('action') + '&' + ConnectionManager.tokenName + '=' + ConnectionManager.tokenValue, {
            method: form.attr('method'),
            body: payload
          })
          .then(response => {
            if (!response.ok) {
              throw new Error('Network response was not ok');
            }
            return response.text();
          })
          .then(html => {
            match = html.match(/[?&]_nonce=([^&]+)/);
            if (match) {
                newValue = match[1];
                console.log("found " + newValue);
                
                dzOldURL = dz.options.url;
                console.log("old url " + dzOldURL);
                
                dzNewURL = dzOldURL.replace(/([?&]_nonce=)[^&]*/, `$1${newValue}`);
                console.log("new url " + dzNewURL);
                
                dz.options.url = dzNewURL;
            } else {
              console.log('_nonce not found');
            }
            
          })
          .catch(error => {
            console.error('Error saving form:', error);
          });
    }
    
    // Autosave form every 10 seconds
    autoSaveJob = setInterval(saveForm, 10 * 1000);
});
  5. Test the functionality in the assignment (Inbox) view.

Expected Outcome

The provided script should be embedded in a Custom HTML element within your form. Here's what the script does:

Figure 13: Custom HTML on form with File  uploads

...