diff --git a/src/actions/upload.ts b/src/actions/upload.ts
index fb9aaef1..341776f9 100644
--- a/src/actions/upload.ts
+++ b/src/actions/upload.ts
@@ -6,7 +6,7 @@ import {type Observable, concat, defer, from, of, throwError} from 'rxjs'
 import {catchError, mergeMap, mergeMapTo, switchMap} from 'rxjs/operators'
 
 import {createUpChunkObservable} from '../clients/upChunkObservable'
-import type {MuxAsset, Config} from '../util/types'
+import type {Config, MuxAsset} from '../util/types'
 import {getAsset} from './assets'
 import {testSecretsObservable} from './secrets'
 
diff --git a/src/components/ConfigContext.tsx b/src/components/ConfigContext.tsx
deleted file mode 100644
index bbbbd061..00000000
--- a/src/components/ConfigContext.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React, {createContext, useContext} from 'react'
-
-import type {Config} from '../util/types'
-
-const ConfigContext = createContext<Config>(null)
-
-export function useConfig() {
-  return useContext(ConfigContext)
-}
diff --git a/src/components/ConfigureApi.tsx b/src/components/ConfigureApi.tsx
index fefb14d7..a9754986 100644
--- a/src/components/ConfigureApi.tsx
+++ b/src/components/ConfigureApi.tsx
@@ -106,7 +106,7 @@ function ConfigureApi({secrets, setDialogState}: Props) {
   }, [firstField])
 
   return (
-    <Dialog id={id} onClose={handleClose} header={<Header />} width={1}>
+    <Dialog id={id} onClose={handleClose} header={<Header />} width={0}>
       <Box padding={4} style={{position: 'relative'}}>
         <form onSubmit={handleSubmit} noValidate>
           <Stack space={4}>
diff --git a/src/components/Input.styles.tsx b/src/components/Input.styles.tsx
deleted file mode 100644
index 7d5b4cac..00000000
--- a/src/components/Input.styles.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import {FormField} from 'sanity/form'
-import styled from 'styled-components'
-
-export const StyledFormField = styled(FormField)`
-  display: inline-block;
-`
diff --git a/src/components/Input.tsx b/src/components/Input.tsx
index 38c1177d..d7eba213 100644
--- a/src/components/Input.tsx
+++ b/src/components/Input.tsx
@@ -1,15 +1,15 @@
 import React, {memo} from 'react'
 import {useClient} from 'sanity'
-import {useDocumentPreviewStore} from 'sanity/_unstable'
 
 import {useAssetDocumentValues} from '../hooks/useAssetDocumentValues'
 import {useDialogState} from '../hooks/useDialogState'
 import {useMuxPolling} from '../hooks/useMuxPolling'
 import {useSecretsDocumentValues} from '../hooks/useSecretsDocumentValues'
 import type {Config, MuxInputProps} from '../util/types'
-import InputLegacy from './__legacy__Input'
+import Uploader from './__legacy__Uploader'
 import ConfigureApi from './ConfigureApi'
 import {InputFallback} from './Input.styled'
+import Onboard from './Onboard'
 
 export interface InputProps extends MuxInputProps {
   config: Config
@@ -39,16 +39,20 @@ const Input = (props: InputProps) => {
         <InputFallback />
       ) : (
         <>
-          <InputLegacy
-            {...props}
-            asset={assetDocumentValues.value}
-            client={client}
-            dialogState={dialogState}
-            setDialogState={setDialogState}
-            secrets={secretDocumentValues.value.secrets}
-            isInitialSetup={secretDocumentValues.value.isInitialSetup}
-            needsSetup={secretDocumentValues.value.needsSetup}
-          />
+          {secretDocumentValues.value.needsSetup && !assetDocumentValues.value ? (
+            <Onboard setDialogState={setDialogState} />
+          ) : (
+            <Uploader
+              {...props}
+              client={client}
+              secrets={secretDocumentValues.value.secrets}
+              asset={assetDocumentValues.value}
+              dialogState={dialogState}
+              setDialogState={setDialogState}
+              needsSetup={secretDocumentValues.value.needsSetup}
+            />
+          )}
+
           {dialogState === 'secrets' && (
             <ConfigureApi
               setDialogState={setDialogState}
diff --git a/src/components/Onboard.tsx b/src/components/Onboard.tsx
new file mode 100644
index 00000000..abcf0510
--- /dev/null
+++ b/src/components/Onboard.tsx
@@ -0,0 +1,48 @@
+import {PlugIcon} from '@sanity/icons'
+import {Button, Card, Flex, Grid, Heading, Inline} from '@sanity/ui'
+import React, {useCallback} from 'react'
+
+import type {SetDialogState} from '../hooks/useDialogState'
+import MuxLogo from './MuxLogo'
+
+interface OnboardProps {
+  setDialogState: SetDialogState
+}
+
+export default function Onboard(props: OnboardProps) {
+  const {setDialogState} = props
+  const handleOpen = useCallback(() => setDialogState('secrets'), [setDialogState])
+
+  return (
+    <>
+      <div style={{padding: 2}}>
+        <Card
+          display="flex"
+          sizing="border"
+          style={{aspectRatio: '16/9', width: '100%', boxShadow: 'var(--card-bg-color) 0 0 0 2px'}}
+          paddingX={[2, 3, 4, 4]}
+          radius={1}
+          tone="transparent"
+        >
+          <Flex justify="flex-start" align="center">
+            <Grid columns={1} gap={[2, 3, 4, 4]}>
+              <Inline paddingY={1}>
+                <div style={{height: '32px'}}>
+                  <MuxLogo />
+                </div>
+              </Inline>
+              <Inline paddingY={1}>
+                <Heading size={[0, 1, 2, 2]}>
+                  Upload and preview videos directly from your studio.
+                </Heading>
+              </Inline>
+              <Inline paddingY={1}>
+                <Button mode="ghost" icon={PlugIcon} text="Configure API" onClick={handleOpen} />
+              </Inline>
+            </Grid>
+          </Flex>
+        </Card>
+      </div>
+    </>
+  )
+}
diff --git a/src/components/Player.tsx b/src/components/Player.tsx
index 06429e88..8fe4f95c 100644
--- a/src/components/Player.tsx
+++ b/src/components/Player.tsx
@@ -1,5 +1,5 @@
 import {type PlaybackEngine, generatePlayerInitTime, initialize} from '@mux-elements/playback-core'
-import {Card, Stack, Text} from '@sanity/ui'
+import {Card, Text} from '@sanity/ui'
 import {
   MediaControlBar,
   MediaController,
@@ -71,7 +71,6 @@ const MuxVideo = ({asset, buttons, readOnly, onChange, dialogState, setDialogSta
     (event) => setError(event.currentTarget.error),
     []
   )
-  const [isDeletedOnMux, setDeletedOnMux] = useState<boolean>(false)
   const playRef = useRef<HTMLDivElement>(null)
   const muteRef = useRef<HTMLDivElement>(null)
   const video = useRef<HTMLVideoElement>(null)
@@ -109,23 +108,24 @@ const MuxVideo = ({asset, buttons, readOnly, onChange, dialogState, setDialogSta
     playbackEngineRef.current = nextPlaybackEngineRef
   }, [videoSrc, isLoading, playerInitTime])
 
+  useEffect(() => {
+    if (asset?.status === 'errored') {
+      handleCancelUpload()
+      // eslint-disable-next-line no-warning-comments
+      // @TODO use better error handling
+      throw new Error(asset.data?.errors?.messages?.join(' '))
+    }
+  }, [asset.data?.errors?.messages, asset?.status, handleCancelUpload])
+
+  if (error) {
+    // @TODO better error handling
+    throw error
+  }
+
   if (!asset || !asset.status) {
     return null
   }
 
-  /*
-  if (assetDocument && assetDocument.status === 'errored') {
-            // eslint-disable-next-line no-warning-comments
-            // todo: use client.observable
-            return this.handleRemoveVideo().then(() => {
-              this.setState({
-                isLoading: false,
-                error: new Error(assetDocument.data?.errors?.messages?.join(' ')),
-              })
-            })
-          }
-// */
-
   if (isLoading) {
     return (
       <UploadProgress
@@ -165,15 +165,6 @@ const MuxVideo = ({asset, buttons, readOnly, onChange, dialogState, setDialogSta
             <MediaFullscreenButton />
           </MediaControlBar>
         </MediaController>
-        {error && (
-          <Card padding={3} radius={2} shadow={1} tone="critical" marginTop={2}>
-            <Stack space={2}>
-              <Text size={1}>There was an error loading this video ({error.type}).</Text>
-              {isDeletedOnMux && <Text size={1}>The video is deleted on Mux</Text>}
-            </Stack>
-          </Card>
-        )}
-
         {isPreparingStaticRenditions && (
           <Card
             padding={2}
diff --git a/src/components/SetupButton.tsx b/src/components/SetupButton.tsx
deleted file mode 100644
index 7b23be8a..00000000
--- a/src/components/SetupButton.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import {PlugIcon} from '@sanity/icons'
-import {Button} from '@sanity/ui'
-import React from 'react'
-import styled from 'styled-components'
-
-import type {Props as ConfigureApiProps} from './ConfigureApi'
-import ConfigureApi from './ConfigureApi'
-
-const SetupButtonContainer = styled.div`
-  position: relative;
-  display: block;
-  font-size: 0.8em;
-  transform: translate(0%, -10%);
-`
-
-export interface Props extends ConfigureApiProps {
-  needsSetup: boolean
-  isLoading: boolean | string
-  showSetup: boolean
-  onSetup: () => void
-}
-export default function SetupButton({
-  onClose,
-  onSave,
-  onSetup,
-  isLoading,
-  showSetup,
-  needsSetup,
-  secrets,
-}: Props) {
-  const renderSetup = !isLoading && showSetup
-  return (
-    <SetupButtonContainer>
-      <Button
-        tone={needsSetup ? 'critical' : 'positive'}
-        mode="bleed"
-        onClick={onSetup}
-        icon={PlugIcon}
-        padding={3}
-        radius={3}
-        aria-label="Set up Mux credentials"
-      />
-      {renderSetup && <ConfigureApi onClose={onClose} onSave={onSave} secrets={secrets} />}
-    </SetupButtonContainer>
-  )
-}
diff --git a/src/components/SetupNotice.tsx b/src/components/SetupNotice.tsx
deleted file mode 100644
index 0f6775e0..00000000
--- a/src/components/SetupNotice.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import {Stack, Text} from '@sanity/ui'
-import React from 'react'
-
-import MuxLogo from './MuxLogo'
-
-export interface Props {
-  isLoading: boolean | string
-  isInitialSetup: boolean
-}
-
-const SetupNotice = ({isLoading, isInitialSetup}: Props) => {
-  if (isLoading) {
-    return null
-  }
-
-  return (
-    <Stack padding={4} space={5} style={{backgroundColor: '#efefefef', borderRadius: 3}}>
-      <MuxLogo />
-      <Stack space={4}>
-        {isInitialSetup && (
-          <Text>
-            Looks like this is the first time you are using the Mux video plugin in this dataset.
-            Great!
-          </Text>
-        )}
-        <Text>Before you can upload video, you must set your Mux credentials.</Text>
-        <Text>Click the plugin button in the field title to open Setup.</Text>
-      </Stack>
-    </Stack>
-  )
-}
-
-export default SetupNotice
diff --git a/src/components/UploadPlaceholder.tsx b/src/components/UploadPlaceholder.tsx
new file mode 100644
index 00000000..a92acdd3
--- /dev/null
+++ b/src/components/UploadPlaceholder.tsx
@@ -0,0 +1,89 @@
+import {PlugIcon, SearchIcon, UploadIcon} from '@sanity/icons'
+import {DocumentVideoIcon} from '@sanity/icons'
+import {Box, Button, Card, Flex, Inline, Text} from '@sanity/ui'
+import React, {useCallback} from 'react'
+import styled from 'styled-components'
+
+import type {SetDialogState} from '../hooks/useDialogState'
+import {type FileInputButtonProps, FileInputButton} from './FileInputButton'
+
+const UploadCard = styled(Card)`
+  && {
+    border-style: dashed;
+  }
+`
+
+const ConfigureApiBox = styled(Box)`
+  position: absolute;
+  top: 0;
+  right: 0;
+`
+
+interface UploadPlaceholderProps {
+  setDialogState: SetDialogState
+  readOnly: boolean
+  hovering: boolean
+  needsSetup: boolean
+  onSelect: FileInputButtonProps['onSelect']
+}
+export default function UploadPlaceholder(props: UploadPlaceholderProps) {
+  const {setDialogState, readOnly, onSelect, hovering, needsSetup} = props
+  const handleBrowse = useCallback(() => setDialogState('select-video'), [setDialogState])
+  const handleConfigureApi = useCallback(() => setDialogState('secrets'), [setDialogState])
+
+  return (
+    <Box style={{padding: 1, position: 'relative'}} height="stretch">
+      <UploadCard
+        sizing="border"
+        height="fill"
+        tone={readOnly ? 'transparent' : 'inherit'}
+        border
+        padding={3}
+        style={hovering ? {borderColor: 'transparent'} : undefined}
+      >
+        <ConfigureApiBox padding={3}>
+          <Button
+            padding={3}
+            radius={3}
+            tone={needsSetup ? 'critical' : undefined}
+            onClick={handleConfigureApi}
+            icon={PlugIcon}
+            mode="bleed"
+          />
+        </ConfigureApiBox>
+        <Flex
+          align="center"
+          justify="space-between"
+          gap={4}
+          direction={['column', 'column', 'row']}
+          paddingY={[2, 2, 0]}
+          sizing="border"
+          height="fill"
+        >
+          <Flex align="center" justify="center" gap={2} flex={1}>
+            <Flex justify="center">
+              <Text muted>
+                <DocumentVideoIcon />
+              </Text>
+            </Flex>
+            <Flex justify="center">
+              <Text size={1} muted>
+                Drag video or paste URL here
+              </Text>
+            </Flex>
+          </Flex>
+          <Inline space={2}>
+            <FileInputButton
+              mode="ghost"
+              tone="default"
+              icon={UploadIcon}
+              text="Upload"
+              onSelect={onSelect}
+            />
+            <Button mode="ghost" icon={SearchIcon} text="Select" onClick={handleBrowse} />
+          </Inline>
+        </Flex>
+      </UploadCard>
+    </Box>
+  )
+}
diff --git a/src/components/Uploader.styles.tsx b/src/components/Uploader.styles.tsx
index 215046f1..3ad04ee0 100644
--- a/src/components/Uploader.styles.tsx
+++ b/src/components/Uploader.styles.tsx
@@ -1,45 +1,15 @@
 /* eslint-disable no-nested-ternary */
-import {useId} from '@reach/auto-id'
-import {Box, Button, Card, Dialog, Flex, Grid, Stack, Text} from '@sanity/ui'
+import {type CardTone, Box, Button, Card, Flex, Grid, Stack, Text} from '@sanity/ui'
 import cx from 'classnames'
 import React, {forwardRef, useCallback, useRef, useState} from 'react'
 import {FiCopy, FiUpload} from 'react-icons/fi'
-import {LinearProgress} from 'sanity/_unstable'
 import styled, {keyframes} from 'styled-components'
 
-import type {Secrets, VideoAssetDocument} from '../util/types'
+import type {VideoAssetDocument} from '../util/types'
 import EditThumbnailDialog from './EditThumbnailDialog'
 import {type FileInputButtonProps, FileInputButton} from './FileInputButton'
 import {withFocusRing} from './withFocusRing'
 
-interface ErrorDialogProps {
-  message: string
-  onClose: () => void
-  onSetup: () => void
-}
-export const ErrorDialog = ({message, onClose, onSetup}: ErrorDialogProps) => {
-  const id = `ErrorDialog${useId()}`
-  if (message === 'Invalid credentials') {
-    return (
-      <Dialog id={id} header="Invalid credentials" onClose={onClose}>
-        <Box padding={4}>
-          <Stack space={4}>
-            <Text>You need to check your Mux access token and secret key.</Text>
-            <Button text="Run setup" tone="primary" padding={3} onClick={onSetup} />
-          </Stack>
-        </Box>
-      </Dialog>
-    )
-  }
-  return (
-    <Dialog id={id} header="Upload failed" onClose={onClose}>
-      <Box padding={4}>
-        <Text>{message}</Text>
-      </Box>
-    </Dialog>
-  )
-}
-
 interface UploadProgressProps {
   progress: number
   error?: Error | null
@@ -98,6 +68,7 @@ const cmdKey = 91
 const UploadCardWithFocusRing = withFocusRing(Card)
 
 interface UploadCardProps {
+  tone?: CardTone
   children: React.ReactNode
   onPaste: React.ClipboardEventHandler<HTMLInputElement>
   onFocus: React.FocusEventHandler<HTMLDivElement>
@@ -109,7 +80,7 @@ interface UploadCardProps {
 }
 export const UploadCard = forwardRef<HTMLDivElement, UploadCardProps>(
   (
-    {children, onPaste, onFocus, onBlur, onDrop, onDragEnter, onDragLeave, onDragOver},
+    {children, tone, onPaste, onFocus, onBlur, onDrop, onDragEnter, onDragLeave, onDragOver},
     forwardedRef
   ) => {
     const ctrlDown = useRef(false)
@@ -131,10 +102,11 @@ export const UploadCard = forwardRef<HTMLDivElement, UploadCardProps>(
 
     return (
       <UploadCardWithFocusRing
+        tone={tone}
         height="fill"
         ref={forwardedRef}
         padding={0}
-        radius={0}
+        radius={2}
         shadow={0}
         tabIndex={0}
         onKeyDown={handleKeyDown}
@@ -273,41 +245,3 @@ export const UploadButton = ({onSelect}: UploadButtonProps) => {
     />
   )
 }
-
-interface UploadButtonGridProps {
-  asset: VideoAssetDocument
-  getCurrentTime: () => number
-  onBrowse: () => void
-  onRemove: () => void
-  onUpload: FileInputButtonProps['onSelect']
-}
-export const UploadButtonGrid = ({
-  asset,
-  getCurrentTime,
-  onBrowse,
-  onRemove,
-  onUpload,
-}: UploadButtonGridProps) => {
-  const [open, setOpen] = useState<'thumbnail' | false>(false)
-  const handleClose = useCallback(() => setOpen(false), [])
-
-  return (
-    <>
-      <Grid columns={4} gap={2}>
-        <UploadButton onSelect={onUpload} />
-        <Button key="browse" mode="ghost" tone="primary" onClick={onBrowse} text="Browse" />
-        <Button
-          key="thumbnail"
-          mode="ghost"
-          tone="primary"
-          onClick={() => setOpen('thumbnail')}
-          text="Thumbnail"
-        />
-        <Button key="remove" onClick={onRemove} mode="ghost" tone="critical" text="Remove" />
-      </Grid>
-      {open === 'thumbnail' && (
-        <EditThumbnailDialog asset={asset} getCurrentTime={getCurrentTime} onClose={handleClose} />
-      )}
-    </>
-  )
-}
diff --git a/src/components/__legacy__Input.tsx b/src/components/__legacy__Input.tsx
index 7e096396..e2787d5f 100644
--- a/src/components/__legacy__Input.tsx
+++ b/src/components/__legacy__Input.tsx
@@ -7,7 +7,6 @@ import React, {Component} from 'react'
 import type {DialogState, SetDialogState} from '../hooks/useDialogState'
 import type {Config, MuxInputProps, Secrets, VideoAssetDocument} from '../util/types'
 import Uploader from './__legacy__Uploader'
-import SetupNotice from './SetupNotice'
 
 interface Props extends MuxInputProps {
   asset: VideoAssetDocument | null | undefined
@@ -15,7 +14,6 @@ interface Props extends MuxInputProps {
   client: SanityClient
   secrets: Secrets
   needsSetup: boolean
-  isInitialSetup: boolean
   dialogState: DialogState
   setDialogState: SetDialogState
 }
@@ -33,7 +31,6 @@ export default class MuxVideoInput extends Component<Props, State> {
     confirmRemove: false,
     deleteOnMuxChecked: false,
     deleteAssetDocumentChecked: true,
-    hasFocus: false,
     isLoading: 'secrets',
   }
 
@@ -48,24 +45,6 @@ export default class MuxVideoInput extends Component<Props, State> {
     })
   }
 
-  componentWillUnmount() {
-    if (this.subscription) {
-      this.subscription.unsubscribe()
-    }
-  }
-
-  handleFocus = () => {
-    this.setState({hasFocus: true})
-  }
-
-  handleBlur = () => {
-    this.setState({hasFocus: false})
-  }
-
-  handleRemoveVideoButtonClicked = () => {
-    this.setState({confirmRemove: true})
-  }
-
   handleCancelRemove = () => {
     this.setState({
       confirmRemove: false,
@@ -86,34 +65,20 @@ export default class MuxVideoInput extends Component<Props, State> {
     }))
   }
 
-  handleBrowseButton = () => {
-    this.setState({showBrowser: true})
-  }
-
   render() {
     return (
       <>
-        {this.props.asset || !this.props.needsSetup ? (
-          <Uploader
-            config={this.props.config}
-            client={this.props.client}
-            hasFocus={this.state.hasFocus}
-            onBlur={this.handleBlur}
-            onFocus={this.handleFocus}
-            secrets={this.props.secrets}
-            onBrowse={this.handleBrowseButton}
-            asset={this.props.asset}
-            readOnly={this.props.readOnly}
-            onChange={this.props.onChange}
-            dialogState={this.props.dialogState}
-            setDialogState={this.props.setDialogState}
-          />
-        ) : (
-          <SetupNotice
-            isLoading={this.state.isLoading}
-            isInitialSetup={this.props.isInitialSetup}
-          />
-        )}
+        <Uploader
+          config={this.props.config}
+          client={this.props.client}
+          secrets={this.props.secrets}
+          asset={this.props.asset}
+          readOnly={this.props.readOnly}
+          onChange={this.props.onChange}
+          dialogState={this.props.dialogState}
+          setDialogState={this.props.setDialogState}
+          needsSetup={this.props.needsSetup}
+        />
         {this.state.confirmRemove && (
           <Dialog
             id="remove-video"
diff --git a/src/components/__legacy__Uploader.tsx b/src/components/__legacy__Uploader.tsx
index 47de9ee5..0e7c6876 100644
--- a/src/components/__legacy__Uploader.tsx
+++ b/src/components/__legacy__Uploader.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable no-nested-ternary */
 // This component needs to be refactored into a functional component
 
 import type {SanityClient} from '@sanity/client'
@@ -13,20 +14,20 @@ import type {Config, MuxInputProps, Secrets, VideoAssetDocument} from '../util/t
 import InputBrowser from './InputBrowser'
 import Player from './Player'
 import PlayerActionsMenu from './PlayerActionsMenu'
-import {UploadCard, UploadPlaceholder} from './Uploader.styles'
+import {UploadCard} from './Uploader.styles'
+import UploadPlaceholder from './UploadPlaceholder'
 import {UploadProgress} from './UploadProgress'
 
 interface Props extends Pick<MuxInputProps, 'onChange' | 'readOnly'> {
   config: Config
   client: SanityClient
-  hasFocus: boolean
   onFocus: React.FocusEventHandler<HTMLDivElement>
   onBlur: React.FocusEventHandler<HTMLDivElement>
-  onBrowse: () => void
   secrets: Secrets
   asset: VideoAssetDocument | null | undefined
   dialogState: DialogState
   setDialogState: SetDialogState
+  needsSetup: boolean
 }
 
 interface State {
@@ -192,6 +193,8 @@ class MuxVideoInputUploader extends Component<Props, State> {
     event.stopPropagation()
     this.dragEnteredEls.push(event.target)
     this.setState({isDraggingOver: true})
+    const type = event.dataTransfer.items?.[0]?.type
+    this.setState({invalidFile: !type.startsWith('video/')})
   }
 
   handleDragLeave: React.DragEventHandler<HTMLDivElement> = (event) => {
@@ -224,6 +227,13 @@ class MuxVideoInputUploader extends Component<Props, State> {
     return (
       <>
         <UploadCard
+          tone={
+            this.state.isDraggingOver && (this.state.invalidPaste || this.state.invalidFile)
+              ? 'critical'
+              : this.state.isDraggingOver
+              ? 'positive'
+              : undefined
+          }
           onBlur={this.props.onBlur}
           onFocus={this.props.onFocus}
           onDrop={this.handleDrop}
@@ -253,12 +263,11 @@ class MuxVideoInputUploader extends Component<Props, State> {
             />
           ) : (
             <UploadPlaceholder
-              onBrowse={this.props.onBrowse}
-              onUpload={this.onUpload}
-              isDraggingOver={this.state.isDraggingOver}
-              hasFocus={this.props.hasFocus}
-              invalidPaste={this.state.invalidPaste}
-              invalidFile={this.state.invalidFile}
+              hovering={this.state.isDraggingOver}
+              onSelect={this.onUpload}
+              readOnly={this.props.readOnly!}
+              setDialogState={this.props.setDialogState}
+              needsSetup={this.props.needsSetup}
             />
           )}
         </UploadCard>