rzmk/learnhouse
1
0
Fork 0
mirror of https://github.com/rzmk/learnhouse.git synced 2025-12-19 04:19:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: inputs limit to their respective file formats

Browse source
This commit is contained in:
Chris Holland 2024-10-22 15:26:46 -07:00
parent 19cc3ea0d7
commit b678ac86e8
No known key found for this signature in database
GPG key ID: 68B0A864B1B0A0D2
9 changed files with 55 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

5
apps/web/components/Objects/Editor/Extensions/Image/ImageBlockComponent.tsx
View file

@ -9,6 +9,9 @@ import { useCourse } from '@components/Contexts/CourseContext'
import { useEditorProvider } from '@components/Contexts/Editor/EditorContext'
import { useLHSession } from '@components/Contexts/LHSessionContext'
import { FileUploadBlock, FileUploadBlockButton, FileUploadBlockInput } from '../../FileUploadBlock'
import { constructAcceptValue } from '@/lib/constants';
const SUPPORTED_FILES = constructAcceptValue(['image'])
function ImageBlockComponent(props: any) {
const org = useOrg() as any
@ -53,7 +56,7 @@ function ImageBlockComponent(props: any) {
return (
<NodeViewWrapper className="block-image">
<FileUploadBlock isEditable={isEditable} isLoading={isLoading} isEmpty={!blockObject} Icon={Image}>
<FileUploadBlockInput onChange={handleImageChange} accept="image/*" />
<FileUploadBlockInput onChange={handleImageChange} accept={SUPPORTED_FILES} />
<FileUploadBlockButton onClick={handleSubmit} disabled={!image}/>
</FileUploadBlock>

5
apps/web/components/Objects/Editor/Extensions/PDF/PDFBlockComponent.tsx
View file

@ -9,6 +9,9 @@ import { useCourse } from '@components/Contexts/CourseContext'
import { useEditorProvider } from '@components/Contexts/Editor/EditorContext'
import { useLHSession } from '@components/Contexts/LHSessionContext'
import { FileUploadBlock, FileUploadBlockButton, FileUploadBlockInput } from '../../FileUploadBlock'
import { constructAcceptValue } from '@/lib/constants';
const SUPPORTED_FILES = constructAcceptValue(['pdf'])
function PDFBlockComponent(props: any) {
const org = useOrg() as any
@ -49,7 +52,7 @@ function PDFBlockComponent(props: any) {
return (
<NodeViewWrapper className="block-pdf">
<FileUploadBlock isEditable={isEditable} isLoading={isLoading} isEmpty={!blockObject} Icon={FileText}>
<FileUploadBlockInput onChange={handlePDFChange} accept="application/pdf" />
<FileUploadBlockInput onChange={handlePDFChange} accept={SUPPORTED_FILES} />
<FileUploadBlockButton onClick={handleSubmit} disabled={!pdf}/>
</FileUploadBlock>

5
apps/web/components/Objects/Editor/Extensions/Video/VideoBlockComponent.tsx
View file

@ -9,6 +9,9 @@ import { useCourse } from '@components/Contexts/CourseContext'
import { useEditorProvider } from '@components/Contexts/Editor/EditorContext'
import { useLHSession } from '@components/Contexts/LHSessionContext'
import { FileUploadBlock, FileUploadBlockButton, FileUploadBlockInput } from '../../FileUploadBlock'
import { constructAcceptValue } from '@/lib/constants';
const SUPPORTED_FILES = constructAcceptValue(['webm', 'mp4'])
function VideoBlockComponents(props: any) {
const org = useOrg() as any
@ -51,7 +54,7 @@ function VideoBlockComponents(props: any) {
return (
<NodeViewWrapper className="block-video">
<FileUploadBlock isEditable={isEditable} isLoading={isLoading} isEmpty={!blockObject} Icon={Video}>
<FileUploadBlockInput onChange={handleVideoChange} accept="video/*" />
<FileUploadBlockInput onChange={handleVideoChange} accept={SUPPORTED_FILES} />
<FileUploadBlockButton onClick={handleSubmit} disabled={!video}/>
</FileUploadBlock>

5
apps/web/components/Objects/Modals/Activities/Create/NewActivityModal/DocumentPdf.tsx
View file

@ -9,6 +9,9 @@ import FormLayout, {
import React, { useState } from 'react'
import * as Form from '@radix-ui/react-form'
import BarLoader from 'react-spinners/BarLoader'
import { constructAcceptValue } from '@/lib/constants';
const SUPPORTED_FILES = constructAcceptValue(['pdf'])
function DocumentPdfModal({ submitFileActivity, chapterId, course }: any) {
const [documentpdf, setDocumentPdf] = React.useState(null) as any
@ -64,7 +67,7 @@ function DocumentPdfModal({ submitFileActivity, chapterId, course }: any) {
</FormMessage>
</Flex>
<Form.Control asChild>
<input type="file" onChange={handleDocumentPdfChange} required />
<input accept={SUPPORTED_FILES} type="file" onChange={handleDocumentPdfChange} required />
</Form.Control>
</FormField>

5
apps/web/components/Objects/Modals/Activities/Create/NewActivityModal/Video.tsx
View file

@ -10,6 +10,9 @@ import React, { useState } from 'react'
import * as Form from '@radix-ui/react-form'
import BarLoader from 'react-spinners/BarLoader'
import { Youtube } from 'lucide-react'
import { constructAcceptValue } from '@/lib/constants';
const SUPPORTED_FILES = constructAcceptValue(['mp4', 'webm'])
interface ExternalVideoObject {
name: string
@ -134,7 +137,7 @@ function VideoModal({
</FormMessage>
</Flex>
<Form.Control asChild>
<input type="file" onChange={handleVideoChange} required />
<input accept={SUPPORTED_FILES} type="file" onChange={handleVideoChange} required />
</Form.Control>
</FormField>
</div>