javascriptからAWS S3へのアップロード

Every Qiita #7
のんびり独学初学者の毎日投稿チャレンジ 7日目
今回は・・・
自作コミュニティアプリ開発にてjavascriptからサーバー側へのデータ受け渡し、コントローラでS3への保存を実装した時の備忘録になります。

###Ajaxでデータを送信

index.js

 function json(url){
    // リクエストインスタンスの生成
   var xhr = new XMLHttpRequest();
  // csrfトークンの生成
   let csrf_token = document.getElementById('csrf_token').getAttribute('content');
   // 送信先の設定
   xhr.open('post',url);
   // ヘッダーの設定
   xhr.setRequestHeader('X-CSRF-Token', csrf_token);
   return xhr;
}

var xhr = json(routeで設定したパス);
// データ送信
xhr.send(送信するプロパティ);

####解説

1. json形式でファイルを送信するのでnew XMLHttpRequest()でインスタンスを生成します
2. リクエストにはヘッダーとメソッド・送信先のパス、プロパティが必要になります
3. laravelにはcsrfトークンがデフォルトで記載されているのでviews/layouts/app.blade.phpから持ってきます。
4. メソッドはデータを送信するのでpostにします。urlはrouteで設定したパスを記述します
5. 関数にしておくことで、パスを引数に設定すれば非同期でデータを送信することができます。
6. 関数を呼び出し、sendメソッドでデータを送信します。

###controllerで受け取りS３へアップロード

public function img_upload(Request $request){
  // s3へのアップロード 第一引数は任意のフォルダ名をつける
  $path = Storage::disk('s3')->putFile('/question', $request->image, 'public');
  // フルパスの取得
  return Storage::disk('s3')->url($path);
}

####解説

1. 今回はimg_uploadメソッドで画像をアップロード処理をしていきます。
2. $requestにjsonで送られたデータが格納されています。
3. データはFormDataオブジェクトでname="image"に画像パスが入っています。
4. Storage::disk('s3')とすることでAWSのS3ストレージへ接続できます
5. AWS設定についてはこちらの記事を参考にさせて頂きました。@nobu0717さんありがとうございました！
6. putFileメソッドで任意のディレクトリに保存することができます。
7. 第一引数はパスになります。（/以下は自動的にディレクトリが生成されるので何でもいいです）
8. 第二引数には値が入ります。今回は$requestのimageキーに値が設置してますので、上記のようになります。
9. return では保存した画像パスをレスポンスとして返すことでjavascriptで操作できます。

questionディレクトリが作成されました。画像はこのディレクトリ配下に保存されます。