files: fix upload of files with special characters in filename

Co-Authored-by: Valeria Granata <[email protected]>

projects/sonar/src/app/app.module.ts

@@ -70,6 +70,7 @@ import { UserComponent } from './record/user/user.component';
 import { ValidationComponent } from './record/validation/validation.component';
 import { UserService } from './user.service';
 import { AdminComponent } from './_layout/admin/admin.component';
+import { UnicodeNormalizerPipe } from './pipe/unicode-normalizer';
 
 export function appInitializerFactory(appInitializerService: AppInitializerService): () => Promise<any> {
   return () => appInitializerService.initialize().toPromise();
@@ -114,7 +115,8 @@ export function minElementError(err: any, field: FormlyFieldConfig) {
     SubdivisionDetailComponent,
     ContributorsPipe,
     ContributionsComponent,
-    ContributionComponent
+    ContributionComponent,
+    UnicodeNormalizerPipe
   ],
   imports: [
     BrowserModule,

projects/sonar/src/app/deposit/upload/upload.component.ts

@@ -190,7 +190,7 @@ export class UploadComponent implements OnInit, AfterContentChecked, OnDestroy {
             concatMap((file: File) => {
               return this._depositService.uploadFile(
                 this.deposit.pid,
-                file.name,
+                encodeURIComponent(file.name),
                 type,
                 file
               );

projects/sonar/src/app/pipe/unicode-normalizer.ts

@@ -0,0 +1,36 @@
+/*
+ * SONAR User Interface
+ * Copyright (C) 2022 RERO
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, version 3 of the License.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import { Pipe, PipeTransform } from '@angular/core';
+
+/**
+ * Get string in its unicode normalized form.
+ */
+@Pipe({
+  name: 'unicode_normalizer'
+})
+export class UnicodeNormalizerPipe implements PipeTransform {
+  /**
+   * Transform string to a unicode normalized form.
+   *
+   * @param string String to transform.
+   * @param unicode Unicode form.
+   * @return Unicode normalized form of string.
+   */
+  transform(string: string, unicodeForm: string) {
+    return string.normalize(unicodeForm);
+  }
+}

projects/sonar/src/app/record/document/file/file.component.html

@@ -18,34 +18,34 @@
   <ng-container *ngIf="file; else noFile">
     <ng-container *ngIf="link; else previewOrExternal">
       <a [routerLink]="link" *ngIf="inRouter; else normalLink">
-        <img src="{{ file.thumbnail }}" class="img-fluid" alt="{{ file.label }}">
+        <img src="{{ file.thumbnail | unicode_normalizer:'NFD' }}" class="img-fluid" alt="{{ file.label }}">
       </a>
       <ng-template #normalLink>
         <a [href]="link">
-          <img src="{{ file.thumbnail }}" class="img-fluid" alt="{{ file.label }}">
+          <img src="{{ file.thumbnail | unicode_normalizer:'NFD' }}" class="img-fluid" alt="{{ file.label }}">
         </a>
       </ng-template>
     </ng-container>
     <ng-template #previewOrExternal>
       <ng-container *ngIf="showExternalLink && file.links.external; else previewLink">
         <a href="{{ file.links.external }}" target="_blank">
-          <img src="{{ file.thumbnail }}" class="img-fluid" alt="{{ file.label }}">
+          <img src="{{ file.thumbnail | unicode_normalizer:'NFD' }}" class="img-fluid" alt="{{ file.label }}">
         </a>
       </ng-container>
       <ng-template #previewLink>
         <ng-container *ngIf="showPreview && file.links.preview; else downloadLink">
-          <a href="{{ file.links.preview }}" (click)="preview(file); $event.preventDefault()">
-            <img src="{{ file.thumbnail }}" class="img-fluid" alt="{{ file.label }}">
+          <a href="{{ file.links.preview | unicode_normalizer:'NFD' }}" (click)="preview(file); $event.preventDefault()">
+            <img src="{{ file.thumbnail | unicode_normalizer:'NFD' }}" class="img-fluid" alt="{{ file.label }}">
           </a>
         </ng-container>
         <ng-template #downloadLink>
           <ng-container *ngIf="showDownload && file.links.download; else noLink">
-            <a href="{{ file.links.download }}?download" *ngIf="showDownload && file.links.download">
-              <img src="{{ file.thumbnail }}" class="img-fluid" alt="{{ file.label }}">
+            <a href="{{ file.links.download | unicode_normalizer:'NFD' }}?download">
+              <img src="{{ file.thumbnail | unicode_normalizer:'NFD' }}" class="img-fluid" alt="{{ file.label }}">
             </a>
           </ng-container>
           <ng-template #noLink>
-            <img src="{{ file.thumbnail }}" class="img-fluid" alt="{{ file.label }}">
+            <img src="{{ file.thumbnail | unicode_normalizer:'NFD' }}" class="img-fluid" alt="{{ file.label }}">
           </ng-template>
         </ng-template>
       </ng-template>
@@ -59,11 +59,11 @@
       <a href="{{ file.links.external }}" target="_blank" *ngIf="showExternalLink && file.links.external">
         <i class="fa fa-external-link mx-1"></i>
       </a>
-      <a href="{{ file.links.preview }}" *ngIf="showPreview && file.links.preview"
+      <a href="{{ file.links.preview | unicode_normalizer:'NFD' }}" *ngIf="showPreview && file.links.preview"
         (click)="preview(file); $event.preventDefault()">
         <i class="fa fa-eye mx-1"></i>
       </a>
-      <a href="{{ file.links.download }}?download" *ngIf="showDownload && file.links.download">
+      <a href="{{ file.links.download | unicode_normalizer:'NFD' }}?download" *ngIf="showDownload && file.links.download">
         <i class="fa fa-download mx-1"></i>
       </a>
       <a href="" *ngIf="statistics && showStatistics"

projects/sonar/src/app/record/document/file/file.component.ts

@@ -80,4 +80,5 @@ export class FileComponent {
   preview(file: DocumentFile): void {
     this.previewClicked.emit(file);
   }
+
 }