feat: Improve upload component flow (#285)

refinements to the Upload component to - make drag and drop work and fix the click area. - make it look nice. - add more namespacing of our css classes. License: MIT Signed-off-by: Oli Evans <oli@protocol.ai> Signed-off-by: Oli Evans <oli@protocol.ai> Co-authored-by: Travis Vachon <travis.vachon@gmail.com>
storacha · Jan 20, 2023 · ba9a3bf · ba9a3bf
1 parent 9a67365
commit ba9a3bf
Show file tree

Hide file tree

Showing 3 changed files with 127 additions and 56 deletions.
diff --git a/examples/react/w3console/src/index.css b/examples/react/w3console/src/index.css
@@ -3,7 +3,6 @@
 @tailwind utilities;
 
 :root {
-  --w3ui-uploader-height: theme(spacing.36);
   --w3ui-uploader-primary: theme(colors.slate.800);
   --w3ui-uploader-primary-hover: theme(colors.blue.900);
 }
@@ -36,27 +35,6 @@
   @apply flex flex-row space-x-4 my-4;
 }
 
-.w3ui-uploader-wrapper {
-  @apply grow;
-}
-
-.w3ui-uploader__file {
-  @apply rounded-md w-full grid grid-cols-2 p-4 bg-gray-200 text-gray-500 dark:bg-gray-900 dark:text-white;
-}
-
-.w3ui-uploader__file .name {
-  @apply col-span-2 truncate;
-}
-
-.w3ui-uploader__file .type,
-.size {
-  @apply text-sm;
-}
-
-.w3ui-uploader-console {
-  @apply rounded-md w-full bg-gray-200 text-gray-500 dark:bg-gray-900 dark:text-white p-4 truncate;
-}
-
 .w3ui-simple-authenticator-verify-email {
   @apply bg-gray-400 dark:bg-gray-800 px-24 py-16 rounded-md;
 }

diff --git a/packages/react/src/Uploader.tsx b/packages/react/src/Uploader.tsx
@@ -7,10 +7,10 @@ import { Link, Version } from 'multiformats'
 
 export const Uploading = ({ file, storedDAGShards }: { file?: File, storedDAGShards?: CARMetadata[] }): JSX.Element => (
   <div className='uploading'>
-    <h1 className='title'>Uploading DAG for {file?.name}</h1>
+    <h1 className='w3ui-uploader-console__title'>Uploading {file?.name}</h1>
     {storedDAGShards?.map(({ cid, size }) => (
-      <p className='shard' key={cid.toString()}>
-        {cid.toString()} ({size} bytes)
+      <p className='w3ui-uploader-console__cid' key={cid.toString()}>
+        shard {cid.toString()} ({humanFileSize(size)}) uploaded
       </p>
     ))}
   </div>
@@ -33,17 +33,14 @@ export const Done = ({ dataCID }: DoneProps): JSX.Element => {
   const [, { setFile }] = useUploaderComponent()
   const cid: string = dataCID?.toString() ?? ''
   return (
-    <div className='done'>
-      <h1 className='title'>Done!</h1>
-      <p className='cid'>
-        Uploaded to <a href={`https://${cid}.ipfs.w3s.link/`}>{cid}</a>
-      </p>
-      <button
-        className='w3ui-button'
-        onClick={() => { setFile(undefined) }}
-      >
-        Add More
-      </button>
+    <div className='w3ui-uploader-console__done'>
+      <h1 className='w3ui-uploader-console__title'>Uploaded</h1>
+      <a className='w3ui-uploader-console__cid' href={`https://${cid}.ipfs.w3s.link/`}>{cid}</a>
+      <div className='w3ui-uploader-console__actions'>
+        <button className='w3ui-button' onClick={() => { setFile(undefined) }}>
+          Add More
+        </button>
+      </div>
     </div>
   )
 }
@@ -62,6 +59,26 @@ const UploaderForm = (): JSX.Element => {
   )
 }
 
+function pickFileIconLabel (file: File): string | undefined {
+  const type = file.type.split('/')
+  if ((type.length === 0) || type.at(0) === '') {
+    const ext = file.name.split('.').at(-1)
+    if ((ext !== undefined) && ext.length < 5) {
+      return ext
+    }
+    return 'Data'
+  }
+  if (type.at(0) === 'image') {
+    return type.at(-1)
+  }
+  return type.at(0)
+}
+
+function humanFileSize (bytes: number): string {
+  const size = (bytes / (1024 * 1024)).toFixed(2)
+  return `${size} MiB`
+}
+
 const UploaderContents = (): JSX.Element => {
   const [{ status, file }] = useUploaderComponent()
   const hasFile = (file !== undefined)
@@ -70,13 +87,19 @@ const UploaderContents = (): JSX.Element => {
       return (
         <>
           <div className='w3ui-uploader__file'>
-            <span className='name'>{file.name}</span>
-            <span className='type'>{file.type}</span>
-            <span className='size'>{file.size}</span>
+            <div className='w3ui-uploader__file_icon' title={file.type}>
+              {pickFileIconLabel(file)}
+            </div>
+            <div className='w3ui-uploader__file_meta'>
+              <span className='w3ui-uploader__file_meta_name'>{file.name}</span>
+              <span className='w3ui-uploader__file_meta_size'>{humanFileSize(file.size)}</span>
+            </div>
+          </div>
+          <div className='w3ui-uploader-console__actions'>
+            <button type='submit' className='w3ui-button' disabled={file === undefined}>
+              Upload
+            </button>
           </div>
-          <button type='submit' className='w3ui-button' disabled={file === undefined}>
-            Upload
-          </button>
         </>
       )
     } else {

diff --git a/packages/react/src/styles/uploader.css b/packages/react/src/styles/uploader.css
@@ -2,7 +2,7 @@
   --w3ui-uploader-padding: 2rem;
   --w3ui-uploader-background: rgba(255, 255, 255, 0.05);
   --w3ui-uploader-background-hover: rgba(255, 255, 255, 0.08);
-  --w3ui-uploader-height: 250px;
+  --w3ui-uploader-height: 200px;
   --w3ui-uploader-border-color: rgba(255, 255, 255, 0.25);
   --w3ui-uploader-border-radius: 8px;
   --w3ui-uploader-primary: salmon;
@@ -18,7 +18,7 @@
   border: 2px dashed var(--w3ui-uploader-border-color);
   background-color: var(--w3ui-uploader-background);
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 0.25em;
@@ -56,33 +56,73 @@
   z-index: 10;
 }
 
-.w3ui-uploader-console .done {
+.w3ui-uploader__file_icon {
+  width: 52px;
+  height: 52px;
+  padding: 0 2px;
+  font-weight: 500;
+  font-size: 10px;
+  letter-spacing: 1px;
+  line-height: 50px;
+  display: inline-block;
+  background-color: black;
+  text-transform: uppercase;
+  text-align: center;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  border-radius: 2px;
+  margin-right: 12px;
+}
+
+.w3ui-uploader__file_meta {
+  display: inline-block;
+  vertical-align: 10px;
+}
+
+.w3ui-uploader__file_meta_name {
+  display: block;
+  font-size: 14px;
+  line-height: 2rem;
+}
+
+.w3ui-uploader__file_meta_size {
+  display: block;
+  font-size: 10px;
+  letter-spacing: 0.5px;
+  font-family: monospace;
+  color:rgba(255, 255, 255, 0.65)
+}
+
+.w3ui-uploader-console__cid {
+  font-size: 12px;
+  font-family: monospace;
+}
+
+.w3ui-uploader-console .uploading {
   display: flex;
   flex-direction: column;
   align-items: center;
 }
 
-.w3ui-uploader-console .uploading {
+.w3ui-uploader-console .error {
   display: flex;
   flex-direction: column;
   align-items: center;
 }
 
-.w3ui-uploader-console .error {
+.w3ui-uploader-console__done {
   display: flex;
   flex-direction: column;
   align-items: center;
 }
 
-.w3ui-uploader-console .done button {
-  width: auto;
-  margin-top: 1rem;
-  padding: 0.25rem 0.5rem;
-  font-size: 90%;
-  color: white;
+.w3ui-uploader .w3ui-uploader__label {
+  display: none;
 }
 
-.w3ui-uploader__label {
+.w3ui-uploader.no-file .w3ui-uploader__label {
+  display: block;
   clip: rect(0 0 0 0);
   clip-path: inset(50%);
   height: 1px;
@@ -92,9 +132,15 @@
   width: 1px;
 }
 
-.w3ui-uploader__input {
+.w3ui-uploader .w3ui-uploader__input {
+  display: none;
+}
+
+.w3ui-uploader.no-file .w3ui-uploader__input {
+  display: block;
   cursor: pointer;
   position: absolute;
+  width: 100%;
   padding: 0;
   opacity: 0;
   top: 0;
@@ -103,17 +149,41 @@
   left: 0;
 }
 
+.w3ui-uploader-console__title {
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.05rem;
+  text-transform: uppercase;
+  color: rgb(156 163 175)
+}
+
+.w3ui-uploader-console__actions {
+  /* border-top: solid 1px var(--w3ui-uploader-border-color); */
+  padding: 1rem;
+}
+
+
+
 .w3ui-button {
   width: 100%;
   background-color: var(--w3ui-uploader-primary);
   border-radius: var(--w3ui-uploader-border-radius);
   outline: none;
   border: 0;
-  padding: 0.75em;
+  padding: 8px 32px;
+  font-weight: 400;
+  font-size: 13px;
+  line-height: 24px;
+  letter-spacing: 0.4px;
+  font-weight: 500;
   cursor: pointer;
   transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 
 .w3ui-button:hover {
   background-color: var(--w3ui-uploader-primary-hover);
+}
+
+.w3ui-uploader .w3ui-button {
+  width: auto;
 }