Created
October 4, 2023 08:40
-
-
Save somaria/94bc7cb7d9fdfaa8bdc01a2aed92caa9 to your computer and use it in GitHub Desktop.
upload
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
'use client' | |
import classnames from 'classnames' | |
import React, { ChangeEvent, use, useState } from 'react' | |
import Image from 'next/image' | |
import { useSession } from 'next-auth/react' | |
import { useRouter } from 'next/navigation' | |
import 'react-quill/dist/quill.snow.css'; | |
import ReactQuill from 'react-quill' | |
const SubmitPost = () => { | |
const { data: session, status } = useSession() | |
const [file, setFile] = useState<any>() | |
const [fileName, setFileName] = useState(null) | |
const [success, setSuccess] = useState(false) | |
const [title, setTitle] = useState('') | |
const [prompt, setPrompt] = useState('') | |
const [value, setValue] = useState('') | |
const [posting, setPosting] = useState(false) | |
const router = useRouter() | |
const handleImageChange = (event: any) => { | |
setFile(event.target.files[0]) | |
for (var i = 0; i < event.target.files.length; ++i) { | |
var name = event.target.files.item(i).name | |
setFileName(name) | |
} | |
} | |
const handleSubmit = async (event: { preventDefault: () => void }) => { | |
event.preventDefault() | |
setPosting(true) | |
const url = 'https://api.cloudinary.com/v1_1/setago/raw/upload' | |
const formData = new FormData() | |
formData.append('file', file) | |
formData.append('upload_preset', 'setago') | |
const res = await fetch(url, { | |
method: 'POST', | |
body: formData, | |
}) | |
const fileone = await res.json() | |
if (status === 'authenticated') { | |
} | |
const data = await fetch('/api/post', { | |
method: 'POST', | |
headers: { | |
'Content-Type': 'application/json', | |
}, | |
body: JSON.stringify({ | |
email: session?.user?.email?.toString(), | |
title: title, | |
content: value, | |
prompt: prompt, | |
imageUrl: fileone.secure_url, | |
}), | |
}) | |
if (data.status === 200) { | |
setSuccess(true) | |
setTitle('') | |
setPrompt('') | |
setValue('') | |
setFileName(null) | |
setPosting(false) | |
//refresh page | |
// window.location.reload() | |
router.refresh() | |
} | |
} | |
const handleTitleInput = (event: any) => { | |
event.preventDefault() | |
setTitle(event.target.value) | |
} | |
const handlePromptInput = (event: any) => { | |
event.preventDefault() | |
setPrompt(event.target.value) | |
} | |
function handleContentInput(event: ChangeEvent<HTMLTextAreaElement>): void { | |
event.preventDefault() | |
setValue(event.target.value) | |
} | |
return ( | |
<> | |
<div className='border rounded-sm'> | |
<div className='text-2xl font-semibold px-3 underline mt-4'> | |
Make A New Post | |
</div> | |
<div className='text-sm px-3 text-gray-400 pb-3'>Non-Fictional Tech News, Recipes, Travel Guides etc</div> | |
<form onSubmit={handleSubmit}> | |
<div className='p-3'> | |
<div className=''> | |
<input | |
type='file' | |
id='upload' | |
onChange={(event) => handleImageChange(event)} | |
style={{ display: 'none' }} | |
className='outline-0' | |
/> | |
<label htmlFor='upload'> | |
<div className='px-2 py-2 sm:py-5 border border-gray-700 bg-gray-100 rounded-xl text-gray-700 cursor-pointer w-36 sm:w-44 h-12 sm:h-16 text-center items-center'> | |
<div className='flex justify-center'> | |
<div className=''> | |
<svg | |
xmlns='http://www.w3.org/2000/svg' | |
fill='none' | |
viewBox='0 0 24 24' | |
strokeWidth={1.5} | |
stroke='currentColor' | |
className='w-6 h-6' | |
> | |
<path | |
strokeLinecap='round' | |
strokeLinejoin='round' | |
d='M9 8.25H7.5a2.25 2.25 0 00-2.25 2.25v9a2.25 2.25 0 002.25 2.25h9a2.25 2.25 0 002.25-2.25v-9a2.25 2.25 0 00-2.25-2.25H15m0-3l-3-3m0 0l-3 3m3-3V15' | |
/> | |
</svg> | |
</div> | |
<div className='text-xs md:text-base px-2 mt-[6px] sm:-mt-2'> | |
<div>Select Image</div> | |
<div className='text-xs'>jpg/png</div> | |
</div> | |
</div> | |
</div> | |
</label> | |
<div className='mx-1 mt-2 text-lg text-green-700 w-1/2 text-ellipsis overflow-hidden'> | |
{fileName} | |
</div> | |
</div> | |
<div className='mt-4'> | |
<input | |
className='w-4/6 lg:w-4/6 px-2 py-2 border border-gray-700 bg-gray-100 rounded-sm text-gray-700 sm:w-44 h-8 text-left items-center' | |
type='text' | |
value={title} | |
placeholder='Title of Post' | |
onChange={handleTitleInput} | |
id='title' | |
/> | |
</div> | |
<div className='mt-6'> | |
<ReactQuill | |
theme="snow" | |
onChange={setValue} | |
// defaultValue={user?.bio ?? 'Bio'} | |
value={value} | |
placeholder='Enter content of post. They can be non-fictional content such as tech news, recipes, travel guides etc.' | |
/> | |
</div> | |
<div className='mt-6'> | |
<textarea | |
className='px-3 | |
py-1.5 | |
text-base | |
font-normal | |
text-gray-700 | |
bg-gray-100 bg-clip-padding | |
rounded-lg | |
w-11/12 h-28 lg:w-11/12 mb-0 outline-none | |
border border-gray-700 | |
focus:ring-gray-600 focus:border-gray-600' | |
value={prompt} | |
placeholder='Enter The Prompt That Generated The Image Or Post. Optional.' | |
onChange={handlePromptInput} | |
id='prompt' | |
/> | |
</div> | |
</div> | |
<div className='ml-5'> | |
<button | |
disabled={ | |
!file | |
? true | |
: title.length < 3 || title.length > 100 | |
? true | |
: value.length < 12 || value.length > 50000 | |
? true | |
: false | |
} | |
> | |
<div | |
className="px-6 py-2 bg-green-600 text-white rounded-lg mt-4 ml-4 lg:ml-0 hover:border-green-700" | |
> | |
{posting ? 'Submitting...' : 'Submit A Post'} | |
</div> | |
</button> | |
<div className=' text-green-700 text-md py-6'> | |
{success && 'Post Submitted Successfully'} | |
</div> | |
</div> | |
</form> | |
</div> | |
</> | |
) | |
} | |
export default SubmitPost |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment