React ファイルアップロードしたい

プログラミング初心者です。
自分にとって使いやすいメモ帳アプリを作成しようとしています。
メモ書きにファイルもアップロードしたいです。

ファイルアップロードのスキーマの書き方が分からず、
この手の情報が見つけられなかったため、
スキーマの書き方アドバイスいただけたら助かります。

現状のmodelsファイル

JavaScript
1const { Schema, model } = require('mongoose');
2const noteSchema = new Schema({
3  title: { type: String, required: true, unique: true },
4  noteBody: String,
5}, {
6  timestamps: true
7})
8
9module.exports = model('Note', noteSchema )
10

退会済みユーザー

2021/08/30 03:14

なんやろ。アップロードしたいファイルのアイコンをドラッグして、メモ帳アプリのどこかにドロップすると、アップロードされる的なやつ作りたいんか？

hiro_ike

2021/08/30 13:11

コメントありがとうございます。はい、そうです。最終的に、slackの自分のメッセージ欄ありますね、ああいうものを作れたらと思いました。メモも残せ、ファイルも置いておけて便利だなと思ったのですが、その場合はファイルの格納場所はどういうサービスを使うのが一般的なのでしょうか？ m(_ _ )m

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

回答1件

ベストアンサー

質問への追記・修正の依頼でのご返答をふまえて、フロントエンドで使えそうなライブラリを回答します。

まず、今回のように

何らかの汎用的な機能（今回だと、ファイルアイコンのドロップをうけつける。）が実装されてライブラリになっているコンポーネントを探す

というタスクは、仕事のときも趣味で何か作るときでも、ようありますわ。そういうときに、イイのがチャチャッと見つかるような検索ができるというのも、ひとつのスキルやで。

今回だったら、以下のようなワードで検索してみる。

React ファイルドラッグ＆ドロップ
React ファイルドラッグ＆ドロップ　アップロード
React files Drag and Drop
React files Drag and Drop and Upload

それで該当して上位に出てきたライブラリの比較記事とか使ってみた的な記事をざっと流し読みする。そして、それらの記事でオススメされているNodeモジュールのGitHubのレポジトリを見て、スターが何個ついているか、とか、issueでの議論が活発に最近も行われているか、あたりを見ておく。そうするとだいたい候補が絞られてきますわ。

今回の場合は、答えを言ってしまうと、

react-dropzone (GitHub)

がええやろ思いますわ。日本語の記事もすぐ見つかります。

それと、YouTubeでも、 react-dropzone で検索すると、色々出てきます。だいたい英語やけど、VSCodeの画面見せながら、ちょっとずつ実装していく系の動画やと英語苦手でもなんとなく内容追えるもんや。

react-dropzoneを使っても、何らかのトリガーでファイルのアップロードを行う部分は自分で書くことになりますが、そのときに上の記事のAWS S3に送るほうの例は参考になるかと思います。hiro_ikeさんの場合は、S3 ではなく自分で用意したバックエンドのファイルアップロードAPIの仕様に合わせて送るということで、ざっくりいうとそこが変わると思えばええかと。

余談ですが、ドロップエリアとアップロード機能をひとまとめにしたものを作ってくれた人もおる。