やっはろー♪
へっぽこだよ。
前回の記事の続きです。
前回やったところは解説してないので、わからない人は出直してきてね。
ReactからRails経由でS3へファイルをアップロードする方法
RailsからURLを受け取る
以下のコードをコピペしてください。
import axios from "axios";
import Button from "@mui/material/Button";
import DownloadIcon from "@mui/icons-material/Download";
import React from "react";
export default function APP() {
const [fileId, setFileId] = React.useState(1);
const onDownload = async () => {
await axios
.get(`http://localhost:3000/download_file/`, {
params: {
id: fileId
}
})
.then((response) => {
if (response.data.env) {
window.open(`http://localhost:3000${response.data.download_url}`);
} else {
window.open(response.data.download_url);
}
})
.catch(() => {
//Railsで処理が失敗したときの処理
});
};
return (
<div>
<Button size="medium" startIcon={<DownloadIcon />} onClick={onDownload}> ダウンロードする </Button>
</div>
);
}
コードサンドボックス：サンプル
↑でどんな感じか確認できます。
.get(`http://localhost:3000/download_file/`, {
params: {
id: fileId
}
})ここでRailsにアクセスします。
idにはファイルIDが格納されています。
ファイルは複数保存されているはずなので、状況によってsetFileIdでIDを変更してください。
今回はあくまでサンプルなので初期値の0のまま進めていきます。
paramsにidを入れてrailsに渡します。
if (response.data.env) {
window.open(`http://localhost:3000${response.data.download_url}`);
} else {
window.open(response.data.download_url);
}↑はRailsでファイルのURLを取得したあとの処理です。
window.openで強制的にブラウザのタブを開かせます。
S3に保存されたファイルだと、Carrierwaveが出力したURLのままで大丈夫ですが、ローカルだとhttp://localhost:3000をつけないといけないため注意が必要です。
RailsからURLを受け取る
def download_file
download_url = User.find_by(id: params[:id]).file.url
env = Rails.env.development?
render json: { download_url: download_url, env: env }
endCarrierwaveが紐付いたカラムは.urlという形でダウンロードするためのURLを呼び出せます。
本番とローカルのダウンロードURLの形式が違うため、envに開発環境のtrue/falseを格納します。
おわり
これで先程言ったように
if (response.data.env) {
window.open(`http://localhost:3000${response.data.download_url}`);
} else {
window.open(response.data.download_url);
}が反応してwindow.openを使ってダウンロードに必要なURLを強制的に開きます。
前回の記事と今回の記事をすべてやった方はファイルをAWSやローカルにアップロードしてダウンロードできたのではないでしょうか。
なにか不足してるものがあったらコメント欄までください。
以上、へっぽこでした。
