MSG File Analyzer را با استفاده از NextJS بسازید

npx create-next-app@latest

✔ What is your project named? … 
✔ Would you like to use TypeScript? … No / **Yes**
✔ Would you like to use ESLint? … No / **Yes**
✔ Would you like to use Tailwind CSS? … No / **Yes**
✔ Would you like to use `src/` directory? … **No** / Yes
✔ Would you like to use App Router? (recommended) … No / **Yes**
✔ Would you like to customize the default import alias (@/*)? … No / **Yes**

import { reader } from "@/app/utils/reader";

export async function POST(request: Request) {
  const formData = await request.formData();

  const file: any = formData.get("file");
  const buffer = Buffer.from(await file.arrayBuffer());

  const readerRes = await reader(buffer);
  return Response.json({ reader: readerRes });
}

import MsgReader from "@kenjiuno/msgreader";

export async function reader(buffer: Buffer) {
  const testMsg = new MsgReader(buffer);
  const testMsgInfo = testMsg.getFileData();
  return testMsgInfo;
}

"use client";

import { useState } from "react";
import FileInput from "./components/FileInput";
import EmailHeaders from "./components/Headers";
import AttachmentsHeaders from "./components/Attachments";
import { FieldsData } from "@kenjiuno/msgreader";

const Home: React.FC = () => {
  const [details, setDetails] = useState<FieldsData | null>(null);

  return (
    <>
      <FileInput onDataExtracted={(details: FieldsData) => setDetails(details)} />
      {/* Results */}
      <EmailHeaders headerDetails={details?.headers} />
      <AttachmentsHeaders attachmentsDetails={details?.attachments} />
    </>
  );
};

export default Home;

"use client";

import { FieldsData } from "@kenjiuno/msgreader";
import axios from "axios";
import { ChangeEvent, useState } from "react";

interface FileInputProps {
  onDataExtracted: (details: FieldsData) => void
}

const FileInput: React.FC<FileInputProps> = ({ onDataExtracted }) => {
  const [alertMessage, setAlertMessage] = useState<string>("");

  const submitMsgFile = async (event: ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (file) {
      try {
        const formData = new FormData();
        formData.append("file", file);
        const res = await axios.post("/api/reader", formData);
        onDataExtracted(res?.data?.reader);
        console.log(res.data.reader);
        setAlertMessage("Success! Check results below.");
      } catch (error) {
        console.log(error);
      }
    } else {
    }
  };
  return (
    <div className="hero min-h-screen bg-base-200">
      <div className="hero-content text-center">
        <div className="max-w-lg">
          <h1 className="text-5xl font-bold mb-5">MSG Analyzer</h1>
          <p className="mb-5">Drop your .MSG file below to get results</p>

          <div className="flex items-center justify-center w-full">
            <label className="flex flex-col items-center justify-center w-full h-64 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600">
              <div className="flex flex-col items-center justify-center pt-5 pb-6">
                <svg
                  className="w-8 h-8 mb-4 text-gray-500 dark:text-gray-400"
                  aria-hidden="true"
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 20 16"
                >
                  <path
                    stroke="currentColor"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth="2"
                    d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"
                  />
                </svg>
                <p className="mb-2 text-sm text-gray-500 dark:text-gray-400">
                  <span className="font-semibold">Click to upload</span> or drag
                  and drop
                </p>
                <p className="text-xs text-gray-500 dark:text-gray-400">
                  SVG, PNG, JPG or GIF (MAX. 800x400px)
                </p>
              </div>
              <input
                id="dropzone-file"
                type="file"
                className="hidden"
                onChange={submitMsgFile}
              />
            </label>
          </div>

          {alertMessage && (
            <div role="alert" className="alert">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                className="stroke-current shrink-0 h-6 w-6"
                fill="none"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth="2"
                  d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
                />
              </svg>
              <span>{alertMessage}</span>
              <div>
                <a href="#results" className="btn btn-sm btn-primary">
                  Get Results
                </a>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default FileInput;

"use client";

interface EmailHeadersProps {
  headerDetails: string | undefined;
}

const EmailHeaders: React.FC<EmailHeadersProps> = ({ headerDetails }) => {
  return (
    <div className="px-16 my-8" id="results">
      {headerDetails && (
        <>
          <h3 className="text-2xl font-bold mb-2">Email Headers</h3>
          <div className="mockup-code">
            <pre data-prefix="~" className="text-xs text-sky-500">
              <code
                style={{
                  display: "block",
                  marginLeft: "50px",
                  whiteSpace: "pre-wrap",
                  wordWrap: "break-word",
                  overflowWrap: "break-word",
                  wordBreak: "break-all",
                }}
              >
                {headerDetails}
              </code>
            </pre>
          </div>
        </>
      )}
    </div>
  );
};

export default EmailHeaders;

"use client";

interface AttachmentsInterface {
  attachmentsDetails: Array<any> | undefined;
}

const AttachmentsHeaders: React.FC<AttachmentsInterface> = ({
  attachmentsDetails,
}) => {
  return (
    <div className="px-16 my-8">
      {attachmentsDetails && attachmentsDetails.length > 0 &&(
        <>
          <h3 className="text-2xl font-bold">Attachments</h3>
          <dl className="max-w-md text-gray-900 divide-y divide-gray-200 dark:text-white dark:divide-gray-700">
            {attachmentsDetails.map((item) => (
              <>
                <div className="flex flex-col pb-3">
                  <dt className="mb-1 text-gray-500 md:text-lg dark:text-gray-400">
                    {item.attachMimeTag}
                  </dt>
                  <dd className="text-lg font-semibold">{item.fileName}</dd>
                </div>
              </>
            ))}
          </dl>
        </>
      )}
    </div>
  );
};

export default AttachmentsHeaders;