Fix for https://github.com/GNS3/gns3-web-ui/issues/983

package.json

@@ -80,6 +80,7 @@
     "save-svg-as-png": "^1.4.14",
     "schematics-scss-migrate": "^1.2.10",
     "snyk": "^1.413.3",
+    "spark-md5": "^3.0.1",
     "svg-crowbar": "^0.6.1",
     "tree-kill": "^1.2.1",
     "tslib": "^2.0.0",

src/app/components/project-map/new-template-dialog/new-template-dialog.component.html

@@ -167,7 +167,7 @@
                                         type="file"
                                         class="non-visible"
                                         #file2
-                                        (change)="importImage($event)"
+                                        (change)="importImage($event, version.images.hda_disk_image)"
                                         ng2FileSelect
                                         [uploader]="uploaderImage"/>
                                     <button class="button" mat-raised-button (click)="file2.click()">Import</button>
@@ -188,7 +188,7 @@
                                         type="file"
                                         class="non-visible"
                                         #file3
-                                        (change)="importImage($event)"
+                                        (change)="importImage($event, version.images.hdb_disk_image)"
                                         ng2FileSelect
                                         [uploader]="uploaderImage"/>
                                     <button class="button" mat-raised-button (click)="file3.click()">Import</button>
@@ -235,7 +235,7 @@
                                     type="file"
                                     class="non-visible"
                                     #file2
-                                    (change)="importImage($event)"
+                                    (change)="importImage($event, image.filename)"
                                     ng2FileSelect
                                     [uploader]="uploaderImage"/>
                                 <button class="button" mat-raised-button (click)="file2.click()">Import</button>
@@ -271,7 +271,7 @@
                                     type="file"
                                     class="non-visible"
                                     #file2
-                                    (change)="importImage($event)"
+                                    (change)="importImage($, image.filename)"
                                     ng2FileSelect
                                     [uploader]="uploaderImage"/>
                                 <button class="button" mat-raised-button (click)="file2.click()">Import</button>

src/app/components/project-map/new-template-dialog/new-template-dialog.component.ts

@@ -30,6 +30,7 @@ import { ComputeService } from '../../../services/compute.service';
 import { InformationDialogComponent } from '../../../components/dialogs/information-dialog.component';
 import { ProgressService } from '../../../common/progress/progress.service';
 import { TemplateNameDialogComponent } from './template-name-dialog/template-name-dialog.component';
+import * as SparkMD5 from 'spark-md5';
 
 @Component({
     selector: 'app-new-template-dialog',
@@ -334,7 +335,29 @@ export class NewTemplateDialogComponent implements OnInit {
         dialogRef.componentInstance.appliance = object;
     }
 
-    importImage(event) {
+    importImage(event, imageName) {
+        this.computeChecksumMd5(event.target.files[0], false).then((output) => {
+            let imageToInstall = this.applianceToInstall.images.filter(n => n.filename === imageName)[0];
+
+            if (imageToInstall.md5sum !== output) {
+                const dialogRef = this.dialog.open(InformationDialogComponent, {
+                    width: '400px',
+                    height: '200px',
+                    autoFocus: false,
+                    disableClose: true
+                });
+                dialogRef.componentInstance.confirmationMessage = `This is not the correct file. 
+                    The MD5 sum is ${output} and should be ${imageToInstall.md5sum}. Do you want to accept it at your own risks?`;
+                dialogRef.afterClosed().subscribe((answer: boolean) => {
+                    if (answer) this.importImageFile(event);
+                });
+            } else {
+                this.importImageFile(event);
+            }
+        });
+    }
+
+    importImageFile(event) {
         let name = event.target.files[0].name.split('-')[0];
         let fileName = event.target.files[0].name;
         let file = event.target.files[0];
@@ -613,6 +636,36 @@ export class NewTemplateDialogComponent implements OnInit {
             }
         });
     }
+
+    private computeChecksumMd5(file: File, encode = false): Promise<string> {
+        return new Promise((resolve, reject) => {
+            const chunkSize = 2097152;
+            const spark = new SparkMD5.ArrayBuffer();
+            const fileReader = new FileReader();
+            let cursor = 0;
+        
+            fileReader.onerror = function(): void {
+                reject('MD5 computation failed - error reading the file');
+            };
+
+            function processChunk(chunkStart: number): void {
+                const chunkEnd = Math.min(file.size, chunkStart + chunkSize);
+                fileReader.readAsArrayBuffer(file.slice(chunkStart, chunkEnd));
+            }
+
+            fileReader.onload = function(e: any): void {
+                spark.append(e.target.result);
+                cursor += chunkSize;
+                if (cursor < file.size) {
+                    processChunk(cursor);
+                } else {
+                    resolve(spark.end(encode));
+                }
+            };
+        
+            processChunk(0);
+        });
+    }
 }
 
 function compareNames(a: string, b: string, isAsc: boolean) {

yarn.lock

@@ -11148,6 +11148,11 @@ sourcemap-codec@^1.4.4, sourcemap-codec@^1.4.8:
   resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
   integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
 
+spark-md5@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/spark-md5/-/spark-md5-3.0.1.tgz#83a0e255734f2ab4e5c466e5a2cfc9ba2aa2124d"
+  integrity sha512-0tF3AGSD1ppQeuffsLDIOWlKUd3lS92tFxcsrh5Pe3ZphhnoK+oXIBTzOAThZCiuINZLvpiLH/1VS1/ANEJVig==
+
 spdx-compare@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/spdx-compare/-/spdx-compare-1.0.0.tgz#2c55f117362078d7409e6d7b08ce70a857cd3ed7"