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

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(送信するプロパティ);

解説

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

解説

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

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