As a result of the limitations of IE10 and earlier versions, I find myself in need to reimplement the Import/Upload functionality that I had initially created since FileReader is not supported. After some consideration, I have opted to utilize an iFrame in order to fulfill the requirement for uploading with older browsers.
Below is the structure of my form:
<form id="file_upload_form" method="post" enctype="multipart/form-data" action="upload.php">
<input name="file" id="file" size="27" type="file" /><br />
<input type="submit" id="import" value="Import" /><br />
</form>
While working on the JavaScript portion, I realized that calling the action directly would require significant rework. Below is the current progress of my JavaScript code snippet:
$('#import').click(function () {
$('#imageForm').submit();
$('#iFrameImage').load(function () {
$('#file').val('');
$.get('ImportExportController/Put');
});
});
In the TypeScript code snippet below, you can observe how I am invoking the action in my controller from within TypeScript. In the past, I could simply use ng-click to trigger this method.
public Import(xml, parentNode): restangular.IPromise<any> {
var vr = {
IsOk: false,
Data: [xml, somethinghere],
Errors: []
};
return this.restangular.one('Import', '0').customPUT(vr);
}
I am currently facing the challenge of figuring out how to call this TypeScript function (which serves as my Angular viewmodel) using JavaScript.
The main idea behind this approach is to enable file upload via an iFrame and then upon uploading, invoke the TypeScript function.