imprv: Limit the file types in editor. #8146
Conversation
…2-131770-limit-file-type
| const acceptedFileType = useMemo(() => { | ||
| if (isUploadableFile) { | ||
| return AcceptedUploadFileType.ALL; | ||
| } | ||
| if (isUploadableImage) { | ||
| return AcceptedUploadFileType.IMAGE; | ||
| } | ||
| return AcceptedUploadFileType.NONE; | ||
| }, [isUploadableFile, isUploadableImage]); |
There was a problem hiding this comment.
権限として環境変数によるファイルアップロードの有効化が最も強いので、isUpladableImage の状態によらず、 isUploadableFile が false の時は return AcceptedUploadFileType.NONE; を返したい
There was a problem hiding this comment.
確かに今のままだと、画像のみアップロード可能にするためにファイルのアップロードを禁止にする必要がある変な状況になっていますね…。理想の挙動をするように変更しました。
| const accept: Accept = {}; | ||
| accept[(acceptedFileType ?? '')] = []; | ||
|
|
||
| const noDrag = acceptedFileType == null; |
There was a problem hiding this comment.
定数を使えばいいと思う。
const noDrag = acceptedFileType === AcceptedUploadFileType.NULL
undefined の場合も考慮していたらすまん
There was a problem hiding this comment.
noDrag だとまだ Dropzone を使えてしまうような書き方なので、 disabled を使うように変更しました。
| const accept: Accept = {}; | ||
| accept[(acceptedFileType ?? '')] = []; |
There was a problem hiding this comment.
- オプショナルにする必要がなければこのあたりもシンプルになる想定
There was a problem hiding this comment.
オプショナルを外す形に変更しました。
There was a problem hiding this comment.
開発環境で動きますかね？以下のエラーがでます。
Error: [vite]: Rollup failed to resolve import "src/consts" from "/workspace/growi/packages/editor/src/services/file-dropzone/use-file-dropzone.ts".
@growi/editor:dev: This is most likely unintended because it can break your application at runtime.
@growi/editor:dev: If you do want to externalize this module explicitly add it to
@growi/editor:dev: `build.rollupOptions.external`
| const accept: Accept = {}; | ||
| accept[(acceptedFileType)] = []; |
There was a problem hiding this comment.
これできないか？
const accept: Accept = {
acceptedFileType: []
};
There was a problem hiding this comment.
出来たのでそのように変更しました。
エラーについては import に使用するパスがおかしかったので修正しました。
|
reg-suit detected visual differences. Check this report, and review them. 🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴 What do the circles mean?The number of circles represent the number of changed images.🔴 : Changed items, ⚪ : New items, ⚫ : Deleted items, and 🔵 Passed items How can I change the check status?If reviewers approve this PR, the reg context status will be green automatically. |
| ALL: '*', | ||
| IMAGE: 'image/*', | ||
| NONE: '', | ||
| } as const; |
There was a problem hiding this comment.
細かいんだけど、今 app 側でこの const をインポートしている。ということは中身の * っていう文字列を、app 側も取り扱っていることになるよね(見えていないだけで)。
しかし dropzone がその形式の文字列を必要としているだけで、accept を設定する直前で手に入れば app 側は不要。つまり packages/editor に閉じたまま取り扱える文字列。
その点が少し気持ち悪いなあと思っているが…どうしてお直さないといけないようなものでもないかなあとか…
概要
三つ二つから指定可能。Task
実装
追加点は
今回、ファイル制限のために
packages/editor/src/constsにAcceptedUploadFileTypeを追加。CodeMirrorEditorMainがそれを受け取り、dropzone の許容するファイルタイプと Attachment ボタンに反映する。react-dropzone のファイルの制限は次を参照。