Merge pull request #612 from mfts/feat/cad-support

feat: new file type support

components/document-upload.tsx

@@ -14,7 +14,9 @@ const fileSizeLimits: { [key: string]: number } = {
   "application/vnd.ms-excel": 40, // 40 MB
   "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": 40, // 40 MB
   "application/vnd.oasis.opendocument.spreadsheet": 40, // 40 MB
-  "text/csv": 40, // 40 MB
+  "image/png": 100, // 100 MB
+  "image/jpeg": 100, // 100 MB
+  "image/jpg": 100, // 100 MB
 };
 
 export default function DocumentUpload({
@@ -43,6 +45,9 @@ export default function DocumentUpload({
               [], // ".xlsx"
             "text/csv": [], // ".csv"
             "application/vnd.oasis.opendocument.spreadsheet": [], // ".ods"
+            "image/png": [], // ".png"
+            "image/jpeg": [], // ".jpeg"
+            "image/jpg": [], // ".jpg"
           }
         : {
             "application/pdf": [], // ".pdf"
@@ -59,6 +64,11 @@ export default function DocumentUpload({
             "application/vnd.openxmlformats-officedocument.wordprocessingml.document":
               [], // ".docx"
             "application/vnd.oasis.opendocument.text": [], // ".odt"
+            "image/vnd.dwg": [".dwg"], // ".dwg"
+            "image/vnd.dxf": [".dxf"], // ".dxf"
+            "image/png": [], // ".png"
+            "image/jpeg": [], // ".jpeg"
+            "image/jpg": [], // ".jpg"
           },
     multiple: false,
     maxSize: maxSize * 1024 * 1024, // 30 MB

components/documents/add-document-modal.tsx

@@ -72,13 +72,21 @@ export function AddDocumentModal({
     try {
       setUploading(true);
 
-      const contentType = currentFile.type;
-      const supportedFileType = getSupportedContentType(contentType);
+      let contentType = currentFile.type;
+      let supportedFileType = getSupportedContentType(contentType);
+
+      if (
+        currentFile.name.endsWith(".dwg") ||
+        currentFile.name.endsWith(".dxf")
+      ) {
+        supportedFileType = "cad";
+        contentType = `image/vnd.${currentFile.name.split(".").pop()}`;
+      }
 
       if (!supportedFileType) {
         setUploading(false);
         toast.error(
-          "Unsupported file format. Please upload a PDF, Powerpoint, Excel, or Word file.",
+          "Unsupported file format. Please upload a PDF, Powerpoint, Excel, Word or image file.",
         );
         return;
       }

components/links/link-sheet/agreement-panel/index.tsx

@@ -62,8 +62,13 @@ export default function AgreementSheet({
       const contentType = currentFile.type;
       const supportedFileType = getSupportedContentType(contentType);
 
-      if (!supportedFileType || contentType !== "application/pdf") {
-        toast.error("Unsupported file format. Please upload a PDF file.");
+      if (
+        !supportedFileType ||
+        (supportedFileType !== "pdf" && supportedFileType !== "docs")
+      ) {
+        toast.error(
+          "Unsupported file format. Please upload a PDF or Word file.",
+        );
         return;
       }
 

components/shared/icons/files/cad.tsx

@@ -0,0 +1,56 @@
+export default function CadIcon({
+  className,
+  isLight = true,
+}: {
+  className?: string;
+  isLight?: boolean;
+}) {
+  return (
+    <svg
+      width="576"
+      height="576"
+      viewBox="0 0 576 576"
+      fill="none"
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clipPath="url(#a)">
+        <rect
+          x="57"
+          y="59"
+          width="454"
+          height="462"
+          fill={isLight ? "#000" : "#fff"}
+        />
+        <path
+          opacity="0.999"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M77.5 31.5H497.5C521.833 37.8333 537.167 53.1667 543.5 77.5V497.5C537.167 521.833 521.833 537.167 497.5 543.5H77.5C53.1667 537.167 37.8333 521.833 31.5 497.5V77.5C37.8333 53.1667 53.1667 37.8333 77.5 31.5ZM168.092 126.004C178.391 115.754 192.33 110 206.861 110C221.392 110 235.331 115.754 245.631 126.004L245.658 126.031L266.605 146.978L266.674 147.047C266.698 147.071 266.721 147.094 266.744 147.117L303.972 184.345L323.411 164.901C323.855 164.314 324.344 163.75 324.88 163.214C325.414 162.68 325.977 162.191 326.564 161.748L360.251 128.053L360.254 128.051C371.802 116.505 387.464 110.02 403.794 110.022C420.123 110.024 435.784 116.513 447.329 128.061C458.874 139.61 465.359 155.272 465.357 171.601C465.355 187.931 458.866 203.591 447.318 215.137L413.652 248.808C413.206 249.4 412.713 249.969 412.173 250.508C411.635 251.047 411.067 251.539 410.476 251.985L391.045 271.418L428.233 308.607L428.289 308.662L428.34 308.712C428.375 308.748 428.41 308.783 428.445 308.819L449.356 329.73C470.801 351.175 470.801 385.878 449.356 407.323L407.323 449.356C385.878 470.801 351.175 470.801 329.73 449.356L271.427 391.054L231.546 430.942L231.527 430.961C225.924 436.545 219.037 440.669 211.468 442.971L211.456 442.975L141.083 464.315L141.046 464.326C136.882 465.578 132.457 465.679 128.241 464.619C124.025 463.559 120.174 461.377 117.097 458.305C114.02 455.234 111.833 451.386 110.766 447.172C109.699 442.957 109.793 438.532 111.038 434.367L111.058 434.301L132.414 363.944L132.427 363.901C134.748 356.331 138.893 349.448 144.497 343.856L144.51 343.843L184.359 303.985L126.031 245.658L126.004 245.631C115.754 235.331 110 221.392 110 206.861C110 192.33 115.754 178.391 126.004 168.092L126.031 168.064L168.064 126.031L168.092 126.004ZM400.748 216.455L424.691 192.509L424.694 192.507C430.24 186.962 433.356 179.44 433.357 171.597C433.358 163.755 430.244 156.233 424.699 150.686C419.154 145.14 411.632 142.023 403.79 142.022C395.947 142.021 388.425 145.136 382.878 150.681L358.929 174.636L400.748 216.455ZM336.304 197.266L378.123 239.084L208.935 408.297L208.924 408.308C207.033 410.19 204.709 411.58 202.157 412.356L145.991 429.388L163.021 373.281L163.026 373.264C163.812 370.711 165.213 368.389 167.104 366.503L167.122 366.485L336.304 197.266ZM255.361 180.989L281.347 206.975L206.983 281.355L148.686 223.058L148.674 223.046C144.399 218.744 142 212.926 142 206.861C142 200.796 144.4 194.977 148.675 190.675L148.686 190.664L190.664 148.686L190.675 148.675C194.977 144.4 200.796 142 206.861 142C212.926 142 218.744 144.399 223.046 148.674L223.058 148.686L232.733 158.361L211.714 179.38C205.466 185.629 205.466 195.759 211.714 202.008C217.962 208.256 228.093 208.256 234.341 202.008L255.361 180.989ZM294.053 368.425L368.419 294.047L394.398 320.027L373.379 341.045C367.131 347.294 367.131 357.424 373.379 363.673C379.628 369.921 389.758 369.921 396.007 363.673L417.026 342.654L426.729 352.357C435.677 361.305 435.677 375.748 426.729 384.696L384.696 426.729C375.748 435.677 361.305 435.677 352.357 426.729L294.053 368.425Z"
+          fill={isLight ? "#fff" : "#111827"}
+        />
+      </g>
+      <rect
+        x="16"
+        y="16"
+        width="544"
+        height="544"
+        rx="48"
+        stroke={isLight ? "#000" : "#fff"}
+        strokeWidth="32"
+      />
+      <defs>
+        <clipPath id="a">
+          <rect
+            x="32"
+            y="32"
+            width="512"
+            height="512"
+            rx="32"
+            fill={isLight ? "#fff" : "#111827"}
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}

components/shared/icons/files/docs.tsx

@@ -14,12 +14,12 @@ export default function DocsIcon({
       className={className}
       xmlns="http://www.w3.org/2000/svg"
     >
-      <g clip-path="url(#a)">
+      <g clipPath="url(#a)">
         <path fill={isLight ? "#000" : "#fff"} d="M57 59h454v462H57z" />
         <path
           opacity=".999"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M497.5 31.5h-420c-24.333 6.333-39.667 21.667-46 46v420c6.333 24.333 21.667 39.667 46 46h420c24.333-6.333 39.667-21.667 46-46v-420c-6.333-24.333-21.667-39.667-46-46ZM129.465 268.876h-20v40h357.666v-40H129.465ZM109.87 163.648h357.665v40H109.87v-40ZM129.465 373h-20v40h253.542v-40H129.465Z"
           fill={isLight ? "#fff" : "#111827"}
         />
@@ -31,7 +31,7 @@ export default function DocsIcon({
         height="544"
         rx="48"
         stroke={isLight ? "#000" : "#fff"}
-        stroke-width="32"
+        strokeWidth="32"
       />
       <defs>
         <clipPath id="a">

components/shared/icons/files/image.tsx

@@ -0,0 +1,56 @@
+export default function ImageFileIcon({
+  className,
+  isLight = true,
+}: {
+  className?: string;
+  isLight?: boolean;
+}) {
+  return (
+    <svg
+      width="576"
+      height="576"
+      viewBox="0 0 576 576"
+      fill="none"
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clipPath="url(#a)">
+        <rect
+          x="57"
+          y="59"
+          width="454"
+          height="462"
+          fill={isLight ? "#000" : "#fff"}
+        />
+        <path
+          opacity="0.999"
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M497.5 31.5H77.5C53.1667 37.8333 37.8333 53.1667 31.5 77.5V497.5C37.8333 521.833 53.1667 537.167 77.5 543.5H497.5C521.833 537.167 537.167 521.833 543.5 497.5V77.5C537.167 53.1667 521.833 37.8333 497.5 31.5ZM147 165.889C147 155.457 155.457 147 165.889 147H410.111C420.543 147 429 155.457 429 165.889V301.706L402.48 275.186L402.478 275.185C392.935 265.644 379.994 260.285 366.5 260.285C353.006 260.285 340.065 265.644 330.522 275.185L330.52 275.186L176.706 429H165.889C155.457 429 147 420.543 147 410.111V165.889ZM183.412 461C183.359 461 183.307 461 183.255 461H165.889C137.784 461 115 438.216 115 410.111V165.889C115 137.784 137.784 115 165.889 115H410.111C438.216 115 461 137.784 461 165.889V340.318C461 340.328 461 340.339 461 340.349V410.111C461 438.216 438.216 461 410.111 461H183.412ZM429 346.961V410.111C429 420.543 420.543 429 410.111 429H221.961L353.146 297.815L353.147 297.814C356.689 294.274 361.492 292.285 366.5 292.285C371.508 292.285 376.311 294.274 379.853 297.814L379.854 297.815L429 346.961ZM235.667 216.778C225.235 216.778 216.778 225.235 216.778 235.667C216.778 246.099 225.235 254.556 235.667 254.556C246.099 254.556 254.555 246.099 254.555 235.667C254.555 225.235 246.099 216.778 235.667 216.778ZM184.778 235.667C184.778 207.562 207.561 184.778 235.667 184.778C263.772 184.778 286.555 207.562 286.555 235.667C286.555 263.772 263.772 286.556 235.667 286.556C207.561 286.556 184.778 263.772 184.778 235.667Z"
+          fill={isLight ? "#fff" : "#111827"}
+        />
+      </g>
+      <rect
+        x="16"
+        y="16"
+        width="544"
+        height="544"
+        rx="48"
+        stroke={isLight ? "#000" : "#fff"}
+        strokeWidth="32"
+      />
+      <defs>
+        <clipPath id="a">
+          <rect
+            x="32"
+            y="32"
+            width="512"
+            height="512"
+            rx="32"
+            fill={isLight ? "#fff" : "#111827"}
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}

components/shared/icons/files/pdf.tsx

@@ -14,12 +14,12 @@ export default function PdfIcon({
       className={className}
       xmlns="http://www.w3.org/2000/svg"
     >
-      <g clip-path="url(#a)">
+      <g clipPath="url(#a)">
         <path fill={isLight ? "#000" : "#fff"} d="M57 59h454v462H57z" />
         <path
           opacity=".999"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M497.5 31.5h-420c-24.333 6.333-39.667 21.667-46 46v420c6.333 24.333 21.667 39.667 46 46h420c24.333-6.333 39.667-21.667 46-46v-420c-6.333-24.333-21.667-39.667-46-46ZM103 360V215h57.184c10.994 0 20.359 2.1 28.097 6.301 7.738 4.154 13.636 9.936 17.693 17.346 4.105 7.364 6.158 15.86 6.158 25.489 0 9.629-2.076 18.125-6.228 25.488-4.152 7.363-10.168 13.098-18.047 17.205-7.833 4.106-17.316 6.159-28.451 6.159h-25.761V360H103Zm51.452-71.58h-20.807v-48.357h20.665c5.945 0 10.852 1.015 14.721 3.045 3.869 1.982 6.747 4.791 8.634 8.425 1.935 3.587 2.902 7.788 2.902 12.603 0 4.767-.967 8.991-2.902 12.673-1.887 3.635-4.765 6.49-8.634 8.567-3.822 2.03-8.681 3.044-14.579 3.044ZM283.417 360h-51.381V215h51.806c14.579 0 27.13 2.903 37.651 8.708 10.522 5.759 18.613 14.043 24.275 24.852 5.709 10.808 8.564 23.741 8.564 38.798 0 15.105-2.855 28.085-8.564 38.941-5.662 10.856-13.8 19.187-24.416 24.993-10.569 5.805-23.214 8.708-37.935 8.708Zm-20.736-26.267h19.463c9.058 0 16.678-1.605 22.859-4.815 6.228-3.256 10.899-8.283 14.013-15.08 3.161-6.844 4.742-15.671 4.742-26.48 0-10.714-1.581-19.47-4.742-26.267-3.114-6.797-7.761-11.8-13.942-15.009-6.181-3.21-13.801-4.815-22.86-4.815h-19.533v92.466ZM377.032 215v145h30.645v-59.897h58.953v-25.276h-58.953v-34.551H473V215h-95.968Z"
           fill={isLight ? "#fff" : "#111827"}
         />
@@ -31,7 +31,7 @@ export default function PdfIcon({
         height="544"
         rx="48"
         stroke={isLight ? "#000" : "#fff"}
-        stroke-width="32"
+        strokeWidth="32"
       />
       <defs>
         <clipPath id="a">

components/shared/icons/files/slides.tsx

@@ -14,12 +14,12 @@ export default function SlidesIcon({
       className={className}
       xmlns="http://www.w3.org/2000/svg"
     >
-      <g clip-path="url(#a)">
+      <g clipPath="url(#a)">
         <path fill={isLight ? "#000" : "#fff"} d="M57 59h454v462H57z" />
         <path
           opacity=".999"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M497.5 31.5h-420c-24.333 6.333-39.667 21.667-46 46v420c6.333 24.333 21.667 39.667 46 46h420c24.333-6.333 39.667-21.667 46-46v-420c-6.333-24.333-21.667-39.667-46-46ZM133 160c-19.33 0-35 15.67-35 35v186c0 19.33 15.67 35 35 35h309.347c19.329 0 35-15.67 35-35V195c0-19.33-15.671-35-35-35H133Zm-5 59.347h319.347v136.871H128V219.347Z"
           fill={isLight ? "#fff" : "#111827"}
         />
@@ -31,7 +31,7 @@ export default function SlidesIcon({
         height="544"
         rx="48"
         stroke={isLight ? "#000" : "#fff"}
-        stroke-width="32"
+        strokeWidth="32"
       />
       <defs>
         <clipPath id="a">

components/upload-zone.tsx

@@ -21,6 +21,15 @@ interface FileWithPath extends File {
   path?: string;
 }
 
+const fileSizeLimits: { [key: string]: number } = {
+  "application/vnd.ms-excel": 40, // 40 MB
+  "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": 40, // 40 MB
+  "application/vnd.oasis.opendocument.spreadsheet": 40, // 40 MB
+  "image/png": 100, // 100 MB
+  "image/jpeg": 100, // 100 MB
+  "image/jpg": 100, // 100 MB
+};
+
 export default function UploadZone({
   children,
   onUploadStart,
@@ -76,6 +85,8 @@ export default function UploadZone({
 
       const uploadPromises = acceptedFiles.map(async (file, index) => {
         const path = (file as any).path || file.webkitRelativePath || file.name;
+
+        // count the number of pages in the file
         let numPages = 1;
         if (file.type === "application/pdf") {
           const buffer = await file.arrayBuffer();
@@ -96,6 +107,23 @@ export default function UploadZone({
           }
         }
 
+        // check dynamic file size
+        const fileType = file.type;
+        const fileSizeLimit = fileSizeLimits[fileType] * 1024 * 1024;
+        if (file.size > fileSizeLimit) {
+          setUploads((prev) =>
+            prev.filter((upload) => upload.fileName !== file.name),
+          );
+
+          return setRejectedFiles((prev) => [
+            {
+              fileName: file.name,
+              message: `File size too big (max. ${fileSizeLimit} MB)`,
+            },
+            ...prev,
+          ]);
+        }
+
         const { complete } = await resumableUpload({
           file, // File
           onProgress: (bytesUploaded, bytesTotal) => {
@@ -130,12 +158,23 @@ export default function UploadZone({
 
         const uploadResult = await complete;
 
+        let contentType = uploadResult.fileType;
+        let supportedFileType = getSupportedContentType(contentType) ?? "";
+
+        if (
+          uploadResult.fileName.endsWith(".dwg") ||
+          uploadResult.fileName.endsWith(".dxf")
+        ) {
+          supportedFileType = "cad";
+          contentType = `image/vnd.${uploadResult.fileName.split(".").pop()}`;
+        }
+
         const documentData: DocumentData = {
           key: uploadResult.id,
-          supportedFileType: getSupportedContentType(uploadResult.fileType)!,
+          supportedFileType: supportedFileType,
           name: file.name,
           storageType: DocumentStorageType.S3_PATH,
-          contentType: uploadResult.fileType,
+          contentType: contentType,
         };
         const response = await createDocument({
           documentData,
@@ -241,6 +280,9 @@ export default function UploadZone({
               [], // ".xlsx"
             "text/csv": [], // ".csv"
             "application/vnd.oasis.opendocument.spreadsheet": [], // ".ods"
+            "image/png": [], // ".png"
+            "image/jpeg": [], // ".jpeg"
+            "image/jpg": [], // ".jpg"
           }
         : {
             "application/pdf": [], // ".pdf"
@@ -257,6 +299,11 @@ export default function UploadZone({
             "application/msword": [], // ".doc"
             "application/vnd.oasis.opendocument.text": [], // ".odt"
             "application/vnd.oasis.opendocument.presentation": [], // ".odp"
+            "image/vnd.dwg": [".dwg"], // ".dwg"
+            "image/vnd.dxf": [".dxf"], // ".dxf"
+            "image/png": [], // ".png"
+            "image/jpeg": [], // ".jpeg"
+            "image/jpg": [], // ".jpg"
           },
     multiple: true,
     maxSize: maxSize * 1024 * 1024, // 30 MB

components/view/dataroom/dataroom-view.tsx

@@ -23,6 +23,7 @@ import DataroomViewer from "../DataroomViewer";
 import PagesViewerNew from "../PagesViewerNew";
 import EmailVerificationMessage from "../email-verification-form";
 import AdvancedExcelViewer from "../viewer/advanced-excel-viewer";
+import ImageViewer from "../viewer/image-viewer";
 
 const ExcelViewer = dynamic(
   () => import("@/components/view/viewer/excel-viewer"),
@@ -347,6 +348,31 @@ export default function DataroomView({
           setDocumentData={setDocumentData}
         />
       </div>
+    ) : viewData.fileType === "image" ? (
+      <div className="bg-gray-950">
+        <ImageViewer
+          file={viewData.file!}
+          linkId={link.id}
+          viewId={viewData.viewId}
+          isPreview={viewData.isPreview}
+          documentId={documentData.id}
+          documentName={documentData.name}
+          allowDownload={link.allowDownload!}
+          feedbackEnabled={link.enableFeedback!}
+          screenshotProtectionEnabled={link.enableScreenshotProtection!}
+          versionNumber={documentData.documentVersionNumber}
+          brand={brand}
+          dataroomId={dataroom.id}
+          setDocumentData={setDocumentData}
+          watermarkConfig={
+            link.enableWatermark
+              ? (link.watermarkConfig as WatermarkConfig)
+              : null
+          }
+          ipAddress={viewData.ipAddress}
+          linkName={link.name ?? `Link #${link.id.slice(-5)}`}
+        />
+      </div>
     ) : viewData.pages ? (
       <div className="bg-gray-950">
         <PagesViewerNew