You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
132 lines
4.6 KiB
132 lines
4.6 KiB
import React, { FC, ChangeEvent, useState } from 'react'
|
|
import { useSelector, useDispatch } from 'react-redux'
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
|
import { faUpload } from '@fortawesome/free-solid-svg-icons'
|
|
import { BlockBlobClient, AnonymousCredential } from '@azure/storage-blob'
|
|
|
|
import { useConfig, useTheme } from 'src/hooks'
|
|
import { setFieldValue } from 'src/actions/forms'
|
|
import { showNotification } from 'src/actions/notifications'
|
|
import { getFieldValue } from 'src/selectors/forms'
|
|
import { apiFetch } from 'src/api/fetch'
|
|
import { AppState, AppThunkDispatch, SasResponse, NotificationType } from 'src/types'
|
|
|
|
import Progress from 'src/components/progress'
|
|
import FieldLabel from 'src/components/controls/field-label'
|
|
|
|
interface Props {
|
|
name: string
|
|
label: string
|
|
help?: string
|
|
previewWidth?: number
|
|
maxSize?: number
|
|
}
|
|
|
|
const FileField: FC<Props> = props => {
|
|
const theme = useTheme()
|
|
const value = useSelector<AppState, boolean>(state => getFieldValue<boolean>(state, props.name, false))
|
|
const config = useConfig()
|
|
const dispatch = useDispatch<AppThunkDispatch>()
|
|
|
|
const { name, label, help, previewWidth = 128, maxSize = config.media.defaultMaxSize } = props
|
|
|
|
const [progress, setProgress] = useState(0)
|
|
const [uploading, setUploading] = useState(false)
|
|
const [uploaded, setUploaded] = useState(false)
|
|
|
|
const handleChange = async (event: ChangeEvent<HTMLInputElement>) => {
|
|
if (event.target.files) {
|
|
const file = event.target.files[0]
|
|
|
|
if (file.size > maxSize) {
|
|
const maxSizeString = Math.round(maxSize / 1024 / 1024)
|
|
dispatch(showNotification(NotificationType.Error, `Files must be less than ${maxSizeString} MBs`))
|
|
return
|
|
}
|
|
|
|
const ext = file.name.substring(file.name.lastIndexOf('.'))
|
|
const { sas, id } = await apiFetch<SasResponse>({ path: '/v1/sas' })
|
|
const filename = `${id}${ext}`
|
|
|
|
setUploading(true)
|
|
|
|
try {
|
|
const blockBlobClient = new BlockBlobClient(`${config.blobUrl}${filename}?${sas}`, new AnonymousCredential())
|
|
await blockBlobClient.uploadBrowserData(file, {
|
|
onProgress: p => {
|
|
setProgress((p.loadedBytes / file.size) * 100)
|
|
}
|
|
})
|
|
|
|
await apiFetch({
|
|
path: '/v1/media',
|
|
method: 'post',
|
|
body: {
|
|
name: filename,
|
|
size: file.size,
|
|
type: file.type,
|
|
originalName: file.name,
|
|
}
|
|
})
|
|
|
|
dispatch(setFieldValue(name, filename))
|
|
setUploaded(true)
|
|
} catch (err) {
|
|
console.error(err)
|
|
dispatch(showNotification(NotificationType.Error, `Upload error: ${err}`))
|
|
}
|
|
|
|
setUploading(false)
|
|
}
|
|
}
|
|
|
|
const handleDelete = async () => {
|
|
if (uploaded) {
|
|
await apiFetch({
|
|
path: `/v1/media?name=${value}`,
|
|
method: 'delete',
|
|
})
|
|
}
|
|
|
|
dispatch(setFieldValue(name, ''))
|
|
}
|
|
|
|
if (uploading) {
|
|
return (
|
|
<div className="field">
|
|
<FieldLabel>{label}</FieldLabel>
|
|
<Progress value={progress} />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="field">
|
|
<FieldLabel>{label}</FieldLabel>
|
|
{value &&
|
|
<div style={{ padding: '1rem 0px' }}>
|
|
<img src={`${config.blobUrl}${value}`} style={{ width: previewWidth }} />
|
|
<div style={{ color: theme.secondary, fontSize: '0.8rem' }}>
|
|
{value}
|
|
|
|
(<a style={{ color: theme.red }} onClick={() => handleDelete()}>Delete</a>)
|
|
</div>
|
|
</div>
|
|
}
|
|
{!value &&
|
|
<div>
|
|
<label className="file-input" style={{ backgroundColor: theme.primary, color: theme.primaryAlternate }}>
|
|
<input type="file" name={name} onChange={handleChange} />
|
|
<div className="icon">
|
|
<FontAwesomeIcon icon={faUpload} />
|
|
</div>
|
|
<span>Choose a file...</span>
|
|
</label>
|
|
<p className="help" style={{ color: theme.text }}>{help}</p>
|
|
</div>
|
|
}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default FileField
|