diff --git a/src/app/app.ios.scss b/src/app/app.ios.scss index f5b16d95e..2655a2276 100644 --- a/src/app/app.ios.scss +++ b/src/app/app.ios.scss @@ -98,4 +98,17 @@ ion-app.app-root.ios { border-color: $checkbox-ios-icon-border-color-off; background-color: $checkbox-ios-background-color-off; } + + // File Uploader + // In iOS the input is 1 level higher, so the styles are different. + .action-sheet-ios input.core-fileuploader-file-handler-input { + position: absolute; + @include position(null, 0, null, 0); + min-width: 100%; + min-height: $action-sheet-ios-button-min-height; + opacity: 0; + outline: none; + z-index: 100; + cursor: pointer; + } } \ No newline at end of file diff --git a/src/core/fileuploader/providers/file-handler.ts b/src/core/fileuploader/providers/file-handler.ts index 4479880f0..36bda2bf4 100644 --- a/src/core/fileuploader/providers/file-handler.ts +++ b/src/core/fileuploader/providers/file-handler.ts @@ -71,6 +71,7 @@ export class CoreFileUploaderFileHandler implements CoreFileUploaderHandler { if (element) { const input = document.createElement('input'); input.setAttribute('type', 'file'); + input.classList.add('core-fileuploader-file-handler-input'); if (mimetypes && mimetypes.length && (!this.platform.is('android') || mimetypes.length == 1)) { // Don't use accept attribute in Android with several mimetypes, it's not supported. input.setAttribute('accept', mimetypes.join(', ')); @@ -112,7 +113,22 @@ export class CoreFileUploaderFileHandler implements CoreFileUploaderHandler { }); }); - element.appendChild(input); + if (this.platform.is('ios')) { + // In iOS, the click on the input stopped working for some reason. We need to put it 1 level higher. + element.parentElement.appendChild(input); + + // Animate the button when the input is clicked. + input.addEventListener('mousedown', () => { + element.classList.add('activated'); + }); + input.addEventListener('mouseup', () => { + this.platform.timeout(() => { + element.classList.remove('activated'); + }, 80); + }); + } else { + element.appendChild(input); + } } } };