タイトル: AngularでPresigned URLを使用してS3にマルチパートアップロードを行うサンプルコード
こんにちは、みなさん。今日はAngularを使用してS3にマルチパートアップロードを行う方法についてご紹介します。特に、Presigned URLを使用する方法に焦点を当てて解説していきます。
S3にはファイルを直接アップロードする方法や、Presigned URLを取得してからアップロードする方法の2つがあります。今回は後者の方法を紹介します。Presigned URLを使用することで、署名付きのURLを生成し、これを使ってクライアント側から直接S3にファイルをアップロードすることができます。
それでは、具体的なサンプルコードを見ていきましょう。以下はAngularでマルチパートアップロードを実現するためのサンプルコードです。
```typescript
import { HttpClient } from '@angular/common/http';
export class S3UploadService {
constructor(private http: HttpClient) {}
public getPresignedUrl(file: File): Promise<string> {
return this.http.get<string>('/api/s3-url', { params: { filename: file.name } }).toPromise();
}
public uploadFileToS3(file: File): Promise<void> {
return new Promise<void>*1;
}
};
xhr.onerror = () => {
reject(Error('Upload failed. Please try again later.'));
};
xhr.upload.onprogress = (event) => {
const progress = Math.round*2;
});
}
}
```
この例では、`S3UploadService`というクラスを作成しています。このクラスでは、`getPresignedUrl`メソッドを使ってPresigned URLを取得し、`uploadFileToS3`メソッドを使ってファイルをS3にアップロードします。
`getPresignedUrl`メソッドでは、HTTPクライアントを使用してサーバーサイドのAPIエンドポイントからPresigned URLを取得しています。このコードでは、APIエンドポイントのURLは`/api/s3-url`であり、`filename`パラメーターにファイル名を指定しています。
`uploadFileToS3`メソッドでは、Presigned URLを取得してから、そのURLを使用してファイルをアップロードしています。XMLHttpRequestを使用してPUTリクエストを送信し、ファイルデータを送信します。アップロードの進捗状況を監視し、完了時に`resolve`を呼び出してPromiseを解決します。
ここで、`S3UploadService`クラスを使って実際にファイルをアップロードするコンポーネントファイルを作成してみましょう。
```typescript
import { Component } from '@angular/core';
import { S3UploadService } from 's3-upload.service';
@Component({
selector: 'app-upload',
template: `
<input type="file" (change)="onFileSelect($event.target.files)" />
`,
})
export class UploadComponent {
constructor(private s3UploadService: S3UploadService) {}
public onFileSelect(files: FileList): void {
if (files.length > 0) {
const file = files[0];
this.s3UploadService
.uploadFileToS3(file)
.then(() => {
console.log('File uploaded successfully.');
})
.catch((error) => {
console.error('File upload failed:', error);
});
}
}
}
```
このコンポーネントでは、ユーザーがファイルを選択すると、`onFileSelect`メソッドが呼び出されます。このメソッドでは、`FileList`オブジェクトから最初のファイルを取得し、`S3UploadService`を使用してファイルをS3にアップロードします。
以上がAngularを使用してPresigned URLを使ったS3へのマルチパートアップロードを行うサンプルコードです。このコードを参考にして、自身のプロジェクトに適用してみてください。お役に立てることを願っています！
this.getPresignedUrl(file)
.then((presignedUrl: string) => {
const xhr = new XMLHttpRequest();
xhr.open('PUT', presignedUrl, true);
xhr.setRequestHeader('Content-Type', file.type);
xhr.onload = () => {
if (xhr.status === 200) {
resolve();
} else {
reject(Error(`Unexpected status code: ${xhr.status}`
*2:event.loaded / event.total) * 100);
console.log(`Upload progress: ${progress}%`);
};
xhr.send(file);
})
.catch((error) => reject(error
