Uploaded files on IE11 and Edge

[ja1979]

Overview of the issue

Uploaded files are not opened in Internet Explorer 11 (IE11)

Motivation for or Use Case

It works perfectly on Chrome and Firefox.

Reproduce the error

Create any Entity with a Blob field and try uploading a file. Files uploaded are not opened in IE11.

Related issues

N/A

Suggest a Fix

I guest the problem is with IFRAME tag which are not supported anymore in IE11.

JHipster Version(s)

4.14.1

JHipster configuration

jhipster info

Using JHipster version installed locally in current project's node_modules
Executing jhipster:info
Options:
Welcome to the JHipster Information Sub-Generator

JHipster Version(s)

[email protected] /mnt/myfiles/jhipster/attachment
└── [email protected] 

JHipster configuration, a .yo-rc.json file generated in the root folder

.yo-rc.json file

{
  "generator-jhipster": {
    "promptValues": {
      "packageName": "com.mycompany.myapp",
      "nativeLanguage": "en"
    },
    "jhipsterVersion": "4.14.1",
    "baseName": "attachment",
    "packageName": "com.mycompany.myapp",
    "packageFolder": "com/mycompany/myapp",
    "serverPort": "8080",
    "authenticationType": "jwt",
    "cacheProvider": "ehcache",
    "enableHibernateCache": true,
    "websocket": false,
    "databaseType": "sql",
    "devDatabaseType": "h2Disk",
    "prodDatabaseType": "mysql",
    "searchEngine": false,
    "messageBroker": false,
    "serviceDiscoveryType": false,
    "buildTool": "maven",
    "enableSocialSignIn": false,
    "enableSwaggerCodegen": false,
    "jwtSecretKey": "replaced-by-jhipster-info",
    "clientFramework": "angularX",
    "useSass": false,
    "clientPackageManager": "yarn",
    "applicationType": "monolith",
    "testFrameworks": [],
    "jhiPrefix": "jhi",
    "enableTranslation": true,
    "nativeLanguage": "en",
    "languages": [
      "en",
      "es"
    ]
  }
}

JDL for the Entity configuration(s) entityName.json files generated in the .jhipster directory

JDL entity definitions

entity Attachment (attachment) {
  name String required,
  file AnyBlob required
}


paginate Attachment with pagination
service Attachment with serviceClass

Environment and Tools

openjdk version "1.8.0_161"
OpenJDK Runtime Environment (build 1.8.0_161-b14)
OpenJDK 64-Bit Server VM (build 25.161-b14, mixed mode)

git version 2.14.3

node: v8.9.4

npm: 5.6.0

yeoman: 2.0.1

yarn: 1.5.1

Docker version 1.13.1, build 7f1fa5c-unsupported

docker-compose version 1.17.1, build 6d101fb

Congratulations, JHipster execution is complete!

.yo-rc.json

{
"generator-jhipster": {
"promptValues": {
"packageName": "com.mycompany.myapp",
"nativeLanguage": "en"
},
"jhipsterVersion": "4.14.1",
"baseName": "attachment",
"packageName": "com.mycompany.myapp",
"packageFolder": "com/mycompany/myapp",
"serverPort": "8080",
"authenticationType": "jwt",
"cacheProvider": "ehcache",
"enableHibernateCache": true,
"websocket": false,
"databaseType": "sql",
"devDatabaseType": "h2Disk",
"prodDatabaseType": "mysql",
"searchEngine": false,
"messageBroker": false,
"serviceDiscoveryType": false,
"buildTool": "maven",
"enableSocialSignIn": false,
"enableSwaggerCodegen": false,
"jwtSecretKey": "xxxxx",
"clientFramework": "angularX",
"useSass": false,
"clientPackageManager": "yarn",
"applicationType": "monolith",
"testFrameworks": [],
"jhiPrefix": "jhi",
"enableTranslation": true,
"nativeLanguage": "en",
"languages": [
"en",
"es"
]
}
}

Entity configuration(s) entityName.json files generated in the .jhipster directory

{
"fluentMethods": true,
"relationships": [],
"fields": [
{
"fieldName": "name",
"fieldType": "String",
"fieldValidateRules": [
"required"
]
},
{
"fieldName": "file",
"fieldType": "byte[]",
"fieldTypeBlobContent": "any",
"fieldValidateRules": [
"required"
]
}
],
"changelogDate": "20180405201217",
"dto": "no",
"service": "serviceClass",
"entityTableName": "attachment",
"jpaMetamodelFiltering": false,
"pagination": "pagination"
}

Browsers and Operating System

Chrome, Firefox on Linux and Windows 7: OK
IE11 on Windows 7: Problem

• [ x] Checking this box is mandatory (this is just to show you read everything)

[deepu105]

May be its time to drop IE support?

[gmarziou]

I guest the problem is with IFRAME tag which are not supported anymore in IE11.

What makes you think so?
From what I researched, I can't see any mention of this, just issues about iframe and data url like: https://stackoverflow.com/questions/6102636/html-code-as-iframe-source-rather-than-a-url

So the iframe tag is in ng-jhipster which does not make it very easy to debug. Have you tried working directly in pure html and try all the related tricks you can found on the web?

[ja1979]

@gmarziou
Yes, you are right. The problem is with iframe and data url which is what ng-jhipster is using to open files.

https://msdn.microsoft.com/en-us/library/cc848897%28v=vs.85%29.aspx

I figured out the problem is present in Edge too.

And yes, I found a solutions overriding JhiDataUtils.openFile method with the following:

    openFile(contentType, data) {
        if (window.navigator && window.navigator.msSaveOrOpenBlob) {
            // console.log('IE');
            const byteCharacters = atob(data);
            const byteNumbers = new Array(byteCharacters.length);
            for (let i = 0; i < byteCharacters.length; i++) {
                byteNumbers[i] = byteCharacters.charCodeAt(i);
            }
            const byteArray = new Uint8Array(byteNumbers);
            const blob = new Blob([byteArray], {
                type: contentType
            });
            window.navigator.msSaveOrOpenBlob(blob);
        } else {
            // console.log('Other Browsers');
            return this.dataUtils.openFile(contentType, data);
        }

    }

It is not the same behavior in IE11, competed with the other browsers, but its is OK.

Could this be considered to be included in ng-jhipster?

PS: Sorry for my English. :D

[gmarziou]

@ja1979 great work! Would you like to submit a pull request to ng-jhipster project?

[ja1979]

@gmarziou Yeap! I will do that.

[gmarziou]

Awesome :)

[deepu105]

closed via jhipster/ng-jhipster#66