Merge pull request #4535 from crazyserver/MOBILE-4820

MOBILE-4820 image-edit: Fix image format

Author: dpalou

src/core/features/user/pages/about/about.ts

@@ -40,6 +40,7 @@ import {
 } from '@features/user/constants';
 import { CoreModals } from '@services/overlays/modals';
 import { CoreFile } from '@services/file';
+import { CoreFileUtils } from '@singletons/file-utils';
 
 /**
  * Page that displays info about a user.
@@ -187,14 +188,15 @@ export default class CoreUserAboutPage implements OnInit, OnDestroy {
         try {
             let fileEntry = await CoreFileUploaderHelper.selectFile(maxSize, false, title, mimetypes);
             const fileObject = await CoreFile.getFileObjectFromFileEntry(fileEntry);
+            const image = await CoreFileUtils.filetoBlob(fileObject);
 
             const { CoreViewerImageEditComponent } = await import('@features/viewer/components/image-edit/image-edit');
 
             const editedImageBlob = await CoreModals.openModal<Blob>({
                 component: CoreViewerImageEditComponent,
                 cssClass: 'core-modal-fullscreen',
                 componentProps: {
-                    image: fileObject,
+                    image,
                 },
             });
 

src/core/features/viewer/components/image-edit/image-edit.ts

@@ -16,7 +16,6 @@ import { Component, input, signal, viewChild } from '@angular/core';
 import { ModalController } from '@singletons';
 import { CoreSharedModule } from '@/core/shared.module';
 import { ImageCropperComponent, ImageTransform } from 'ngx-image-cropper';
-import { IFile } from '@awesome-cordova-plugins/file/ngx';
 import { CoreAlerts } from '@services/overlays/alerts';
 
 /**
@@ -35,7 +34,7 @@ import { CoreAlerts } from '@services/overlays/alerts';
 export class CoreViewerImageEditComponent {
 
     readonly editTool = viewChild.required(ImageCropperComponent);
-    readonly image = input.required<IFile>();
+    readonly image = input.required<Blob>();
     readonly transform = signal<ImageTransform>({
         scale: 1,
         rotate: 0,

src/core/singletons/file-utils.ts

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import { CoreFileEntry } from '@services/file-helper';
-import { FileEntry } from '@awesome-cordova-plugins/file/ngx';
+import { FileEntry, IFile } from '@awesome-cordova-plugins/file/ngx';
 import { Translate } from '@singletons';
 
 /**
@@ -100,4 +100,27 @@ export class CoreFileUtils {
         return file;
     }
 
+    /**
+     * Transform a file object to Blob.
+     *
+     * @param fileEntry File to transform.
+     * @returns Promise resolved with the Blob.
+     */
+    static filetoBlob(fileEntry: IFile): Promise<Blob> {
+        return new Promise((resolve, reject): void => {
+            const reader = new FileReader();
+            reader.onload = () => {
+                if (!reader.result) {
+                    reject(new Error('FileReader returned no result.'));
+
+                    return;
+                }
+                resolve(new Blob([new Uint8Array(reader.result as ArrayBuffer)], { type: fileEntry.type }));
+            };
+            reader.onerror = reject;
+
+            return reader.readAsArrayBuffer(fileEntry);
+        });
+    }
+
 }