UploadSingleContentForm.jsx

import { useVideoAssets } from '@/containers/VideoContainer/VideoAssetsContainer/VideoAssetsContainer.hook'
import TermsCheckbox from './Shared/TermsCheckbox'
import { TextInput, Button } from '@tremor/react';
import { Input } from './Shared/RawInputTremor';

const UploadSingleContentForm = ({setIsDialogOpen, parent, setUploadView}) => {

  
  const contentSubmission = async(e) => {
    try {
      e.preventDefault()
      const formData = new FormData(e.target)
      const formObject = {}
      console.log(formData.entries)
      for (let pair of formData.entries()) {
        formObject[pair[0]] = pair[1]
      }
      console.log(formObject)
      // await addContent(formObject)
      setIsDialogOpen(false)
      if (parent === 'video') {
        setUploadView('show all')
      }
    } catch (error) {
      alert(error)
    }

}

  return (
    <form onSubmit={contentSubmission} className='mt-4'>
    <div className='space-y-6'>
      <div>
        <label
          htmlFor='workspace-name'
          className='text-tremor-default dark:text-dark-tremor-content-strong font-medium text-tremor-content-strong'
        >
          Label(optional)
        </label>
        <TextInput
          type='text'
          id='avatar_name'
          name='avatar_name'
          autoComplete='avatar_name'
          placeholder='Your Video Label'
          className='mt-2'
        />
      </div>
	  <input type="text" name='cluster_id' className='hidden' defaultValue="2e11e559-8cda-4e8b-941a-de0c12f18fa1"  />
	  <input type="text" name='picture_in_picture' className='hidden' defaultValue={false}  />
	  <input type="text" name='voice_over' className='hidden' defaultValue={true}  />
	  <input type="text" name='x_cordinate' className='hidden' defaultValue={10}  />
	  <input type="text" name='y_cordinate' className='hidden' defaultValue={20}  />
	  <input type="text" name='radius' className='hidden'defaultValue={0}  />
	  
      <div>
        <label
          htmlFor='file-1'
          className='text-tremor-default dark:text-dark-tremor-content-strong font-medium text-tremor-content-strong'
        >
          Upload file
          <span className='text-red-500'>*</span>
        </label>
        <Input
          id='video'
          name='video'
          type='file'
          className='mt-2'
          required
          accept='.mp4,'
          // the comma above is more imp than you life
        />
        <p className=' dark:text-dark-tremor-content mt-2 text-tremor-content'>
          You are only allowed to upload a single video. Long files may take time to upload
        </p>
      </div>

	  <div>
        <label
          htmlFor='workspace-name'
          className='text-tremor-default dark:text-dark-tremor-content-strong font-medium text-tremor-content-strong'
        >
          Content
        </label>
        <TextInput
          type='text'
          id='content'
          name='content'
          autoComplete='content'
          placeholder='Your Content here'
          className='mt-2'
        />
      </div>

	  
	  <div>
        <label
          htmlFor='workspace-name'
          className='text-tremor-default dark:text-dark-tremor-content-strong font-medium text-tremor-content-strong'
        >
          Language
        </label>
        <TextInput
          type='text'
          id='iso'
          name='iso'
          autoComplete='iso'
          placeholder='language'
		  defaultValue='en'
          className='mt-2'
        />
      </div>
      <TermsCheckbox />
      <div className='mt-8 flex items-center justify-end space-x-3'>
        <Button
          type='button'
          color='gray-100'
          className='text-gray-800'
          disabled={isAddContentLoading} 
          onClick={() => {
            setIsDialogOpen(false)
            if (parent === 'video') {
              setUploadView('show all')
            }
          }}
        >
          Cancel
        </Button>
        <Button disabled={isAddContentLoading} type='submit'>{isAddContentLoading ? 'Loading...' : 'Upload'}</Button>
      </div>
    </div>
  </form>
  )
}

export default UploadSingleContentForm