refactor(upload): use file extensions for valid file types instead of…

… MIME types (DEV-1203) (#808)

* refactor(upload): use file extensions for valid file types instead of MIME types

* chore(upload): align allowed file types with dsp-api v24.0.1

* chore(upload): alphabetize supported file types

src/app/project/ontology/default-data/default-resource-classes.ts

@@ -128,7 +128,7 @@ export class DefaultResourceClasses {
         },
         {
             iri: Constants.DocumentRepresentation,
-            label: 'Document (PDF, etc.)',
+            label: 'Document',
             icons: [
                 'description',
                 'article',
@@ -143,7 +143,7 @@ export class DefaultResourceClasses {
         },
         {
             iri: Constants.ArchiveRepresentation,
-            label: 'Archive (zip, x-tar, gzip)',
+            label: 'Archive',
             icons: [
                 'archive',
                 'folder',

src/app/workspace/resource/representation/archive/archive.component.ts

@@ -82,7 +82,7 @@ export class ArchiveComponent implements OnInit, AfterViewInit {
         document.body.removeChild(e);
     }
 
-    openReplaceFileDialog(){
+    openReplaceFileDialog() {
         const propId = this.parentResource.properties[Constants.HasArchiveFileValue][0].id;
 
         const dialogConfig: MatDialogConfig = {
@@ -91,7 +91,7 @@ export class ArchiveComponent implements OnInit, AfterViewInit {
             position: {
                 top: '112px'
             },
-            data: { mode: 'replaceFile', title: 'Archive (zip, x-tar, gzip)', subtitle: 'Update the archive file of this resource' , representation: 'archive', id: propId },
+            data: { mode: 'replaceFile', title: 'Archive', subtitle: 'Update the archive file of this resource', representation: 'archive', id: propId },
             disableClose: true
         };
         const dialogRef = this._dialog.open(

src/app/workspace/resource/representation/upload/upload.component.html

@@ -9,13 +9,9 @@
             <app-progress-indicator *ngIf="isLoading"></app-progress-indicator>
             <p class="title">Upload file<br>
                 <span class="mat-body-1">The following file types are supported:<br>
-                    <span *ngIf="representation !== 'audio' && representation !== 'text'">
-                        <span *ngFor="let item of allowedFileTypes; let last = last">{{ item | split: '/':1 }}
-                            <span *ngIf="!last">,&nbsp;</span>
-                        </span>
+                    <span *ngFor="let item of allowedFileTypes; let last = last">{{ item }}
+                        <span *ngIf="!last">,&nbsp;</span>
                     </span>
-                    <span *ngIf="representation === 'audio'">&nbsp;mp3</span>
-                    <span *ngIf="representation === 'text'">&nbsp;csv, txt, xml</span>
                 </span>
             </p>
             <div class="bottom-line">
@@ -55,4 +51,4 @@
             </div>
         </ng-container>
     </form>
-</div>
+</div>

src/app/workspace/resource/representation/upload/upload.component.spec.ts

@@ -36,7 +36,7 @@ class TestHostComponent implements OnInit {
 }
 
 describe('UploadComponent', () => {
-    const mockFile = new File(['1'], 'testfile', { type: 'image/jpeg' });
+    const mockFile = new File(['1'], 'testfile.jpg', { type: 'image/jpeg' });
 
     const fb = new FormBuilder();
 
@@ -122,16 +122,15 @@ describe('UploadComponent', () => {
 
     describe('isFileTypeSupported', () => {
         it('should return true for the supported image files', () => {
-            const fileTypes = ['image/jpeg', 'image/jp2', 'image/tiff', 'image/tiff-fx', 'image/png'];
+            const fileTypes = ['jpg', 'jpeg', 'jp2', 'tiff', 'tif', 'png'];
 
             for (const type of fileTypes) {
                 expect(testHostComponent.uploadComp['_isFileTypeSupported'](type)).toBeTruthy();
             }
         });
 
         it('should return false for unsupported image files', () => {
-            // --> TODO: add real unsupported filetypes?
-            const fileTypes = ['image/a', 'image/b', 'image/c', 'image/d', 'image/e'];
+            const fileTypes = ['gif', 'bmp', 'psd', 'raw', 'pdf', 'eps', 'ai', 'indd'];
             for (const type of fileTypes) {
                 expect(testHostComponent.uploadComp['_isFileTypeSupported'](type)).toBeFalsy();
             }

src/app/workspace/resource/representation/upload/upload.component.ts

@@ -46,13 +46,13 @@ export class UploadComponent implements OnInit {
     thumbnailUrl: string | SafeUrl;
 
     allowedFileTypes: string[];
-    // todo: maybe we can use this list to display which file format is allowed to
-    supportedImageTypes = ['image/jpeg', 'image/jp2', 'image/tiff', 'image/tiff-fx', 'image/png'];
-    supportedDocumentTypes = ['application/pdf'];
-    supportedAudioTypes = ['audio/mpeg'];
-    supportedVideoTypes = ['video/mp4'];
-    supportedArchiveTypes = ['application/zip', 'application/x-tar', 'application/gzip'];
-    supportedTextTypes = ['application/csv', 'application/xml', 'text/csv', 'text/plain', 'text/xml'];
+
+    supportedAudioTypes = ['mp3', 'wav'];
+    supportedArchiveTypes = ['7z', 'gz', 'gzip', 'tar', 'tgz', 'z', 'zip'];
+    supportedDocumentTypes = ['doc', 'docx', 'pdf', 'ppt', 'pptx', 'xls', 'xlsx'];
+    supportedImageTypes = ['jp2', 'jpg', 'jpeg', 'png', 'tif', 'tiff'];
+    supportedTextTypes = ['csv', 'txt', 'xml', 'xsd', 'xsl'];
+    supportedVideoTypes = ['mp4'];
 
     constructor(
         private _fb: FormBuilder,
@@ -84,7 +84,7 @@ export class UploadComponent implements OnInit {
             this.file = files[0];
 
             // only certain filetypes are supported
-            if (!this._isFileTypeSupported(this.file.type)) {
+            if (!this._isFileTypeSupported(this.file.name.split('.').pop())) {
                 const error = 'ERROR: File type not supported';
                 this._notification.openSnackBar(error);
                 this.file = null;
@@ -240,7 +240,6 @@ export class UploadComponent implements OnInit {
                 break;
 
             default:
-                // --> TODO for UPLOAD: expand with other representation file types
                 break;
         }
 
@@ -292,11 +291,9 @@ export class UploadComponent implements OnInit {
                 break;
 
             default:
-                // --> TODO for UPLOAD: expand with other representation file types
                 break;
         }
 
-        // const fileValue = new UpdateStillImageFileValue();
         fileValue.filename = filename;
         fileValue.id = id;