feat(Upload/DropIndicator): update copy

components/core/ApplicationHeader.js

@@ -204,7 +204,7 @@ export default function ApplicationHeader({ viewer, page, data, onAction }) {
               />
             </div>
             <Upload.Provider page={page} data={data} viewer={viewer}>
-              <Upload.Root onAction={onAction} viewer={viewer}>
+              <Upload.Root data={data}>
                 <div css={STYLES_RIGHT}>
                   <Actions
                     uploadAction={

components/core/Upload/DropIndicator.js

@@ -1,7 +1,6 @@
 import * as React from "react";
 import * as System from "~/components/system";
 import * as Styles from "~/common/styles";
-import * as Strings from "~/common/strings";
 import * as FileUtilities from "~/common/file-utilities";
 
 import { css } from "@emotion/react";
@@ -39,7 +38,7 @@ const STYLES_PLACEHOLDER = css`
   }
 `;
 
-export default function DropIndicator() {
+export default function DropIndicator({ data }) {
   const DEFAULT_DROPPING_STATE = {
     isDroppingFiles: false,
     totalFilesDropped: undefined,
@@ -83,9 +82,9 @@ export default function DropIndicator() {
           <DroppedFilesPlaceholder totalFilesDropped={totalFilesDropped} />
           <div style={{ marginTop: 64 }}>
             <System.H3 as="p" style={{ textAlign: "center" }}>
-              Dropping {totalFilesDropped}{" "}
-              {totalFilesDropped ? Strings.pluralize("file", totalFilesDropped) : "files"} to save
-              to Slate
+              {data?.name
+                ? `Drag and drop files to save them to #${data.name}`
+                : "Drag and drop files to save them to slate"}
             </System.H3>
             <Show when={!totalFilesDropped || totalFilesDropped > 200}>
               <System.H5 as="p" color="textGrayDark">

components/core/Upload/Jumper.js

@@ -44,7 +44,7 @@ const STYLES_FILES_UPLOAD_WRAPPER = css`
   padding-bottom: 35.5px;
 `;
 
-export function UploadJumper() {
+export function UploadJumper({ data }) {
   const [{ isUploadJumperVisible }, { upload, uploadLink, hideUploadJumper }] = useUploadContext();
 
   const [state, setState] = React.useState({
@@ -54,7 +54,7 @@ export function UploadJumper() {
 
   const handleUpload = (e) => {
     const { files } = FileUtilities.formatUploadedFiles({ files: e.target.files });
-    upload({ files, slate: state.slate });
+    upload({ files, slate: data });
   };
 
   const handleUploadLink = () => {
@@ -69,7 +69,7 @@ export function UploadJumper() {
       setState((prev) => ({ ...prev, urlError: true }));
       return;
     }
-    uploadLink({ url: state.url, slate: state.slate });
+    uploadLink({ url: state.url, slate: data });
     setState({ url: "", urlError: false });
   };
 

components/core/Upload/index.js

@@ -12,14 +12,14 @@ import DropIndicator from "~/components/core/Upload/DropIndicator";
 /* -------------------------------------------------------------------------------------------------
  * Root
  * -----------------------------------------------------------------------------------------------*/
-const Root = ({ children }) => {
+const Root = ({ children, data }) => {
   return (
     <>
       {children}
       <ModalPortal>
-        <Jumper />
+        <Jumper data={data} />
         <Popup />
-        <DropIndicator />
+        <DropIndicator data={data} />
       </ModalPortal>
     </>
   );