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 }
export function MarkdownInput ({ label, topLevel, groupClassName, onChange, setHasImgLink, onKeyDown, innerRef, ...props }) {
const [tab, setTab] = useState('write')
@ -211,6 +220,8 @@ export function MarkdownInput ({ label, topLevel, groupClassName, onChange, setH
}
}, [innerRef, helpers?.setValue, setSelectionRange, onKeyDown])
const [uploadedImages, setUploadedImages] = useState([])
return (
<FormGroup label={label} className={groupClassName}>
<div className={`${styles.markdownInput} ${tab === 'write' ? styles.noTopLeftRadius : ''}`}>
@ -223,8 +234,8 @@ export function MarkdownInput ({ label, topLevel, groupClassName, onChange, setH
</Nav.Item>
<span className='ms-auto text-muted d-flex align-items-center'>
<ImageUpload
className='d-flex align-items-center me-1' onSuccess={(url) => {
console.log('image uploaded to', url)
className='d-flex align-items-center me-1' onSuccess={(file, url) => {
setUploadedImages(prev => [...prev, { file, url }])
}}
>
<AddImageIcon width={18} height={18} />
@ -251,6 +262,9 @@ export function MarkdownInput ({ label, topLevel, groupClassName, onChange, setH
onBlur={() => setTimeout(resetSuggestions, 100)}
/>)}
</UserSuggest>
{uploadedImages.map((props, i) => {
return <ImageSelector {...props} key={i} />
})}
</div>
{tab !== 'write' &&
<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}`
onSuccess?.(url)
onSuccess?.(file, url)
}
}, [toaster, getSignedPOST])