{"version":3,"file":"FromComputerForm.mjs","sources":["../../../../../admin/src/components/UploadAssetDialog/AddAssetStep/FromComputerForm.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Button, Flex, Modal, Typography } from '@strapi/design-system';\nimport { PlusCircle as PicturePlus } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { AssetSource } from '../../../constants';\nimport { useTracking } from '../../../hooks/useTracking';\nimport { getTrad, rawFileToAsset } from '../../../utils';\n\nimport type { FileWithRawFile } from './AddAssetStep';\n\nconst Wrapper = styled(Flex)`\n  flex-direction: column;\n`;\n\nconst IconWrapper = styled.div`\n  font-size: 6rem;\n\n  svg path {\n    fill: ${({ theme }) => theme.colors.primary600};\n  }\n`;\n\nconst MediaBox = styled(Box)`\n  border-style: dashed;\n`;\n\nconst OpaqueBox = styled(Box)`\n  opacity: 0;\n  cursor: pointer;\n`;\n\ninterface FromComputerFormProps {\n  onClose: () => void;\n  onAddAssets: (assets: FileWithRawFile[]) => void;\n  trackedLocation?: string;\n}\n\nexport const FromComputerForm = ({\n  onClose,\n  onAddAssets,\n  trackedLocation,\n}: FromComputerFormProps) => {\n  const { formatMessage } = useIntl();\n  const [dragOver, setDragOver] = React.useState(false);\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const { trackUsage } = useTracking();\n\n  const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {\n    event.preventDefault();\n  };\n\n  const handleDragEnter = (event: React.DragEvent<HTMLDivElement>) => {\n    event.preventDefault();\n    setDragOver(true);\n  };\n\n  const handleDragLeave = () => setDragOver(false);\n\n  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n    e.preventDefault();\n    // inputRef.current?.click();\n  };\n\n  const handleChange = () => {\n    const files = inputRef.current?.files;\n    const assets: FileWithRawFile[] = [];\n\n    if (files) {\n      for (let i = 0; i < files.length; i++) {\n        const file = files.item(i);\n        if (file) {\n          const asset = rawFileToAsset(file, AssetSource.Computer);\n          assets.push(asset);\n        }\n      }\n    }\n\n    if (trackedLocation) {\n      trackUsage('didSelectFile', { source: 'computer', location: trackedLocation });\n    }\n\n    onAddAssets(assets);\n  };\n\n  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {\n    e.preventDefault();\n\n    if (e?.dataTransfer?.files) {\n      const files = e.dataTransfer.files;\n      const assets = [];\n\n      for (let i = 0; i < files.length; i++) {\n        const file = files.item(i);\n        if (file) {\n          const asset = rawFileToAsset(file, AssetSource.Computer);\n          assets.push(asset);\n        }\n      }\n\n      onAddAssets(assets);\n    }\n\n    setDragOver(false);\n  };\n\n  return (\n    <form>\n      <Box paddingLeft={8} paddingRight={8} paddingTop={6} paddingBottom={6}>\n        <label>\n          <MediaBox\n            paddingTop={11}\n            paddingBottom={11}\n            hasRadius\n            justifyContent=\"center\"\n            borderColor={dragOver ? 'primary500' : 'neutral300'}\n            background={dragOver ? 'primary100' : 'neutral100'}\n            position=\"relative\"\n            onDragEnter={handleDragEnter}\n            onDragLeave={handleDragLeave}\n            onDragOver={handleDragOver}\n            onDrop={handleDrop}\n          >\n            <Flex justifyContent=\"center\">\n              <Wrapper>\n                <IconWrapper>\n                  <PicturePlus aria-hidden width=\"3.2rem\" height=\"3.2rem\" />\n                </IconWrapper>\n\n                <Box paddingTop={3} paddingBottom={5}>\n                  <Typography variant=\"delta\" textColor=\"neutral600\" tag=\"span\">\n                    {formatMessage({\n                      id: getTrad('input.label'),\n                      defaultMessage: 'Drag & Drop here or',\n                    })}\n                  </Typography>\n                </Box>\n\n                <OpaqueBox\n                  tag=\"input\"\n                  position=\"absolute\"\n                  left={0}\n                  right={0}\n                  bottom={0}\n                  top={0}\n                  width=\"100%\"\n                  type=\"file\"\n                  multiple\n                  name=\"files\"\n                  aria-label={formatMessage({\n                    id: getTrad('input.label'),\n                    defaultMessage: 'Drag & Drop here or',\n                  })}\n                  tabIndex={-1}\n                  ref={inputRef}\n                  zIndex={1}\n                  onChange={handleChange}\n                />\n\n                {/* <Box position=\"relative\">\n                  <Button type=\"button\" onClick={handleClick}>\n                    {formatMessage({\n                      id: getTrad('input.button.label'),\n                      defaultMessage: 'Browse files',\n                    })}\n                  </Button>\n                </Box> */}\n              </Wrapper>\n            </Flex>\n          </MediaBox>\n        </label>\n      </Box>\n\n      <Modal.Footer>\n        <Button onClick={onClose} variant=\"tertiary\">\n          {formatMessage({\n            id: 'app.components.Button.cancel',\n            defaultMessage: 'cancel',\n          })}\n        </Button>\n      </Modal.Footer>\n    </form>\n  );\n};\n"],"names":["Wrapper","styled","Flex","IconWrapper","div","theme","colors","primary600","MediaBox","Box","OpaqueBox","FromComputerForm","onClose","onAddAssets","trackedLocation","formatMessage","useIntl","dragOver","setDragOver","React","useState","inputRef","useRef","trackUsage","useTracking","handleDragOver","event","preventDefault","handleDragEnter","handleDragLeave","handleChange","files","current","assets","i","length","file","item","asset","rawFileToAsset","AssetSource","Computer","push","source","location","handleDrop","e","dataTransfer","_jsxs","form","_jsx","paddingLeft","paddingRight","paddingTop","paddingBottom","label","hasRadius","justifyContent","borderColor","background","position","onDragEnter","onDragLeave","onDragOver","onDrop","PicturePlus","aria-hidden","width","height","Typography","variant","textColor","tag","id","getTrad","defaultMessage","left","right","bottom","top","type","multiple","name","aria-label","tabIndex","ref","zIndex","onChange","Modal","Footer","Button","onClick"],"mappings":";;;;;;;;;;;;;;;;AAaA,MAAMA,OAAAA,GAAUC,MAAAA,CAAOC,IAAAA,CAAK;;AAE5B,CAAC;AAED,MAAMC,WAAAA,GAAcF,MAAAA,CAAOG,GAAG;;;;UAIpB,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAACC,UAAU,CAAC;;AAEnD,CAAC;AAED,MAAMC,QAAAA,GAAWP,MAAAA,CAAOQ,GAAAA,CAAI;;AAE5B,CAAC;AAED,MAAMC,SAAAA,GAAYT,MAAAA,CAAOQ,GAAAA,CAAI;;;AAG7B,CAAC;AAQM,MAAME,mBAAmB,CAAC,EAC/BC,OAAO,EACPC,WAAW,EACXC,eAAe,EACO,GAAA;IACtB,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAC1B,IAAA,MAAM,CAACC,QAAAA,EAAUC,WAAAA,CAAY,GAAGC,KAAAA,CAAMC,QAAQ,CAAC,KAAA,CAAA;IAC/C,MAAMC,QAAAA,GAAWF,KAAAA,CAAMG,MAAM,CAAmB,IAAA,CAAA;IAChD,MAAM,EAAEC,UAAU,EAAE,GAAGC,WAAAA,EAAAA;AAEvB,IAAA,MAAMC,iBAAiB,CAACC,KAAAA,GAAAA;AACtBA,QAAAA,KAAAA,CAAMC,cAAc,EAAA;AACtB,IAAA,CAAA;AAEA,IAAA,MAAMC,kBAAkB,CAACF,KAAAA,GAAAA;AACvBA,QAAAA,KAAAA,CAAMC,cAAc,EAAA;QACpBT,WAAAA,CAAY,IAAA,CAAA;AACd,IAAA,CAAA;IAEA,MAAMW,eAAAA,GAAkB,IAAMX,WAAAA,CAAY,KAAA,CAAA;AAO1C,IAAA,MAAMY,YAAAA,GAAe,IAAA;QACnB,MAAMC,KAAAA,GAAQV,QAAAA,CAASW,OAAO,EAAED,KAAAA;AAChC,QAAA,MAAME,SAA4B,EAAE;AAEpC,QAAA,IAAIF,KAAAA,EAAO;AACT,YAAA,IAAK,IAAIG,CAAAA,GAAI,CAAA,EAAGA,IAAIH,KAAAA,CAAMI,MAAM,EAAED,CAAAA,EAAAA,CAAK;gBACrC,MAAME,IAAAA,GAAOL,KAAAA,CAAMM,IAAI,CAACH,CAAAA,CAAAA;AACxB,gBAAA,IAAIE,IAAAA,EAAM;AACR,oBAAA,MAAME,KAAAA,GAAQC,cAAAA,CAAeH,IAAAA,EAAMI,WAAAA,CAAYC,QAAQ,CAAA;AACvDR,oBAAAA,MAAAA,CAAOS,IAAI,CAACJ,KAAAA,CAAAA;AACd,gBAAA;AACF,YAAA;AACF,QAAA;AAEA,QAAA,IAAIxB,eAAAA,EAAiB;AACnBS,YAAAA,UAAAA,CAAW,eAAA,EAAiB;gBAAEoB,MAAAA,EAAQ,UAAA;gBAAYC,QAAAA,EAAU9B;AAAgB,aAAA,CAAA;AAC9E,QAAA;QAEAD,WAAAA,CAAYoB,MAAAA,CAAAA;AACd,IAAA,CAAA;AAEA,IAAA,MAAMY,aAAa,CAACC,CAAAA,GAAAA;AAClBA,QAAAA,CAAAA,CAAEnB,cAAc,EAAA;QAEhB,IAAImB,CAAAA,EAAGC,cAAchB,KAAAA,EAAO;AAC1B,YAAA,MAAMA,KAAAA,GAAQe,CAAAA,CAAEC,YAAY,CAAChB,KAAK;AAClC,YAAA,MAAME,SAAS,EAAE;AAEjB,YAAA,IAAK,IAAIC,CAAAA,GAAI,CAAA,EAAGA,IAAIH,KAAAA,CAAMI,MAAM,EAAED,CAAAA,EAAAA,CAAK;gBACrC,MAAME,IAAAA,GAAOL,KAAAA,CAAMM,IAAI,CAACH,CAAAA,CAAAA;AACxB,gBAAA,IAAIE,IAAAA,EAAM;AACR,oBAAA,MAAME,KAAAA,GAAQC,cAAAA,CAAeH,IAAAA,EAAMI,WAAAA,CAAYC,QAAQ,CAAA;AACvDR,oBAAAA,MAAAA,CAAOS,IAAI,CAACJ,KAAAA,CAAAA;AACd,gBAAA;AACF,YAAA;YAEAzB,WAAAA,CAAYoB,MAAAA,CAAAA;AACd,QAAA;QAEAf,WAAAA,CAAY,KAAA,CAAA;AACd,IAAA,CAAA;AAEA,IAAA,qBACE8B,IAAA,CAACC,MAAAA,EAAAA;;0BACCC,GAAA,CAACzC,GAAAA,EAAAA;gBAAI0C,WAAAA,EAAa,CAAA;gBAAGC,YAAAA,EAAc,CAAA;gBAAGC,UAAAA,EAAY,CAAA;gBAAGC,aAAAA,EAAe,CAAA;AAClE,gBAAA,QAAA,gBAAAJ,GAAA,CAACK,OAAAA,EAAAA;AACC,oBAAA,QAAA,gBAAAL,GAAA,CAAC1C,QAAAA,EAAAA;wBACC6C,UAAAA,EAAY,EAAA;wBACZC,aAAAA,EAAe,EAAA;wBACfE,SAAS,EAAA,IAAA;wBACTC,cAAAA,EAAe,QAAA;AACfC,wBAAAA,WAAAA,EAAazC,WAAW,YAAA,GAAe,YAAA;AACvC0C,wBAAAA,UAAAA,EAAY1C,WAAW,YAAA,GAAe,YAAA;wBACtC2C,QAAAA,EAAS,UAAA;wBACTC,WAAAA,EAAajC,eAAAA;wBACbkC,WAAAA,EAAajC,eAAAA;wBACbkC,UAAAA,EAAYtC,cAAAA;wBACZuC,MAAAA,EAAQnB,UAAAA;AAER,wBAAA,QAAA,gBAAAK,GAAA,CAAChD,IAAAA,EAAAA;4BAAKuD,cAAAA,EAAe,QAAA;AACnB,4BAAA,QAAA,gBAAAT,IAAA,CAAChD,OAAAA,EAAAA;;kDACCkD,GAAA,CAAC/C,WAAAA,EAAAA;AACC,wCAAA,QAAA,gBAAA+C,GAAA,CAACe,UAAAA,EAAAA;4CAAYC,aAAW,EAAA,IAAA;4CAACC,KAAAA,EAAM,QAAA;4CAASC,MAAAA,EAAO;;;kDAGjDlB,GAAA,CAACzC,GAAAA,EAAAA;wCAAI4C,UAAAA,EAAY,CAAA;wCAAGC,aAAAA,EAAe,CAAA;AACjC,wCAAA,QAAA,gBAAAJ,GAAA,CAACmB,UAAAA,EAAAA;4CAAWC,OAAAA,EAAQ,OAAA;4CAAQC,SAAAA,EAAU,YAAA;4CAAaC,GAAAA,EAAI,MAAA;sDACpDzD,aAAAA,CAAc;AACb0D,gDAAAA,EAAAA,EAAIC,OAAAA,CAAQ,aAAA,CAAA;gDACZC,cAAAA,EAAgB;AAClB,6CAAA;;;kDAIJzB,GAAA,CAACxC,SAAAA,EAAAA;wCACC8D,GAAAA,EAAI,OAAA;wCACJZ,QAAAA,EAAS,UAAA;wCACTgB,IAAAA,EAAM,CAAA;wCACNC,KAAAA,EAAO,CAAA;wCACPC,MAAAA,EAAQ,CAAA;wCACRC,GAAAA,EAAK,CAAA;wCACLZ,KAAAA,EAAM,MAAA;wCACNa,IAAAA,EAAK,MAAA;wCACLC,QAAQ,EAAA,IAAA;wCACRC,IAAAA,EAAK,OAAA;AACLC,wCAAAA,YAAAA,EAAYpE,aAAAA,CAAc;AACxB0D,4CAAAA,EAAAA,EAAIC,OAAAA,CAAQ,aAAA,CAAA;4CACZC,cAAAA,EAAgB;AAClB,yCAAA,CAAA;AACAS,wCAAAA,QAAAA,EAAU,EAAC;wCACXC,GAAAA,EAAKhE,QAAAA;wCACLiE,MAAAA,EAAQ,CAAA;wCACRC,QAAAA,EAAUzD;;;;;;;;AAiBtB,0BAAAoB,GAAA,CAACsC,MAAMC,MAAM,EAAA;AACX,gBAAA,QAAA,gBAAAvC,GAAA,CAACwC,MAAAA,EAAAA;oBAAOC,OAAAA,EAAS/E,OAAAA;oBAAS0D,OAAAA,EAAQ,UAAA;8BAC/BvD,aAAAA,CAAc;wBACb0D,EAAAA,EAAI,8BAAA;wBACJE,cAAAA,EAAgB;AAClB,qBAAA;;;;;AAKV;;;;"}