メインコンテンツまでスキップ

APIを使ったファイルのアップロードについて

概要

コンテンツ、フォーム、メンバーなどにAPIを利用してファイルをアップロードする場合、Files::uploadのエンドポイントを利用して、ファイルをKurocoの一時領域にアップロードし、応答として返されるfile_idを各エンドポイントにPOSTしてコンテンツを更新します。

SwaggerUIで動作の確認をすると、以下の手順になります。

手順

  1. Files::uploadのエンドポイントにファイルをアップロードする。
    Files::uploadのエンドポイントを開くと、[ファイルを選択]のボタンが表示されるので、アップロードするファイルを選択します。

    Image from Gyazo

    ヒント

    ファイル送信時のリクエストヘッダには'Content-Type': 'multipart/form-data'を指定します。

  2. レスポンスからfile_idを確認する
    ファイルの一時領域へのアップロードが成功すると、file_idを含むレスポンスが表示されます。

    Image from Gyazo

  3. file_idをコンテンツを更新するエンドポイントにPOSTする
    更新・追加したいコンテンツを操作するエンドポイントに対して、file_idを指定してリクエストを送ります。

    Image from Gyazo

    備考

    キャプチャの例ではMember::updateにリクエストを送っています。
    コンテンツのHTML項目・Wysiwyg項目のHTML内に <img src="https://[KurocoFilesホスト]/files/temp/**.jpg"> のようにimgタグやaタグがあるとそのパスも更新されます。

  4. リクエストが成功したことを確認する
    レスポンスとコンテンツを確認します。

    Image from Gyazo

フロントエンドでの具体的なコードの例は関連ドキュメントを参照してください。

関連ドキュメント


サポート

お探しのページは見つかりましたか?解決しない場合は、問い合わせフォームからお問い合わせいただくか、Slackコミュニティにご参加ください。