I have some troubles when sending a form including a display:none file-input through ajax. In Chrome (46.0.2490.71) it works fine, but in IE10 (10.0.9200.17492). Until now I was not successful to resolve these troubles and it's important that the upload works in IE10 too.
I have a form with multiple input-elements. One of them is an input-file. I simulate the input-file click using jQuery:
$('.file-upload span').click(function () {
$(this).parent().find('input[type=file]').click();
});
<div class="col-xs-8 col-sm-7 col-md-4 col-lg-4 input-group file-upload" data-field-name="FILENAME">
<input type="file" name="p_doc" class="form-control" placeholder="" maxlength="2000" id="FILENAME">
<input type="text" class="form-control hidden" value="" readonly="">
<span class="input-group-addon" title="Search for file...">
<span class="glyphicon glyphicon-folder-open"></span> Browse
</span>
<input type="hidden" name="p_arg_values" value="">
</div>
I've tried several possibilities as you can see below. I've searched for solutions in the internet but can't find anything that resolves my troubles. I know that in IE10 the formData is supported.
formData = new FormData();
var inputFiles = $('#FILENAME').get(0);
formData.append('p_doc', inputFiles.files[0]);
$('form input[type!=hidden][name=p_arg_values]').each(function () {
formData.append($(this).attr('name'), $(this).val());
});
formData = new FormData();
formData.append('p_doc', $('form input[type=file]')[0].files[0]);
$('form input[type!=hidden][name=p_arg_values]').each(function () {
formData.append($(this).attr('name'), $(this).val());
});
It's working if I don't set the display:none on the input-file and us the the input-file directly with the following code. But if the input-file is hidden I get the error "SCRIPT5: Access is denied".
formElement = document.querySelector("form");
formData = new FormData(formElement);
After the formData object has been built, it will be sent through ajax to an oracle procedure.
$.ajax([ORACLE_PROCEDURE], {
processData: false,
contentType: false,
data: formData,
method: 'POST'
})
Can anyone help to resolve this?
IE has strict security policies against manipulation of file inputs ( getting access is denied error on IE8 ).
What you can do is make the opacity of the file input 1% and place it over the button. The user will think they're pressing the button but in reality its the file input that is being clicked.