upload vue

Author: AlisherAmonulloev

Vue/src/api/amazon.custom.provider.ts

@@ -26,6 +26,7 @@ export class AmazonCustomProvider {
       moveItem: this.moveItem,
       uploadFileChunk: this.uploadFileChunk,
       downloadItems: this.downloadItems,
+      abortFileUpload: this.abortFileUpload,
     };
     this.fileSystemProvider = new CustomFileSystemProvider(options);
   }
@@ -94,6 +95,14 @@ export class AmazonCustomProvider {
       throw new FileSystemError(32767, item, error.message);
     }
   };
+  /* eslint-disable-next-line vue/max-len */
+  abortFileUpload = async(fileData: File, uploadInfo: UploadInfo, destinationDirectory: FileSystemItem): Promise<void> => {
+    try {
+      await this.amazon.abortFileUpload(fileData, uploadInfo, destinationDirectory);
+    } catch (error: any) {
+      throw new Error(error.message);
+    }
+  };
 }
 
 /* eslint-disable-next-line vue/max-len */

Vue/src/api/amazon.filesystem.ts

@@ -12,7 +12,7 @@ export class AmazonFileSystem {
   }
 
   async getItems(key: string): Promise<FileSystemItem[]> {
-    return await this.gateway.getItems(key) as Promise<FileSystemItem[]>;
+    return this.gateway.getItems(key) as Promise<FileSystemItem[]>;
   }
 
   async createDirectory(key: string, name: string): Promise<any> {
@@ -48,14 +48,21 @@ export class AmazonFileSystem {
     }
   }
 
+  async getPresignedDownloadUrl(fileName: string): Promise<any> {
+    return this.gateway.getPresignedDownloadUrl(fileName);
+  }
+
   getFileNameFromKey(key: string): string {
     const index = key.lastIndexOf('/');
     if (index === -1) {
       return key;
     }
     return key.substring(index + 1);
   }
-
+  /* eslint-disable-next-line vue/max-len */
+  async abortFileUpload(fileData: File, uploadInfo: UploadInfo, destinationDirectory: FileSystemItem): Promise<any> {
+    await this.gateway.abortFileUpload(fileData, uploadInfo, destinationDirectory);
+  }
   /* eslint-disable-next-line vue/max-len */
   async uploadFileChunk(fileData: File, uploadInfo: UploadInfo, destinationDirectory: FileSystemItem): Promise<any> {
     try {

Vue/src/api/amazon.gateway.ts

@@ -21,6 +21,18 @@ export class AmazonGateway {
     return `${this.endpointUrl}/${methodName}`;
   }
 
+  logRequest(method: string, url: URL, requestUrl: string): void {
+    if (!this.onRequestExecuted) {
+      return;
+    }
+    const params = {
+      method,
+      urlPath: requestUrl,
+      queryString: url.toString().replace(requestUrl, ''),
+    };
+    this.onRequestExecuted(params);
+  }
+
   removeUploadData(fileName: string): void {
     const index = this.uploadData.findIndex((data) => data.key === fileName);
     if (index !== -1) {
@@ -47,45 +59,64 @@ export class AmazonGateway {
   async getItems(path: string): Promise<any> {
     const params = { path };
     const requestParams = { method: 'GET' };
-    return this.makeRequestAsync('getItems', params, requestParams);
+    return this.makeRequest('getItems', params, requestParams);
   }
 
   async createDirectory(path: string, name: string): Promise<void> {
     const params = { path, name };
     const requestParams = { method: 'PUT' };
-    await this.makeRequestAsync('createDirectory', params, requestParams);
+    await this.makeRequest('createDirectory', params, requestParams);
   }
 
   async renameItem(key: string, parentPath: string, name: string): Promise<any> {
     const params = { key, directory: parentPath, newName: name };
     const requestParams = { method: 'PUT' };
-    await this.makeRequestAsync('renameItem', params, requestParams);
+    await this.makeRequest('renameItem', params, requestParams);
   }
 
   async deleteItem(key: string): Promise<any> {
     const params = { item: key };
     const requestParams = { method: 'POST' };
-    await this.makeRequestAsync('deleteItem', params, requestParams);
+    await this.makeRequest('deleteItem', params, requestParams);
   }
 
   async copyItem(sourceKey: string, destinationKey: string): Promise<any> {
     const params = { sourceKey, destinationKey };
     const requestParams = { method: 'PUT' };
-    await this.makeRequestAsync('copyItem', params, requestParams);
+    await this.makeRequest('copyItem', params, requestParams);
   }
 
   async moveItem(sourceKey: string, destinationKey: string): Promise<any> {
     const params = { sourceKey, destinationKey };
     const requestParams = { method: 'POST' };
-    await this.makeRequestAsync('moveItem', params, requestParams);
+    await this.makeRequest('moveItem', params, requestParams);
   }
 
   async downloadItems(keys: string[]): Promise<any> {
     const params = {};
     const requestParams = { method: 'POST', body: JSON.stringify(keys), headers: this.defaultHeaders };
-    return this.makeRequestAsync('downloadItems', params, requestParams);
+    return this.makeRequest('downloadItems', params, requestParams);
+  }
+
+  async getPresignedDownloadUrl(fileName: string): Promise<any> {
+    const params = { key: fileName };
+    const requestOptions = {
+      method: 'POST',
+      headers: this.defaultHeaders,
+    };
+    return this.makeRequest('getPresignedDownloadUrl', params, requestOptions);
   }
 
+  async initUpload(fileData: File, destinationDirectory: FileSystemItem): Promise<any> {
+    const params = { key: `${destinationDirectory.key}${fileData.name}` };
+    const requestOptions = {
+      method: 'POST',
+      headers: this.defaultHeaders,
+    };
+
+    const uploadId = await this.makeRequest('initUpload', params, requestOptions);
+    this.initUploadData(params.key, uploadId);
+  }
   /* eslint-disable-next-line vue/max-len */
   async uploadPart(fileData: File, uploadInfo: UploadInfo, destinationDirectory: FileSystemItem): Promise<any> {
     const params = {};
@@ -103,11 +134,10 @@ export class AmazonGateway {
       body: data,
     };
 
-    const etag = await this.makeRequestAsync('uploadPart', params, requestOptions);
+    const etag = await this.makeRequest('uploadPart', params, requestOptions);
     // partNumber must be > 0
     this.addPartToUploadData(key, { PartNumber: uploadInfo.chunkIndex + 1, ETag: etag });
   }
-
   /* eslint-disable-next-line vue/max-len */
   async completeUpload(fileData: File, uploadInfo: UploadInfo, destinationDirectory: FileSystemItem): Promise<any> {
     const key = `${destinationDirectory.key}${fileData.name}`;
@@ -121,50 +151,63 @@ export class AmazonGateway {
       body: JSON.stringify(this.getParts(key)),
     };
 
-    await this.makeRequestAsync('completeUpload', params, requestOptions);
+    await this.makeRequest('completeUpload', params, requestOptions);
     this.removeUploadData(key);
   }
-
-  async initUpload(fileData: File, destinationDirectory: FileSystemItem): Promise<any> {
-    const params = { key: `${destinationDirectory.key}${fileData.name}` };
+  /* eslint-disable-next-line vue/max-len */
+  async abortFileUpload(fileData: File, uploadInfo: UploadInfo, destinationDirectory: FileSystemItem): Promise<any> {
+    const key = `${destinationDirectory?.key ?? ''}${fileData.name}`;
+    const uploadId = this.getUploadId(fileData.name);
+    const params = { uploadId, key };
     const requestOptions = {
       method: 'POST',
       headers: this.defaultHeaders,
     };
-
-    const uploadId = await this.makeRequestAsync('initUpload', params, requestOptions);
-    this.initUploadData(params.key, uploadId);
+    return this.makeRequest('abortUpload', params, requestOptions);
   }
 
-  /* eslint-disable-next-line vue/max-len */
-  async makeRequestAsync(method: string, queryParams: any, requestParams: RequestInit): Promise<any> {
+  async makeRequest(method: string, queryParams: any, requestParams: RequestInit): Promise<any> {
     const requestUrl = this.getRequestUrl(method);
     const url = new URL(requestUrl);
     Object.keys(queryParams).forEach((key) => url.searchParams.append(key, queryParams[key]));
 
-    if (this.onRequestExecuted) {
-      const params = {
-        method,
-        urlPath: requestUrl,
-        queryString: url.toString().replace(requestUrl, ''),
-      };
-      this.onRequestExecuted(params);
+    this.logRequest(method, url, requestUrl);
+    try {
+      const response = await fetch(url.toString(), requestParams);
+      if (!response.ok) {
+        const errorMessage = await response.text();
+        throw new Error(errorMessage);
+      }
+      /* eslint-disable-next-line @typescript-eslint/no-unsafe-return */
+      return await this.getResponseData(response);
+    } catch (error: any) {
+      throw new Error(error);
     }
-    const response = await fetch(url.toString(), requestParams);
+  }
 
-    if (!response.ok) {
-      const errorMessage = await response.text();
-      throw new Error(errorMessage);
+  getResponseData(response: Response): Promise<any | Blob | string> {
+    if (this.containsAttachment(response)) {
+      return response.blob();
     }
+    if (this.containsPlainText(response)) {
+      return response.text();
+    }
+    return response.json();
+  }
+
+  containsAttachment(response: Response): boolean {
     const contentDisposition = response.headers.get('Content-Disposition');
     if (contentDisposition?.includes('attachment')) {
-      // processing downloadItems request
-      return response.blob();
+      return true;
     }
+    return false;
+  }
+
+  containsPlainText(response: Response): boolean {
     const contentType = response.headers.get('Content-Type');
     if (!contentType || contentType.includes('text/plain')) {
-      return response.text();
+      return true;
     }
-    return response.json();
+    return false;
   }
 }

Vue/src/components/HomeContent.vue

@@ -3,7 +3,7 @@ import { ref } from 'vue';
 import type { Ref } from 'vue';
 
 import {
-  DxFileManager, DxPermissions
+  DxFileManager, DxPermissions, DxUpload
 } from 'devextreme-vue/file-manager';
 
 import 'devextreme/dist/css/dx.material.blue.light.compact.css';
@@ -29,6 +29,7 @@ const fileSystemProvider = getAmazonFileSystemProvider(endpointUrl, onRequestExe
       :file-system-provider="fileSystemProvider"
       :allowed-file-extensions="allowedFileExtensions"
     >
+      <DxUpload :chunk-size="5242880"/>
       <DxPermissions/>
       <DxPermissions
         :create="true"