非画像ファイルがアップロードされた時リンクで表示されるようにした #5659

keiz1213 · 2022-10-18T14:02:54Z

issue

画像以外のファイルを添付された場合の表示がおかしい #4919

概要

pdfファイル等の非画像ファイル(png、jpeg、gif以外)をアップロードした時に表示が崩れていました。
これを表示が崩れないようにリンク(aタグ)として表示するようにしました。

備考

bootcampではサイト内テキストエリアをtextarea-markdownというパッケージを使って拡張しています。今回こちらのパッケージにPRをおくりマージしていただきました。
修正前は、アップロードされる際に生成されるマークダウンテキストがすべてimgタグ用(![fileName](url))でした。それを、アップロードされる画像の種類に応じてimgタグ用とaタグ用([fileName](url))に振り分けるようにしました。
rendering non image file into a link with file size komagata/textarea-markdown#31
ファイルの種類を判別するためにMagic Bytesというパッケージを使用しています
ファイルのサイズをわかりやすく表示するためにfilesize.jsというパッケージを使用しています
画像ファイルはpng、jpeg、gifを想定しています。

変更前

変更後

変更確認方法

feature/rendering-non-image-file-into-a-linkをローカルに取り込む
bin/setupを実行する
rails sでサーバーを起動する
任意のユーザーでログインする
日報作成画面等で非画像ファイル(txtやpdfなど)をアップロードしリンクで表示されること、ファイルのkb数が合ってることを確認する
非画像ファイル(txtやpdfなど)から拡張子を削除して再度アップロードしリンクで表示されること、ファイルのkb数が合ってることを確認する(拡張子がないファイルの場合の対応)
日報作成画面等で画像ファイル(png,jpeg,gif)をアップロードし画像が表示されることを確認する
画像ファイル名(png,jpeg,gif)から拡張子を削除して再度アップロードし画像が表示されることを確認する(拡張子がないファイルの場合の対応)

keiz1213 · 2022-11-04T06:23:40Z

@komagata

お疲れ様です。実装方針について1点質問があります。

先日のミーティングでご指摘いただいて、現在実装方針を改めて考え直しています。

前回までの実装方法では、markdown-itの画像に関するレンダリングルールを上書きし、トークンの文字列の中に画像の拡張子が含まれていればデフォルトのレンダラーで出力し、含まれていなければaタグを出力する、という風にしてimgタグとaタグを振り分けていました。

そして今考えているのはtextarea-markdownのuploadメソッドに手を加えるという方向性で考えています。
uploadメソッドの中で、fileオブジェクトに画像の拡張子が含まれていれば通常通り画像用のマークダウンテキスト(![fileName](url))を生成し、含まれていなければリンク用のマークダウンテキスト([fileName](url))を生成する、という方向性で考えているのですがこの方向性で進めても大丈夫でしょうか？

https://github.com/komagata/textarea-markdown/blob/8d336d5c92211add622010613088921cbbe8157a/src/textarea-markdown.js#L93

komagata · 2022-11-04T23:32:44Z

@keiz1213 基本的にはその方向でOKです〜。

拡張子はついてない場合があるのでこの辺りを使うのはどうでしょうか？
https://www.npmjs.com/package/file-type

keiz1213 · 2022-11-05T01:47:28Z

@komagata

回答ありがとうございます！

一応確認なのですが、そうなるとtextarea-markdownのリポジトリにPRを出すという流れで大丈夫でしょうか？

komagata · 2022-11-05T05:02:57Z

@keiz1213 はい、そうです〜

keiz1213 · 2022-11-05T05:32:45Z

@komagata

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

keiz1213 · 2022-11-11T16:09:49Z

@komagata

お疲れさまです。1点質問があります。

file-typeの代わりにmagic-bytes.jsを使っても良いか

教えていただいたfile-typeパッケージをtextarea-markdownにインストールするとwebpackのコンパイル時にエラーが出るようになりました。このエラーの解決方法を探す過程でmagic-bytes.jsというパッケージを見つけ、試しにこのパッケージをtextarea-markdownにインストールして使用したところ、コンパイルも上手くいき、拡張子がないファイルでも画像ファイルか否かを判別できました。magic-bytes.jsではファイルのマジックナンバーでファイルの種類を判別しています。

file-typeのコンパイルエラーを解消してfile-typeを使うか、それともmagic-bytes.jsを使うか、どちらがよろしいでしょうか？個人的にはブラウザで無難に動くmagic-bytes.jsを使いたいと思っています。

以下、コンパイル時のエラー詳細です。

コンパイル時のエラー

file-typeをtextarea-markdownにインストールしてコンパイルするときに発生するエラーです。

❯ npx webpack --mode development                                                   
asset main.js 588 KiB [emitted] (name: main)
asset node_stream.js 2.19 KiB [emitted]
runtime modules 8.06 KiB 11 modules
modules by path ./textarea-markdown/node_modules/ 440 KiB 102 modules
modules with errors 78 bytes [errors]
  node:buffer 39 bytes [built] [code generated] [1 error]
  node:stream 39 bytes [built] [code generated] [1 error]
./src/index.js 324 bytes [built] [code generated]
./textarea-markdown/src/textarea-markdown.js 3.75 KiB [built] [code generated]
./node_modules/punycode/punycode.es6.js 12.3 KiB [built] [code generated]
util (ignored) 15 bytes [built] [code generated]
util (ignored) 15 bytes [built] [code generated]

ERROR in ./textarea-markdown/node_modules/readable-web-to-node-stream/node_modules/readable-stream/lib/_stream_readable.js 46:13-37
Module not found: Error: Can't resolve 'buffer' in '/Users/nakamurakeizou/textarea5/textarea-markdown/node_modules/readable-web-to-node-stream/node_modules/readable-stream/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "buffer": require.resolve("buffer/") }'
        - install 'buffer'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "buffer": false }
 @ ./textarea-markdown/node_modules/readable-web-to-node-stream/node_modules/readable-stream/readable-browser.js 1:10-63
 @ ./textarea-markdown/node_modules/readable-web-to-node-stream/lib/index.js 4:26-52
 @ ./textarea-markdown/node_modules/file-type/browser.js 2:0-68 36:37-60
 @ ./textarea-markdown/src/textarea-markdown.js 3:0-44
 @ ./src/index.js 1:0-73 5:6-22

ERROR in ./textarea-markdown/node_modules/readable-web-to-node-stream/node_modules/readable-stream/lib/_stream_writable.js 70:13-37
Module not found: Error: Can't resolve 'buffer' in '/Users/nakamurakeizou/textarea5/textarea-markdown/node_modules/readable-web-to-node-stream/node_modules/readable-stream/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "buffer": require.resolve("buffer/") }'
        - install 'buffer'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "buffer": false }
 @ ./textarea-markdown/node_modules/readable-web-to-node-stream/node_modules/readable-stream/readable-browser.js 4:0-55
 @ ./textarea-markdown/node_modules/readable-web-to-node-stream/lib/index.js 4:26-52
 @ ./textarea-markdown/node_modules/file-type/browser.js 2:0-68 36:37-60
 @ ./textarea-markdown/src/textarea-markdown.js 3:0-44
 @ ./src/index.js 1:0-73 5:6-22

ERROR in ./textarea-markdown/node_modules/readable-web-to-node-stream/node_modules/readable-stream/lib/internal/streams/buffer_list.js 15:15-32
Module not found: Error: Can't resolve 'buffer' in '/Users/nakamurakeizou/textarea5/textarea-markdown/node_modules/readable-web-to-node-stream/node_modules/readable-stream/lib/internal/streams'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "buffer": require.resolve("buffer/") }'
        - install 'buffer'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "buffer": false }
 @ ./textarea-markdown/node_modules/readable-web-to-node-stream/node_modules/readable-stream/lib/_stream_readable.js 72:17-58
 @ ./textarea-markdown/node_modules/readable-web-to-node-stream/node_modules/readable-stream/readable-browser.js 1:10-63
 @ ./textarea-markdown/node_modules/readable-web-to-node-stream/lib/index.js 4:26-52
 @ ./textarea-markdown/node_modules/file-type/browser.js 2:0-68 36:37-60
 @ ./textarea-markdown/src/textarea-markdown.js 3:0-44
 @ ./src/index.js 1:0-73 5:6-22

ERROR in ./textarea-markdown/node_modules/readable-web-to-node-stream/node_modules/safe-buffer/index.js 3:13-30
Module not found: Error: Can't resolve 'buffer' in '/Users/nakamurakeizou/textarea5/textarea-markdown/node_modules/readable-web-to-node-stream/node_modules/safe-buffer'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "buffer": require.resolve("buffer/") }'
        - install 'buffer'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "buffer": false }
 @ ./textarea-markdown/node_modules/readable-web-to-node-stream/node_modules/string_decoder/lib/string_decoder.js 26:13-42
 @ ./textarea-markdown/node_modules/readable-web-to-node-stream/node_modules/readable-stream/lib/_stream_readable.js 163:40-80 325:38-78
 @ ./textarea-markdown/node_modules/readable-web-to-node-stream/node_modules/readable-stream/readable-browser.js 1:10-63
 @ ./textarea-markdown/node_modules/readable-web-to-node-stream/lib/index.js 4:26-52
 @ ./textarea-markdown/node_modules/file-type/browser.js 2:0-68 36:37-60
 @ ./textarea-markdown/src/textarea-markdown.js 3:0-44
 @ ./src/index.js 1:0-73 5:6-22

ERROR in node:buffer
Module build failed: UnhandledSchemeError: Reading from "node:buffer" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "node:" URIs.
    at /Users/nakamurakeizou/textarea5/node_modules/webpack/lib/NormalModule.js:832:25
    at Hook.eval [as callAsync] (eval at create (/Users/nakamurakeizou/textarea5/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/nakamurakeizou/textarea5/node_modules/tapable/lib/Hook.js:18:14)
    at Object.processResource (/Users/nakamurakeizou/textarea5/node_modules/webpack/lib/NormalModule.js:829:8)
    at processResource (/Users/nakamurakeizou/textarea5/node_modules/loader-runner/lib/LoaderRunner.js:220:11)
    at iteratePitchingLoaders (/Users/nakamurakeizou/textarea5/node_modules/loader-runner/lib/LoaderRunner.js:171:10)
    at runLoaders (/Users/nakamurakeizou/textarea5/node_modules/loader-runner/lib/LoaderRunner.js:398:2)
    at NormalModule._doBuild (/Users/nakamurakeizou/textarea5/node_modules/webpack/lib/NormalModule.js:819:3)
    at NormalModule.build (/Users/nakamurakeizou/textarea5/node_modules/webpack/lib/NormalModule.js:963:15)
    at /Users/nakamurakeizou/textarea5/node_modules/webpack/lib/Compilation.js:1371:12
 @ ./textarea-markdown/node_modules/file-type/browser.js 1:0-35 44:27-38
 @ ./textarea-markdown/src/textarea-markdown.js 3:0-44
 @ ./src/index.js 1:0-73 5:6-22

ERROR in node:stream
Module build failed: UnhandledSchemeError: Reading from "node:stream" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "node:" URIs.
    at /Users/nakamurakeizou/textarea5/node_modules/webpack/lib/NormalModule.js:832:25
    at Hook.eval [as callAsync] (eval at create (/Users/nakamurakeizou/textarea5/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Object.processResource (/Users/nakamurakeizou/textarea5/node_modules/webpack/lib/NormalModule.js:829:8)
    at processResource (/Users/nakamurakeizou/textarea5/node_modules/loader-runner/lib/LoaderRunner.js:220:11)
    at iteratePitchingLoaders (/Users/nakamurakeizou/textarea5/node_modules/loader-runner/lib/LoaderRunner.js:171:10)
    at runLoaders (/Users/nakamurakeizou/textarea5/node_modules/loader-runner/lib/LoaderRunner.js:398:2)
    at NormalModule._doBuild (/Users/nakamurakeizou/textarea5/node_modules/webpack/lib/NormalModule.js:819:3)
    at NormalModule.build (/Users/nakamurakeizou/textarea5/node_modules/webpack/lib/NormalModule.js:963:15)
    at /Users/nakamurakeizou/textarea5/node_modules/webpack/lib/Compilation.js:1371:12
    at NormalModule.needBuild (/Users/nakamurakeizou/textarea5/node_modules/webpack/lib/NormalModule.js:1253:32)
 @ ./textarea-markdown/node_modules/file-type/core.js 1503:33-54
 @ ./textarea-markdown/node_modules/file-type/browser.js 3:0-91 37:24-46 44:8-26 47:0-51:19 47:0-51:19 47:0-51:19 47:0-51:19
 @ ./textarea-markdown/src/textarea-markdown.js 3:0-44
 @ ./src/index.js 1:0-73 5:6-22

4 errors have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

webpack 5.75.0 compiled with 6 errors in 493 ms

試したこと

webpack.config.jsに以下の設定を追加することでコンパイルは上手くいきました。

: 参考 sindresorhus/file-type#502

 target: "node"

ですがtarget: "node"としているためかブラウザで実行すると動作しませんでした。

# ブラウザのコンソール

Uncaught ReferenceError: require is not defined

ここから色々情報を集めていた時にmagic-bytes.jsを見つけ、textarea-markdownにインストールしてみたところ、コンパイルも問題なくできてファイルの種類の判別ができたのでこちらを使ったほうが無難だと思ったのですがどうでしょうか？色々調べていく中でfile-typeはNodejs用であり、ブラウザで動かすのは不向きなようにも感じました。

komagata · 2022-11-12T09:15:47Z

@keiz1213 動くのであればどちらのライブラリでも大丈夫です〜

keiz1213 · 2022-11-13T06:50:05Z

@komagata

回答ありがとうございます！magic-bytes.jsを使って進めたいと思います。

重ねて質問なのですが、ファイルのサイズを見やすく表示するためfilesize.jsというパッケージを追加しようと考えているのですが、textarea-markdownにインストールする時にエラーが出てしまいます。
--legacy-peer-depsを付けてインストールするとエラーが起きず正常に動くのですがこの方法で大丈夫でしょうか？

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/webpack
npm ERR!   peer webpack@"^5.1.0" from [email protected]
npm ERR!   node_modules/terser-webpack-plugin
npm ERR!     terser-webpack-plugin@"^5.1.3" from [email protected]
npm ERR!   peer webpack@"^4.0.0 || ^5.0.0" from [email protected]
npm ERR!   node_modules/webpack-dev-middleware
npm ERR!     webpack-dev-middleware@"^5.3.1" from [email protected]
npm ERR!     node_modules/webpack-dev-server
npm ERR!       dev webpack-dev-server@"^4.11.1" from the root project
npm ERR!   2 more (webpack-dev-server, the root project)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer webpack@"2 || 3" from [email protected]
npm ERR! node_modules/babel-loader
npm ERR!   dev babel-loader@"^7.1.2" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/webpack
npm ERR!   peer webpack@"2 || 3" from [email protected]
npm ERR!   node_modules/babel-loader
npm ERR!     dev babel-loader@"^7.1.2" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/nakamurakeizou/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/nakamurakeizou/.npm/_logs/2022-11-13T04_02_22_092Z-debug-0.log

komagata · 2022-11-14T03:17:00Z

@keiz1213

-legacy-peer-depsを付けてインストールするとエラーが起きず正常に動くのですがこの方法で大丈夫でしょうか？

大丈夫ではないです。環境に問題があるのか、もしくは追加したライブラリに問題があるのか、他のライブラリに変えるなど必要かもです。

keiz1213 · 2022-11-14T08:53:56Z

@komagata
回答ありがとうございます。

大丈夫ではないです。環境に問題があるのか、もしくは追加したライブラリに問題があるのか、他のライブラリに変えるなど必要かもです。

なるほどです。わかりました。

改めてエラーメッセージを読み、babel loaderを現状の7系から最新バージョン(9系)にアップデートするとエラーがでずにライブラリをインストールできるようになりましたが、この方法で進めてもよろしいでしょうか？

何度もお手数おかけして申し訳ありませんがよろしくお願い致します。

komagata · 2022-11-14T13:36:58Z

@keiz1213

改めてエラーメッセージを読み、babel loaderを現状の7系から最新バージョン(9系)にアップデートするとエラーがでずにライブラリをインストールできるようになりましたが、この方法で進めてもよろしいでしょうか？

はい、お願いします〜

keiz1213 · 2022-11-14T15:25:15Z

@komagata

ありがとうございます！アップデートして進めていきます💪

keiz1213 · 2022-11-16T14:43:17Z

@shirotamaki

お疲れさまです！こちらレビューをお願いできますでしょうか？全然急いでないのでいつでも大丈夫です😄

shirotamaki · 2022-11-16T15:19:09Z

@keiz1213
お疲れさまです！ご依頼いただきありがとうございます！
20日(日)までには確認できると思います！よろしくお願いします〜😊

shirotamaki

@keiz1213
お疲れ様です！動作確認できました🎉
npmへのPRも拝見しました👀 今回使用しているnpmを採用された経緯が当PR上のコメントやり取りで知ることができわかりやすかったです〜！Approveいたします！😊

keiz1213 · 2022-11-20T14:41:54Z

@shirotamaki

確認ありがとうございます！

今回使用しているnpmを採用された経緯が当PR上のコメントやり取りで知ることができわかりやすかったです〜！

何度も質問することになると思ったのでPRの方に残してて良かったです😄

@komagata
こちらチームの方からapproveいただきましたのでご確認お願いいたします！

komagata

確認させて頂きました。OKです〜🙆‍♂️

難しいIssueありがとうございました〜！

keiz1213 self-assigned this Oct 18, 2022

keiz1213 added 3 commits November 16, 2022 20:21

非画像ファイルがアップロードされた時リンクで表示されるようにした

0d1d7b3

lint修正

58d9079

textarea-markdownアップデート

572e0b5

keiz1213 force-pushed the feature/rendering-non-image-file-into-a-link branch from 467ea9c to 572e0b5 Compare November 16, 2022 11:28

keiz1213 marked this pull request as ready for review November 16, 2022 14:38

keiz1213 requested a review from shirotamaki November 16, 2022 14:41

shirotamaki approved these changes Nov 20, 2022

View reviewed changes

komagata approved these changes Nov 21, 2022

View reviewed changes

komagata merged commit 2909b19 into main Nov 21, 2022

komagata deleted the feature/rendering-non-image-file-into-a-link branch November 21, 2022 13:25

github-actions bot mentioned this pull request Nov 21, 2022

Release 2022-11-30 13:16:38 #5809

Merged

18 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

非画像ファイルがアップロードされた時リンクで表示されるようにした #5659

非画像ファイルがアップロードされた時リンクで表示されるようにした #5659

keiz1213 commented Oct 18, 2022 •

edited

Loading

keiz1213 commented Nov 4, 2022

komagata commented Nov 4, 2022

keiz1213 commented Nov 5, 2022

komagata commented Nov 5, 2022

keiz1213 commented Nov 5, 2022

keiz1213 commented Nov 11, 2022

komagata commented Nov 12, 2022

keiz1213 commented Nov 13, 2022

komagata commented Nov 14, 2022

keiz1213 commented Nov 14, 2022

komagata commented Nov 14, 2022

keiz1213 commented Nov 14, 2022

keiz1213 commented Nov 16, 2022

shirotamaki commented Nov 16, 2022

shirotamaki left a comment •

edited

Loading

keiz1213 commented Nov 20, 2022

komagata left a comment

非画像ファイルがアップロードされた時リンクで表示されるようにした #5659

非画像ファイルがアップロードされた時リンクで表示されるようにした #5659

Conversation

keiz1213 commented Oct 18, 2022 • edited Loading

issue

概要

備考

変更前

変更後

変更確認方法

keiz1213 commented Nov 4, 2022

komagata commented Nov 4, 2022

keiz1213 commented Nov 5, 2022

komagata commented Nov 5, 2022

keiz1213 commented Nov 5, 2022

keiz1213 commented Nov 11, 2022

file-typeの代わりにmagic-bytes.jsを使っても良いか

コンパイル時のエラー

試したこと

komagata commented Nov 12, 2022

keiz1213 commented Nov 13, 2022

komagata commented Nov 14, 2022

keiz1213 commented Nov 14, 2022

komagata commented Nov 14, 2022

keiz1213 commented Nov 14, 2022

keiz1213 commented Nov 16, 2022

shirotamaki commented Nov 16, 2022

shirotamaki left a comment • edited Loading

Choose a reason for hiding this comment

keiz1213 commented Nov 20, 2022

komagata left a comment

Choose a reason for hiding this comment

keiz1213 commented Oct 18, 2022 •

edited

Loading

shirotamaki left a comment •

edited

Loading