サムネイル画像をPDFの１ページ目から自動生成する

if (uploadedFile.file.type === 'application/pdf') {
  setIsProcessingThumbnail(true);
  setThumbnailFileQueue((prev) => [
    ...prev,
    {
      file: uploadedFile,
      canvas: canvas,
    },
  ]);
}

return (
<li>
	<canvas ref={canvas} css={css`
	  position: absolute;
    opacity: 0;
    z-index: -1;
	`}></canvas>
	...
</li>)

useEffect(() => {
  if (thumbnailFileQueue.length > 0) {
    const copyQueue = [...thumbnailFileQueue];
    setThumbnailFileQueue([]);
    const convertFirstPagePDFToImage = async () => {
      for (const item of copyQueue) {
        const newImageFile = await convertPDFToImage(
          item.file.file,
          item.canvas,
        );

				if(newImageFile) {
				    // upload to S3
						// get resourceUri and save into Database
						...
				}
				else {
						...
				}
			}
    };

    convertFirstPagePDFToImage();
  }
  // eslint-disable-next-line react-hooks/exhaustive-deps
}, [thumbnailFileQueue]);

const convertPDFToImage = async (
  file: File,
  canvas: RefObject<HTMLCanvasElement>,
) => {
	pdfjs.getDocument({
	  url: URL.createObjectURL(file),
	  cMapUrl: `/common/js/pdfjs-dist/cmaps/`,
	  cMapPacked: true,
	})
	.promise.then(async (doc) => {
	  return await doc.getPage(1).then(async (page) => {
      const DEFAULT_SCALE = 1;
	    const MAX_CANVAS_WIDTH = 1280;
			const scaleReguired = 
					MAX_CANVAS_WIDTH / page.getViewport({ scale: DEFAULT_SCALE }).width
			const viewPort = page.getViewport({
	      scale: scaleReguired,

			canvas.current &&
      ((canvas.current?.width = viewPort.width),
      (canvas.current?.height = viewPort.height));

			const context = 
					canvas.current?.getContext('2d',}) as CanvasRenderingContext2D;
	    const renderContext = {
	      canvasContext: context,
	      viewport: viewPort,
	    };

			const thumbnailFile = await page
	      .render(renderContext)
	      .promise.then(async () => {
	        const url = canvas.current ? canvas.current.toDataURL('image/png') : '';
	
	        if (url === '') return;
	
	        const res = await fetch(url);
				  const buf = await res.arrayBuffer();
	
				  return new File([buf], 'filename', { type: 'png' });
	      });
			canvas.currrent.remove();
	    return thumbnailFile;
		  });
	}).catch(err){
			...
	}
}

css`
  position: absolute;
  opacity: 0;
  z-index: -1;
`,

.then((res) => {
	...
})
.catch((err) => {
  if (err.name === 'PasswordException') 
	  console.log('パスワード付きPDFはサムネイルを作成することができません')
}