ekzyis/stacker.news
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Show uploaded images below text input

Browse Source
This commit is contained in:
ekzyis 2023-10-19 02:44:51 +02:00 committed by ekzyis
parent 7a83813c85
commit d2b93502bc
2 changed files with 17 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
components/form.js
View File

@ -94,6 +94,15 @@ export function InputSkeleton ({ label, hint }) {
) )
} }
function ImageSelector ({ file, url }) {
return (
<span className='d-flex align-items-center'>
<img className='me-1' src={window.URL.createObjectURL(file)} width={32} height={32} style={{ 'object-fit': 'contain' }} />
<a href={url} target='_blank' rel='noreferrer'>{file.name}</a>
</span>
)
}
const DEFAULT_MENTION_INDICES = { start: -1, end: -1 } const DEFAULT_MENTION_INDICES = { start: -1, end: -1 }
export function MarkdownInput ({ label, topLevel, groupClassName, onChange, setHasImgLink, onKeyDown, innerRef, ...props }) { export function MarkdownInput ({ label, topLevel, groupClassName, onChange, setHasImgLink, onKeyDown, innerRef, ...props }) {
const [tab, setTab] = useState('write') const [tab, setTab] = useState('write')
@ -211,6 +220,8 @@ export function MarkdownInput ({ label, topLevel, groupClassName, onChange, setH
} }
}, [innerRef, helpers?.setValue, setSelectionRange, onKeyDown]) }, [innerRef, helpers?.setValue, setSelectionRange, onKeyDown])
const [uploadedImages, setUploadedImages] = useState([])
return ( return (
<FormGroup label={label} className={groupClassName}> <FormGroup label={label} className={groupClassName}>
<div className={`${styles.markdownInput} ${tab === 'write' ? styles.noTopLeftRadius : ''}`}> <div className={`${styles.markdownInput} ${tab === 'write' ? styles.noTopLeftRadius : ''}`}>
@ -223,8 +234,8 @@ export function MarkdownInput ({ label, topLevel, groupClassName, onChange, setH
</Nav.Item> </Nav.Item>
<span className='ms-auto text-muted d-flex align-items-center'> <span className='ms-auto text-muted d-flex align-items-center'>
<ImageUpload <ImageUpload
className='d-flex align-items-center me-1' onSuccess={(url) => { className='d-flex align-items-center me-1' onSuccess={(file, url) => {
console.log('image uploaded to', url) setUploadedImages(prev => [...prev, { file, url }])
}} }}
> >
<AddImageIcon width={18} height={18} /> <AddImageIcon width={18} height={18} />
@ -251,6 +262,9 @@ export function MarkdownInput ({ label, topLevel, groupClassName, onChange, setH
onBlur={() => setTimeout(resetSuggestions, 100)} onBlur={() => setTimeout(resetSuggestions, 100)}
/>)} />)}
</UserSuggest> </UserSuggest>
{uploadedImages.map((props, i) => {
return <ImageSelector {...props} key={i} />
})}
</div> </div>
{tab !== 'write' && {tab !== 'write' &&
<div className='form-group'> <div className='form-group'>

2
components/image.js
View File

@ -188,7 +188,7 @@ export function ImageUpload ({ children, className, onSelect, onSuccess }) {
} }
const url = `https://${process.env.NEXT_PUBLIC_AWS_UPLOAD_BUCKET}.s3.amazonaws.com/${data.getSignedPOST.fields.key}` const url = `https://${process.env.NEXT_PUBLIC_AWS_UPLOAD_BUCKET}.s3.amazonaws.com/${data.getSignedPOST.fields.key}`
onSuccess?.(url) onSuccess?.(file, url)
} }
}, [toaster, getSignedPOST]) }, [toaster, getSignedPOST])