jpgだとブラウザに表示されてcsvだとダウンロードできる

2019/10/25 14:44

そもそもS3とは、何なのか、明記したほうがよろしいかと…。単純に「S3」で検索すると https://aws.amazon.com/jp/s3/ という、おそらく質問主の質問とは関係ない検索結果が出てきます… CSVとJPGの違いは「テキストファイル」か「画像」かの違いです。まずはそれが示す「差」を検出するのがよろしいかと…。ですが、まず、「S3」とは何か、それを「どこから入手」したかぐらいは記述しないとこの質問を見た人も「？？？」という状態かと存じます…。

2019/10/25 14:45

いや、「S3」に関しては正しそうですね…。上記は忘れてください…。失礼いたしました…。

2019/10/25 14:48

質問主さんの問題は「jpg」だけでしょうか…？画像フォーマットだけだと「png」「gif」等ありますし、 csvはダウンロードできても同じような「txt」がDL出来るのも気になりますし「xls」等のエクセルファイル等もダウンロードできるか等の検証結果もあると、解答する人も答えが絞りやすくなりそうです…。

2019/10/25 14:51

今pngファイルを試したところでダウンロードできずにブラウザ表示されます

2019/10/25 15:03

すみません、AWS周りの知識無く、詳しい解答は出来ませんが、唯一の知識提供です…。ブラウザ表示は出来るけど、それに対し、「右クリック『画像を保存』」以外の保存行為ができなかった件。自分が過去にTeratileさんに質問し、「実装不能」というベストアンサーにした質問があります。 https://teratail.com/questions/216741 簡単に言うと「リファラでアクセスに制限」が掛かって自分がやろうと思っていたことができなかった次第です…。質問主さんは「S3」の正当な管理権を得てると思われますが、「リファラでアクセスに制限」が意図せぬ形で働いてる可能性があります… ダウンロードは出来ないが「ブラウザ上」には表示できるというのが、自分がTeratileで質問した症状に似ていると思った次第です…。

2019/10/25 15:13

自分の案件だとアクセス権をPixiv社で分けられてるので不能ですが、質問主さんの場合だと、そのアクセス権を、質問主さんの無意識の所で、画像系の拡張子に対して、自動的にアクセス拒否を”初期設定”でしてる所があるのではないか…と思う次第です… これら全部思いつきからの推測なので、追記質問欄での起債に留めます…

2019/10/25 15:24 編集

「ダウンロードできない」とは、「ファイルダウンロードのダイアログボックスなどがブラウザに出てこないので、ファイルとしてダウンロードできない。」状況を言っていますか？

m.ts10806

2019/10/25 21:10

実装されたコードがないのでなんとも言えません。 (それに厳密には画面に表示された時点でローカルにはダウンロードされています。ダウンロードフォルダではないですけどね)

2019/10/26 04:49

そうですね。現状としてはゴールは「ダウンロードフォルダにダウンロードしたい」ですですが現状として、画像に関するファイルをダウンロードしようとすると何故か新しいタブが生成されてそこに表示されています。。。ダウンロードフォルダにダウンロードがしたいです・・・

papinianus

2019/10/29 14:12

aws cliとかであればできます。ブラウザだとアップロードしたときに変更、は無理です。どうやってアップロードしているか書かないと回答しようがありません。実現できない言語のSDKの回答が来ても困るはずです。

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

回答4件

Webブラウザが対象を表示するかダウンロードするかといった扱い方は、Webサーバ側(S3側)から Content-Disposition というレスポンスヘッダで指定します。その値がinlineならブラウザで表示、attachmentならダウンロード、といったように動作します。

サーバからの応答に Content-Disposition レスポンスヘッダがないときは、Webブラウザがよしなに決めるようです。拡張子から判断したり、mime-type を参考にしたり、ファイルの最初の数バイトをみて判断したりしているらしいです。

S3から確実にダウンロードしたいなら、S3からのレスポンスにContent-Dispositionヘッダを含めさせるために、リクエストに response-content-disposition パラメータを載せるという手があります。ただしこの場合、リクエストに署名をつける必要があります。
https://qiita.com/kitar/items/166896357f50f4fe0a95#リクエストをSignするが参考になるでしょう。

投稿2019/10/25 15:45

総合スコア2493

ベストアンサー

実装を示してください。

実装といいつつ設定しかできないなら、メタ情報のcontent-typeをapplication/octet-streamとかにすればもしかしたら。

投稿2019/10/26 15:01

papinianus

総合スコア12705

2019/10/26 16:14

> メタ情報のcontent-typeをapplication/octet-streamとかにすればなるほど!! これだけでいいのかー。

2019/10/29 02:02

binary/ocset-streamにするとできました！！

2019/10/29 02:11

application/octet-streamをメタデータに直書きでもできました！！

2019/10/30 02:38

最終的にS3にアップロードするときをトリガーとしてlambdaでContentType='application/octet-stream' に書き換えることによって実現できました！！

papinianus

2019/10/30 04:44

確かアップロードのイベントトリガーは必ず発火することが保証されてなかったと記憶するのでご注意ください

2019/10/30 05:11

わかりました！！ありがとうございます！！

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

したいことはダウンロードフォルダにファイルをダウンロードしたいです！！

Blobに向けてdownload属性を付与したa要素で実現できました。

必要に応じ、S3側でCORSを許可しておいて

html
1<!DOCTYPE html>
2<html>
3
4<head>
5    <script>
6        function downloadit(src) {
7            fetch(src.attributes['data-href'].value)
8                .then(res => res.blob())
9                .then(URL.createObjectURL)
10                .then(url => {
11                    const a = document.createElement('a');
12                    a.href = url;
13                    a.download = src.download;
14                    a.click();
15                })
16        }
17    </script>
18</head>
19
20<body>
21    <a download="x.jpg" onclick="downloadit(this)" href="javascript:void(0)"
22    data-href="https://your-site.s3-ap-somewhere.amazonaws.com/path/to/image.jpg">image</a>
23</body>
24
25</html>

追記

ローカルPCの「ダウンロード」フォルダーを指定して保存する

ファイルの保存ダイアログを出すようにしてみました。
(chrome://flags のページで #native-file-system-api を有効にしてお試しください)

javascript:
1// sign up origin trial; or enable the #native-file-system-api flag in chrome://flags.
2// see: https://web.dev/native-file-system#write-file
3async function writeFile(contents) {
4    const fileHandle = await window.chooseFileSystemEntries({ type: 'saveFile' });
5    const writer = await fileHandle.createWriter();
6    await writer.truncate(0);
7    await writer.write(0, contents);
8    await writer.close();
9}
10function download_and_save(src) {
11    fetch(src.attributes['data-href'].value)
12        .then(res => res.blob())
13        .then(writeFile)
14}

投稿2019/10/26 16:13

編集2019/10/26 18:27

総合スコア2493

2019/10/26 16:24

質問者さんはあくまで、ローカルPCの「ダウンロード」フォルダーを指定して保存することを望まれているのかと思いました。（いまだにそうなのか否かは分りません）

2019/10/26 18:21

いきおいで Native file system API まで手を出して、保存ダイアログを出すことまではできたのですが、ダウンロードフォルダをロジックから指定するのはさすがに無理でした。

2019/10/27 05:17 編集

（試せてはいないのですが）こちらは個人的にも興味深い回答に思いました。

2019/10/27 22:36

今日現在で最新の Google Chrome 78 から使えるようになったAPIなので、これからに期待です。

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

ですが現状として、画像に関するファイルをダウンロードしようとすると何故か新しいタブが生成されてそこに表示されています。。。
ダウンロードフォルダにダウンロードがしたいです・・・

サーバーからクライアント側のダウンロード先（ダウンロードフォルダ）を指定する標準的な仕様は無いですし、既にmotobaaさんに回答をいただいているように、Content-Disposition: フィールドの値によってブラウザーの挙動に任されるしか無いはずです。

画像ファイルがWEBサーバー上に静的に置かれているなら、WEBサーバーの設定でファイルの拡張子などに応じてContent-Type:などのフィールドが自動でセットされます。PHPのスクリプトがファイルを読んでレスポンスとして返すのであればそれらのフィールドも変えられるはずですが、結局、クライアント側のブラウザー動作で保存先が決まります。HTTPクライアントであるブラウザーを自作する勢いでないと無理だと思います。あるいは何かしらのブラウザープラグインであるとか。

サーバー側からX-DownloadFolder:（＜架空のものです）など、専用のHTTPレスポンスフィールドを追加するなどしてダウンロード先を指定するなんて方法も安易には考えられますが、それも結局クライアント側であるブラウザーで対応しなければなりません。

投稿2019/10/26 05:48