pdf from api call

src/app/api/readPDF/route.js

@@ -0,0 +1,40 @@
+//fetch the JSON data from the blob storage based on the folder name and file name
+import { BlobServiceClient } from "@azure/storage-blob";
+
+export async function POST(request) {
+  const dataJson = await request.json();
+  const { folderName, fileName } = dataJson;
+
+  const connectionString = process.env.AZURE_STORAGE_CONNECTION_STRING;
+  // jsondata is container name which storage the data by folder
+  const containerName = "pdf";
+
+  try {
+    // Create a BlobServiceClient
+    const blobServiceClient =
+      BlobServiceClient.fromConnectionString(connectionString);
+    // Get a container client from the BlobServiceClient
+    const containerClient = blobServiceClient.getContainerClient(containerName);
+
+    const blockBlobClient = containerClient.getBlockBlobClient(
+      `${folderName}/${fileName}`
+    );
+    const blobExists = await blockBlobClient.exists();
+
+    if (blobExists) {
+
+      //   // Blob exists, fetch its content
+      // Download the PDF blob content
+      const response = await blockBlobClient.downloadToBuffer();
+      //   console.log("response", response);
+
+      // Parse the PDF content
+      return new Response(response, { status: 200 });
+    } else {
+      return new Response("Blob does not exist", { status: 203 });
+    }
+  } catch (error) {
+    console.error("Caught an outside error:", error);
+    return new Response(error.message, { status: 500 });
+  }
+}

src/app/files/Iframe.js

@@ -1,37 +1,81 @@
 "use client";
-import { useState } from "react";
 import styles from "./Iframe.module.css";
+import { useState, useEffect, useRef } from "react";
+
 const Iframe = ({ fileName, formSetting, folderName, pageHeight }) => {
   const [showPdf, setShowPdf] = useState(true);
+  const [isLoading, setIsLoading] = useState(false);
+  const [pdfUrl, setPdfUrl] = useState();
+  const [isPdf, setIsPdf] = useState(true);
+  // const showPDF = formSetting.showPDF;
+
+  // const pdfUrl = formSetting.PDFurl[folderName];
+
+  // const url = `${pdfUrl}${fileName.replace(".json", ".pdf")}`;
+
+  let pdfName = fileName.replace(".json", ".pdf");
+  const submitData = {
+    fileName: pdfName,
+    folderName: folderName,
+  };
 
-  const showPDF = formSetting.showPDF;
+  //fetch pdf data from blob
+  const asyncFetch = async () => {
+    setIsLoading(true);
+    const Response = await fetch("/api/readPDF", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(submitData),
+    });
+    if (!Response.ok) {
+      setIsPdf(false);
+      throw new Error(Response.statusText);
+    } else if (Response.status === 203) {
+      console.log("No data");
+      setIsPdf(false);
+    } else {
+      // Convert the response to a blob
 
-  const pdfUrl = formSetting.PDFurl[folderName];
+      // const pdfBuffer = await Response.arrayBuffer();
+      const pdf = await Response.blob();
+      const blob = new Blob([pdf], { type: "application/pdf" });
+      const url = URL.createObjectURL(blob);
+      setPdfUrl(url);
+      setIsLoading(false);
+    }
+  };
 
-  const url = `${pdfUrl}${fileName.replace(".json", ".pdf")}`;
+  useEffect(() => {
+    asyncFetch();
+  }, []);
 
   return (
     <>
-      {showPDF && (
-        <>
-          <button
-            className={styles.showButton}
-            onClick={() => setShowPdf(!showPdf)}
-          >
-            {showPdf ? "Hide PDF" : "Show PDF"}
-          </button>
-          {showPdf && (
+      <button
+        className={styles.showButton}
+        onClick={() => setShowPdf(!showPdf)}
+      >
+        {showPdf ? "Hide PDF" : "Show PDF"}
+      </button>
+      {showPdf &&
+        (isPdf ? (
+          !isLoading ? (
             <iframe
               className={styles.iframe}
-              src={url}
+              src={pdfUrl}
               style={{ height: pageHeight }}
             >
               This browser does not support PDFs. Please download the PDF to
               view it.
             </iframe>
-          )}
-        </>
-      )}
+          ) : (
+            <div>Loading...</div>
+          )
+        ) : (
+          <div className={styles.noData}>No PDF file found</div>
+        ))}
     </>
   );
 };

src/app/files/Iframe.module.css

@@ -5,6 +5,15 @@
   margin-left: 5px;
 }
 
+.noData {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 50%;
+  color: #e90303;
+}
+
 .showButton {
   opacity: 0.6;
   position: fixed;