Documenso 和 aws-smage-upload 示例之间的 Spload 功能比较

在本文中，我们将比较 Documenso 和 AWS S3 图像上传示例之间将文件上传到 AWS S3 所涉及的步骤。

我们从 Vercel 提供的简单示例开始。

示例/aws-s3-image-upload

Vercel 提供了一个将文件上传到 AWS S3 的良好示例。

此示例的自述文件提供了两个选项，您可以使用现有的 S3 存储桶或创建新存储桶。了解这一点有帮助

您正确配置了上传功能。

又到了我们看源码的时间了。我们正在寻找 type=file 的输入元素。在 app/page.tsx 中，您将找到以下代码：

return (
    <main>
      <h1 id="Upload-a-File-to-S">Upload a File to S3</h1>
      <form onsubmit="{handleSubmit}">
        <input>



<h2>
  
  
  <strong>onChange</strong>
</h2>

<p>onChange updates state using setFile, but it does not do the uploading. upload happens when you submit this form.<br>
</p>

<pre class="brush:php;toolbar:false">onChange={(e) => {
  const files = e.target.files
  if (files) {
    setFile(files[0])
  }
}}

处理提交

handleSubmit 函数中发生了很多事情。我们需要分析这个handleSubmit函数中的操作列表。我已在此代码片段中编写了注释来解释这些步骤。

const handleSubmit = async (e: React.FormEvent<htmlformelement>) => {
    e.preventDefault()

    if (!file) {
      alert('Please select a file to upload.')
      return
    }

    setUploading(true)

    const response = await fetch(
      process.env.NEXT_PUBLIC_BASE_URL + '/api/upload',
      {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ filename: file.name, contentType: file.type }),
      }
    )

    if (response.ok) {
      const { url, fields } = await response.json()

      const formData = new FormData()
      Object.entries(fields).forEach(([key, value]) => {
        formData.append(key, value as string)
      })
      formData.append('file', file)

      const uploadResponse = await fetch(url, {
        method: 'POST',
        body: formData,
      })

      if (uploadResponse.ok) {
        alert('Upload successful!')
      } else {
        console.error('S3 Upload Error:', uploadResponse)
        alert('Upload failed.')
      }
    } else {
      alert('Failed to get pre-signed URL.')
    }

    setUploading(false)
  }
</htmlformelement>

api/上传

api/upload/route.ts 有以下代码：

import { createPresignedPost } from '@aws-sdk/s3-presigned-post'
import { S3Client } from '@aws-sdk/client-s3'
import { v4 as uuidv4 } from 'uuid'

export async function POST(request: Request) {
  const { filename, contentType } = await request.json()

  try {
    const client = new S3Client({ region: process.env.AWS_REGION })
    const { url, fields } = await createPresignedPost(client, {
      Bucket: process.env.AWS_BUCKET_NAME,
      Key: uuidv4(),
      Conditions: [
        ['content-length-range', 0, 10485760], // up to 10 MB
        ['starts-with', '$Content-Type', contentType],
      ],
      Fields: {
        acl: 'public-read',
        'Content-Type': contentType,
      },
      Expires: 600, // Seconds before the presigned post expires. 3600 by default.
    })

    return Response.json({ url, fields })
  } catch (error) {
    return Response.json({ error: error.message })
  }
}

handleSubmit 中的第一个请求是 /api/upload 并发送内容类型和文件名作为负载。解析如下：

const { filename, contentType } = await request.json()

下一步是创建一个 S3 客户端，然后创建一个返回 url 和字段的预签名帖子。您将使用此网址上传您的文件。

有了这些知识，我们来分析一下Documenso中的上传工作原理并进行一些比较。

在 Documenso 中上传 PDF 文件

让我们从 type=file 的输入元素开始。 Documenso 中的代码组织方式不同。您会在名为 document-dropzone.tsx.
的文件中找到输入元素

<input>

<p classname="text-foreground mt-8 font-medium">{_(heading[type])}</p>

这里getInputProps返回的是useDropzone。 Documenso 使用react-dropzone。

import { useDropzone } from 'react-dropzone';

onDrop 调用 props.onDrop，你会在 upload-document.tsx 中找到一个名为 onFileDrop 的属性值。

<documentdropzone classname="h-[min(400px,50vh)]" disabled disabledmessage="{disabledMessage}" ondrop="{onFileDrop}" ondroprejected="{onFileDropRejected}"></documentdropzone>

让我们看看 onFileDrop 函数会发生什么。

const onFileDrop = async (file: File) => {
    try {
      setIsLoading(true);

      const { type, data } = await putPdfFile(file);

      const { id: documentDataId } = await createDocumentData({
        type,
        data,
      });

      const { id } = await createDocument({
        title: file.name,
        documentDataId,
        teamId: team?.id,
      });

      void refreshLimits();

      toast({
        title: _(msg`Document uploaded`),
        description: _(msg`Your document has been uploaded successfully.`),
        duration: 5000,
      });

      analytics.capture('App: Document Uploaded', {
        userId: session?.user.id,
        documentId: id,
        timestamp: new Date().toISOString(),
      });

      router.push(`${formatDocumentsPath(team?.url)}/${id}/edit`);
    } catch (err) {
      const error = AppError.parseError(err);

      console.error(err);

      if (error.code === 'INVALID_DOCUMENT_FILE') {
        toast({
          title: _(msg`Invalid file`),
          description: _(msg`You cannot upload encrypted PDFs`),
          variant: 'destructive',
        });
      } else if (err instanceof TRPCClientError) {
        toast({
          title: _(msg`Error`),
          description: err.message,
          variant: 'destructive',
        });
      } else {
        toast({
          title: _(msg`Error`),
          description: _(msg`An error occurred while uploading your document.`),
          variant: 'destructive',
        });
      }
    } finally {
      setIsLoading(false);
    }
  };

发生了很多事情，但为了我们的分析，我们只考虑名为 putFile 的函数。

putPdf文件

putPdfFile 定义在 upload/put-file.ts

/**
 * Uploads a document file to the appropriate storage location and creates
 * a document data record.
 */
export const putPdfFile = async (file: File) => {
  const isEncryptedDocumentsAllowed = await getFlag('app_allow_encrypted_documents').catch(
    () => false,
  );

  const pdf = await PDFDocument.load(await file.arrayBuffer()).catch((e) => {
    console.error(`PDF upload parse error: ${e.message}`);

    throw new AppError('INVALID_DOCUMENT_FILE');
  });

  if (!isEncryptedDocumentsAllowed && pdf.isEncrypted) {
    throw new AppError('INVALID_DOCUMENT_FILE');
  }

  if (!file.name.endsWith('.pdf')) {
    file.name = `${file.name}.pdf`;
  }

  removeOptionalContentGroups(pdf);

  const bytes = await pdf.save();

  const { type, data } = await putFile(new File([bytes], file.name, { type: 'application/pdf' }));

  return await createDocumentData({ type, data });
};

放置文件

这会调用 putFile 函数。

/**
 * Uploads a file to the appropriate storage location.
 */
export const putFile = async (file: File) => {
  const NEXT_PUBLIC_UPLOAD_TRANSPORT = env('NEXT_PUBLIC_UPLOAD_TRANSPORT');

  return await match(NEXT_PUBLIC_UPLOAD_TRANSPORT)
    .with('s3', async () => putFileInS3(file))
    .otherwise(async () => putFileInDatabase(file));
};

putFileInS3

const putFileInS3 = async (file: File) => {
  const { getPresignPostUrl } = await import('./server-actions');

  const { url, key } = await getPresignPostUrl(file.name, file.type);

  const body = await file.arrayBuffer();

  const reponse = await fetch(url, {
    method: 'PUT',
    headers: {
      'Content-Type': 'application/octet-stream',
    },
    body,
  });

  if (!reponse.ok) {
    throw new Error(
      `Failed to upload file "${file.name}", failed with status code ${reponse.status}`,
    );
  }

  return {
    type: DocumentDataType.S3_PATH,
    data: key,
  };
};

getPresignPostUrl

export const getPresignPostUrl = async (fileName: string, contentType: string) => {
  const client = getS3Client();

  const { getSignedUrl } = await import('@aws-sdk/s3-request-presigner');

  let token: JWT | null = null;

  try {
    const baseUrl = APP_BASE_URL() ?? 'http://localhost:3000';

    token = await getToken({
      req: new NextRequest(baseUrl, {
        headers: headers(),
      }),
    });
  } catch (err) {
    // Non server-component environment
  }

  // Get the basename and extension for the file
  const { name, ext } = path.parse(fileName);

  let key = `${alphaid(12)}/${slugify(name)}${ext}`;

  if (token) {
    key = `${token.id}/${key}`;
  }

  const putObjectCommand = new PutObjectCommand({
    Bucket: process.env.NEXT_PRIVATE_UPLOAD_BUCKET,
    Key: key,
    ContentType: contentType,
  });

  const url = await getSignedUrl(client, putObjectCommand, {
    expiresIn: ONE_HOUR / ONE_SECOND,
  });

  return { key, url };
};

比较

• 您在 Documenso 中看不到任何 POST 请求。它使用名为 getSignedUrl 的函数来获取 url，而
  
  vercel 示例向 api/upload 路由发出 POST 请求。

• 在 Vercel 示例中可以轻松找到输入元素，因为这只是一个示例，但找到了 Documenso
  
  使用react-dropzone并且输入元素根据业务上下文定位。

关于我们：

在 Thinkthroo，我们研究大型开源项目并提供架构指南。我们开发了使用 Tailwind 构建的可重用组件，您可以在您的项目中使用它们。

我们提供 Next.js、React 和 Node 开发服务。

与我们预约会面讨论您的项目。

参考资料：

1. https://github.com/documenso/documenso/blob/main/packages/lib/universal/upload/put-file.ts#L69

2. https://github.com/vercel/examples/blob/main/solutions/aws-s3-image-upload/README.md

3. https://github.com/vercel/examples/tree/main/solutions/aws-s3-image-upload

4. https://github.com/vercel/examples/blob/main/solutions/aws-s3-image-upload/app/page.tsx#L58C5-L76C12

5. https://github.com/vercel/examples/blob/main/solutions/aws-s3-image-upload/app/api/upload/route.ts

6. https://github.com/documenso/documenso/blob/main/packages/ui/primitives/document-dropzone.tsx#L157

7. https://react-dropzone.js.org/

8. https://github.com/documenso/documenso/blob/main/apps/web/src/app/(dashboard)/documents/upload-document.tsx#L61

9. https://github.com/documenso/documenso/blob/main/packages/lib/universal/upload/put-file.ts#L22