Ajax通信を利用したファイルアップロードができない

https://symfoware.blog.fc2.com/?no=2565
こちらの記事を参考にファイルアップロードの仕組みを作りました。
ローカル環境では無事にプロジェクトファイル直下にファイルが作成されたのですが、herokuにデプロイした後に試してみたところプロジェクトファイル直下に書き込まれませんでした。何故でしょうか。
エラーが出ているわけではなく、正常に動いています。
何かわかる方いましたらご教授お願いいたします。

app.js(一部抜粋)
1app.set('view engine', 'ejs');
2
3app.use(express.raw({limit: '15mb'}));
4
5app.get('/connect', async (req, res) => {
6  res.render('upload.ejs');
7});
8
9app.post('/upload', async (req, res) => {
10  connection.query(
11    'SELECT id FROM tweets ORDER by id DESC limit 1;',
12    (error, results) => {
13      var logNo = results[0].id;
14      console.log(logNo);
15      fs.writeFileSync(logNo+'.kml', req.body);
16      res.send('ok');
17    });
18});

upload.ejs
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
6    <title>ajax post</title>
7    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
8</head>
9<body>
10    <div>
11        <label>kmlファイル選択：</label>
12        <input accept="file*" id="image" type="file">
13    </div>
14    <div>
15        <button id="upload">アップロード</button>
16    </div>
17<script>
18$(() => {
19    const upload = (binaryData) => {
20        $.ajax({
21            url: 'upload',
22            type: 'POST',
23            data: binaryData,
24            processData: false,
25            contentType: 'application/octet-stream'
26        }).done((data) => { 
27            console.log('成功');
28        }).fail(() => {
29            console.log('失敗');
30        });
31    };
32    $('#upload').on('click', () => {
33        if (!$('#image').prop('files').length) {
34            console.log('画像未選択');
35            return false;
36        }
37
38        const file = $('#image').prop('files').item(0);
39
40        console.log(file.name);
41
42        console.log(file.type);
43
44        console.log(file.size);
45
46        const reader = new FileReader();
47        reader.onloadend = () => {
48
49            upload(reader.result);
50        };
51        reader.readAsArrayBuffer(file);
52    });
53});
54</script>
55</body>
56</html>

yambejp

2022/04/18 01:20

#uploadをクリックしたときにformに予め取り込んでおいた#imageの画像をアップロードする仕様でしょうか？

hoshi-takanori

2022/04/18 01:33 編集

heroku ではローカルファイルの書き込み内容はしばらくすると消える仕様になってます。 https://qiita.com/niha28niwa/items/d2b025ed29f477eec382

Azeeeel

2022/04/18 01:35

upload.ejsの12行目で取り込み、15行目のボタンで送信をしています。 formがこのことを指していたら申し訳ありません。

Azeeeel

2022/04/18 01:37

そもそもローカルファイルに保存すらされないので困ってます。しかしそっちの対策も考えないとですね、情報ありがとうございます。

行動規範の内容に同意します

回答2件

ベストアンサー

全く確認してない当てずっぽうな回答ですが

fs.writeFileSync(logNo+'.kml', req.body);

Node.jsでパスを.のカレントディレクトリ指定にした時、
コマンドを実行したディレクトリがカレントディレクトリになります。

app.jsと同じディレクトリを示す__dirnameを含めるとハンドリング出来るかもしれませんね
ついでにテンプレートリテラルに変更して……

js
1fs.writeFileSync(`${__dirname}/${logNo}.kml`, req.body);

まぁ、herokuにファイルを保存するのは明らかに用途としてまずいので
AWS S3みたいなサービスを借りた方が良いんじゃないの？とは思います。

もしこういったストレージサービスを利用するのであれば、
シークレットキー等はherokuのルールに従いつつ環境変数として注入しましょう。
https://qiita.com/mzmz__02/items/64db94b8fc67ee0a9068

Node.jsではprocess.env.[環境変数名]で取得することが可能です。
https://nodejs.dev/learn/how-to-read-environment-variables-from-nodejs

投稿2022/04/18 01:49

miyabi-sun

総合スコア21158

Azeeeel

2022/04/18 02:03

そうなんですか....。私の知識不足がひどいですね。色々と調べ直したいと思います。ありがとうございました。

miyabi-sun

2022/04/18 02:56

まぁ、頑張って作ったからこそのミスはしょっちゅう出てくるものなのでよく頑張ってるねとしか言うことないです。私も過去にかっこいいブログシステム作った時に記事を削除するボタンをリンクで作ったら使いやすいよねと実装したら、 Googleのクローラーがやってきて全部のリンクをクリックしやがって記事が消えた失敗とかありましたね。友人に相談したら笑いながら「Restfulちゃんと考えろよ」と一蹴されました。

Azeeeel

2022/04/19 01:34

ありがとうございます。そう言っていただけると救われます。まだまだ素人ですので頑張っていきたいと思います。

行動規範の内容に同意します

非同期のファイルアップロード

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  document.querySelector('#upload').addEventListener('click',e=>{
4    const file=document.querySelector('#image');
5    const url=file.form.getAttribute("action");
6    const content = file.files[0];
7    const type=content.type;
8    const blob=new Blob([content],{type});
9    const method="post";
10    const body=new FormData();
11    body.append(file.name,blob,content.name);
12    fetch(url,{method,body}).then(res=>res.text()).then(console.log);
13  });
14});
15</script>
16<form action="・・・" method="post" enctype="multipart/form-data">
17<input type="file" id="image" name="myfile">
18<input type="button" value="upload" id="upload">
19</form>

投稿2022/04/18 01:35

編集2022/04/18 01:40

yambejp

総合スコア114775

Azeeeel

2022/04/18 01:39

試してみます。ありがとうございます。

Azeeeel

2022/04/18 01:51

恐縮ながら素人なもので出てきたエラーの解決法が分かりません。お手数ですが何か分かりましたらご教授いただけると幸いです。 connect:66 Uncaught (in promise) TypeError: Failed to fetch at HTMLInputElement.<anonymous> (connect:66:9) 該当のソースコード fetch(url,{method,body}).then(res=>res.text()).then(console.log);

yambejp

2022/04/18 02:08

アップロードしたいのはローカルからですよね？ nodeは受け側ですね？上記サンプルをアップロード用ページにはりつけて実行してみてください

Azeeeel

2022/04/19 01:27

なるほど。試してみます。ありがとうございます。

行動規範の内容に同意します

あなたの回答