Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 | 2x 2x 2x 2x 4x 2x | /* eslint-disable no-ternary, max-lines-per-function */
import {
AdditionalMessage,
Buttons,
Content,
ErrorMessage,
FileInput,
FileInputLabel,
Message,
Messages,
UploadArea
} from "./styled"
import Button from "components/buttons/Button"
import type { ComponentProps } from "."
import ImageCanvas from "./ImageCanvas"
import React from "react"
const ImageUploadModal = ({
additionalMessage,
errorMessage,
isDisabled,
isLoading,
isUploadDisabled,
imageDataUrl,
message,
onClose,
onDragOver,
onFileDrop,
onFileSelect,
onSubmit
}: ComponentProps) => (
<Content>
<form onSubmit={onSubmit}>
{message ? <Message>{message}</Message> : null}
<UploadArea onDragOver={onDragOver} onDrop={onFileDrop}>
{imageDataUrl ? <ImageCanvas imageDataUrl={imageDataUrl} /> : null}
<FileInput
accept=".jpg, .jpeg, .png, .webp"
disabled={isDisabled || isLoading}
id="fileInput"
onChange={onFileSelect}
type="file"
/>
<FileInputLabel disabled={isDisabled || isLoading} htmlFor="fileInput">
{"Select an image"}
</FileInputLabel>
<Messages>
<Message>{"Drag your images here or click in this area"}</Message>
{additionalMessage ? (
<AdditionalMessage>{additionalMessage}</AdditionalMessage>
) : null}
{errorMessage ? <ErrorMessage>{errorMessage}</ErrorMessage> : null}
</Messages>
</UploadArea>
<Buttons>
<Button
disabled={isDisabled || isLoading}
label="Cancel"
onClick={onClose}
outlined
/>
<Button
disabled={isDisabled || isUploadDisabled || isLoading}
label="Upload"
loading={isLoading}
type="submit"
/>
</Buttons>
</form>
</Content>
)
export default ImageUploadModal
|