Merge pull request #50 from ambujraj/dev

Added personalisation and Source email option to share

middleware/main.py

@@ -51,6 +51,7 @@ class InitiateUpload(BaseModel):
     file_name: str
     creator_email: str
     creator_ip: str
+    share_email_as_source: bool
 
 
 class ContinueUpload(BaseModel):
@@ -129,6 +130,7 @@ def initiate_upload_return_upload_url(body: InitiateUpload, request: Request):
         raise HTTPException(status_code=400, detail="File size exceeds the limit.")
 
     file_name = body.file_name
+    share_email_as_source = body.share_email_as_source
     upload_id = uuid.uuid4().hex
     continue_id = uuid.uuid4().hex
     file_path = upload_id + "/" + file_name
@@ -142,6 +144,7 @@ def initiate_upload_return_upload_url(body: InitiateUpload, request: Request):
         "status": StatusEnum.initiated.name,
         "creator_email": body.creator_email,
         "creator_ip": client_ip,
+        "share_email_as_source": share_email_as_source,
         "download_count": 0,
         "max_download": 5,
         "continue_id": continue_id,
@@ -345,7 +348,10 @@ def get_file_url_return_name_link(upload_id: str):
         download_expiration_time = 21600  # 6 hours
         # Generate share download link
         file_url = storage.generate_download_url(file_path, download_expiration_time)
-
+        if(upload_metadata["share_email_as_source"]):
+            file_data["user_email"] = upload_metadata["creator_email"]
+        else:
+            file_data["user_email"] = None
         file_data[file_name] = {}
         file_data[file_name]["format"] = file_format
         file_data[file_name]["size"] = _format_size(file_size)

ui/package.json

@@ -15,7 +15,9 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^3.3.4",
+    "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-hover-card": "^1.0.7",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-progress": "^1.0.3",

ui/src/app/(pages)/page.tsx

@@ -29,6 +29,12 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from '@/components/ui/tooltip'
+import { Checkbox } from '@/components/ui/checkbox'
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from '@/components/ui/hover-card'
 
 export default function Home() {
   const router = useRouter()
@@ -45,6 +51,7 @@ export default function Home() {
   const [uploading, setUploading] = useState(false)
   const [uploaded, setUploaded] = useState(false)
   const [postProcessing, setPostProcessing] = useState(false)
+  const [willShareEmail, setWillShareEmail] = useState(false)
   const [shareURL, setShareURL] = useState('')
   const [shareQR, setShareQR] = useState('')
   const [isCopied, setIsCopied] = useState(false)
@@ -157,6 +164,7 @@ export default function Home() {
     setDownloadsAllowed('')
     setBatchCount(0)
     setTotalBatch(0)
+    setWillShareEmail(false)
   }
 
   const handleCopy = async () => {
@@ -298,6 +306,7 @@ export default function Home() {
         setSelectedFiles([])
         setBatchCount(0)
         setTotalBatch(0)
+        setWillShareEmail(false)
       }
     }
   }
@@ -334,6 +343,7 @@ export default function Home() {
       file_name: file.name,
       creator_email: userEmail,
       creator_ip: '127.0.0.1',
+      share_email_as_source: willShareEmail,
     }
 
     const initiateUploadResponse = await fetch(apiBaseURL + '/initiateUpload', {
@@ -439,8 +449,9 @@ export default function Home() {
               ) : (
                 <>
                   <DrawerTitle className="text-center">Send Files</DrawerTitle>
-                  <DrawerDescription className="text-center">
-                    You can select multiple files to share upto 2GB.
+                  <DrawerDescription className="text-center text-xs font-semibold">
+                    {user ? user?.name?.split(' ')[0] + ', ' : ''}you can select
+                    multiple files to share upto 2GB.
                   </DrawerDescription>
                 </>
               )}
@@ -456,6 +467,25 @@ export default function Home() {
                       multiple
                       onChange={handleUploadChange}
                     />
+                    <div className="mt-3 flex items-center space-x-2">
+                      <Checkbox
+                        id="share-email"
+                        checked={willShareEmail}
+                        onClick={() => setWillShareEmail(!willShareEmail)}
+                      />
+                      <Label htmlFor="share-email">
+                        Share your email as source (optional).{' '}
+                        <HoverCard>
+                          <HoverCardTrigger className="text-blue-400 cursor-help disabled">
+                            Why?
+                          </HoverCardTrigger>
+                          <HoverCardContent className="text-sm font-normal">
+                            Displaying your email as the upload source verifies
+                            ownership and increases transparency.
+                          </HoverCardContent>
+                        </HoverCard>
+                      </Label>
+                    </div>
                   </div>
                   <DrawerFooter>
                     <Button disabled={submitDisabled} type="submit">

ui/src/app/(pages)/share/[uploadId]/page.tsx

@@ -61,6 +61,7 @@ function SharePage({ params }: Params) {
   const [downloadingAll, setDownloadingAll] = useState(false)
   const [downloadingOne, setDownloadingOne] = useState(false)
   const [data, setData] = React.useState<File[]>([])
+  const [source, setSource] = useState(null)
   const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({})
   useEffect(() => {
     const fetchData = async () => {
@@ -78,6 +79,10 @@ function SharePage({ params }: Params) {
       const fileNames = Object.keys(responseData)
 
       for (const fileName of fileNames) {
+        if (fileName == 'user_email') {
+          setSource(responseData[fileName])
+          continue
+        }
         const file: File = {
           format: responseData[fileName]['format'],
           name: fileName,
@@ -125,9 +130,9 @@ function SharePage({ params }: Params) {
       header: 'Format',
       cell: ({ row }) => (
         <div className="lowercase">
-          {lookup(row.original.name).includes('/')
-            ? lookup(row.original.name).split('/')[1]
-            : lookup(row.original.name)}
+          {String(lookup(row.original.name)).includes('/')
+            ? String(lookup(row.original.name)).split('/')[1]
+            : String(lookup(row.original.name))}
         </div>
       ),
     },
@@ -219,9 +224,12 @@ function SharePage({ params }: Params) {
       <Header authorised={authorised} statusLoaded={statusLoaded} />
       <div className=" flex items-center justify-center h-[60%] w-[80%] m-auto bg-white rounded-md z-10">
         <div className="w-[90%]">
-          <p className="font-bold text-lg text-left pb-5">
+          <p className="font-bold text-lg text-left pb-1">
             {data.length > 0 ? 'Files are here and waiting!' : ''}
           </p>
+          <p className=" text-xs text-left pb-5">
+            {data.length > 0 && source ? 'Source: ' + source : ''}
+          </p>
           <div className="rounded-md border">
             <Table>
               <TableHeader>

ui/src/components/ui/checkbox.tsx

@@ -0,0 +1,30 @@
+'use client'
+
+import * as React from 'react'
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
+import { CheckIcon } from '@radix-ui/react-icons'
+
+import { cn } from '@/lib/utils'
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      'peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+      className,
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn('flex items-center justify-center text-current')}
+    >
+      <CheckIcon className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }

ui/src/components/ui/hover-card.tsx

@@ -0,0 +1,29 @@
+'use client'
+
+import * as React from 'react'
+import * as HoverCardPrimitive from '@radix-ui/react-hover-card'
+
+import { cn } from '@/lib/utils'
+
+const HoverCard = HoverCardPrimitive.Root
+
+const HoverCardTrigger = HoverCardPrimitive.Trigger
+
+const HoverCardContent = React.forwardRef<
+  React.ElementRef<typeof HoverCardPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
+>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
+  <HoverCardPrimitive.Content
+    ref={ref}
+    align={align}
+    sideOffset={sideOffset}
+    className={cn(
+      'z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      className,
+    )}
+    {...props}
+  />
+))
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }