14
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

はじめての記事投稿
Qiita Engineer Festa20242024年7月17日まで開催中!

【未完】画像アップロードするfile_fieldのCSSを変えて、選択したファイル名を表示させたい

Posted at

はじめに

Rails勉強中です。
Active Storageで画像のアップロード機能を導入したけど、デフォルトのボタンのデザインから変更するために一苦労、さらに選択した画像のファイル名を表示するために苦戦している最中です。

ここまでの経緯を一応残しておこうかなと思います。

Active Storageの導入

Acrive Strageの実装は、こちらの記事を参考にしました。
https://qiita.com/trafford_777/items/339ac0416b1505fa0fc6
https://prograshi.com/framework/rails/active-storage/#google_vignette

Active Strage導入時点のfile_fieldのデザインでは、ファイル名は表示されているようです。

file_fieldのデザイン変更

デザインの変更は、こちらの記事を参考にしました。
https://qiita.com/Yukina_28/items/4a8332354f6cb7c7a6f6

file_field自体のCSSは変更できないので、file_fieldにlabelを追加して、file_field自体は非表示にし、labelにCSSを当てて好きなデザインに変更していく方法です。

この際、file_fieldを非表示にしてしまうためか、ファイル名の表示がなくなってしまいました。

アップロードしたファイル名を表示させたい

こちら以降は実際の実装ができていません。

参考になりそうな記事として下記を見つけました。
https://qiita.com/hirogw/items/b4937dbb0ea5f0b60085
ファイル名の表示を取り戻すためには、JavaScriptを使用して実装するようです。
勉強不足でJavaScriptが扱いきれず、こちらでモタモタしています。

おわりに

未完成な投稿で失礼いたしました。
ここまで読んでいただき、ありがとうございました。

未来の自分、無事実装しておくれ〜

14
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?