Not able to set input file in IE 11

Question

I have file input in dojo grid, I called the function onChange and I have the data in the file object but when I am submiting the form the file content is empty. I also created the dummy input file to set the content of file but it's working in chrome but it's not working in IE, Please see the below code.

document.getElementById('dummyId').files = event.target.files;

Note dummyId is id of temporary input file. It's working in chrome but it's not working in IE. Can you please help me why it's not working in IE.

Please see the below code.

<table data-dojo-type="dojox.grid.EnhancedGrid" 
                                   data-dojo-id="documentsGrid" selectionMode="none"
                                   data-dojo-props='store: documentsGrid_data,
                                                    keepSelection: true, 
                                                    canEdit: documentsGrid_edition,
                                                    canSort: function(col) {  
                                                        if(col === this.getColumnTogglingItems().length) return false;
                                                            return true;
                                                    },
                                                    autoHeight: true,
                                                    plugins: {
                                                        indirectSelection: {
                                                            noresize: true
                                                        },
                                                        pagination: {
                                                          defaultPageSize : 10,
                                                          sizeSwitch: false
                                                        }
                                                    }'>
                                <thead>
                                    <tr>
                                        <th field="documentId" formatter="formatOptions" noresize="true" width="14px"  headerClasses="alignTextLeft" cellClasses="alignTextCenter">
                                            <s:message code="common.input.label.options" />
                                        </th>   
                                    </tr>
                                </thead>
                            </table>


                            <span style="display:none;" id="documentUpload">
                                <input type="file" id="file" onchange="onFileUpload(event, 0);" accept="image/*,application/pdf" style="width : 80px;"/>
                            </span>

                            <input style="display: none;" id="dummyId" name="dummyDocument" type="file" class="width178"/>


                            function formatOptions(rowIdx){
                                var input = dojo.byId('documentUpload').innerHTML   
                                return input;
                            }

                            function onFileUpload(event,idx){
                            document.getElementById('dummyId').files = event.target.files;  
                            }

Answer 1

Try to use the following code, then, using F12 developer tools to debug the code, you can see that the files variable don't contain a file, it means that you didn't set files for the dummyId control.

function onFileUpload(event, idx) {
    debugger;
    var value = event.target.value;
    document.getElementById('dummyId').files = event.target.files;
    var files = document.getElementById('dummyId').files;
    var files2 = document.getElementById('file').files;
}

The screenshot as below:

So, when you want to submit the form, you need to get the upload file from the "file" control, instead of from the temporary input file.