Camunda form File Submition cannot be found in variable scope

I’ve been trying to upload a file to my process and then use it in the tasks that follow. However, I keep getting the value null as if the upload never happened.
This is weird because i followed the camunda doc that specifies how a file should be uploaded and allocated to a variable.
this is the HTLM code used in the form

<input 
    type="file"
    id="1"
    cam-variable-name="INVOICE_DOCUMENT"
    cam-variable-type="File"
    cam-max-filesize="10000000" />
<script>
camForm.on('submit', function () { 
    var fileInput = document.getElementById("1");
    var file = fileInput.files[0]; // Get the first file

    camForm.variableManager.createVariable({
        name: 'INVOICE_DOCUMENT',
        type: 'File',
        value: {
            file: file,
            filename: file.name,
            mimeType: file.type
        }
    });
});
</script>

Even adding the camForm script in the end it didn’t work. Still getting value null.