{"id":28169,"date":"2023-06-08T07:00:00","date_gmt":"2023-06-08T14:00:00","guid":{"rendered":"http:\/\/convert-images-to-pdf-files-with-react-to-pdf"},"modified":"2025-10-21T08:43:02","modified_gmt":"2025-10-21T15:43:02","slug":"convert-images-to-pdf-files-with-react-to-pdf","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/convert-images-to-pdf-files-with-react-to-pdf","title":{"rendered":"Convert Images to PDF Files With React-to-PDF"},"content":{"rendered":"

From conveying deep messages to preserving memories and everything in between, images have become integral to the human experience. In this article, we\u2019ll look at how to save uploaded images into a PDF file with the image to PDF React converter, making it easier to share multiple images without spamming the recipient while taking up less memory. This feature can be used in an application that generates photo albums or brochures for users on the fly.<\/p>\n

For UI components in our application, we\u2019ll use Ant Design (antd), while react-to-pdf will be used to create a PDF document containing the images rendered by our React component.<\/p>\n

Dig in and play around with the demo in CodeSandbox below. Use the \u201cOpen Sandbox\u201d link in the tool to open the demo in a new tab.<\/p>\n<\/div>\n\n\n

\n <\/iframe>\n <\/div>\n\n\n

React to PDF Converter for Images Project Setup<\/h2>\n

Create a React<\/a> app using the following command:<\/p>\n

npx create-react-app react-pdf_demo\n<\/code><\/span><\/pre>\n
Next, add the project dependencies using the following command:<\/p>\n
npm<\/span> install<\/span> antd<\/span> @ant-design<\/span>\/icons react-to-pdf\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
Next, we need to import the antd CSS. To do this, open your src\/App.css<\/code> file and edit its content to match the following:<\/p>\n
@import<\/span> \"~antd\/dist\/antd.css\"<\/span>;\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
Add Hook<\/h2>\n
We\u2019ll create a hook that will contain the code to provide the necessary functionality associated with file selection. This makes for better abstraction of code as well as leaner components.<\/p>\n
In the src<\/code> folder, create a new folder named hooks<\/code>. In the src\/hooks<\/code> folder, create a new file called useFileSelection.js<\/code> and add the following to it.<\/p>\n
import<\/span> { useCallback, useEffect, useState } from<\/span> \"react\"<\/span>;\n\nconst<\/span> useFileSelection = ()<\/span> =><\/span> {\n  const<\/span> [selectedFiles, setSelectedFiles] = useState([]);\n  const<\/span> [base64Strings, setBase64Strings] = useState([]);\n  const<\/span> [isLoading, setIsLoading] = useState(false<\/span>);\n  const<\/span> addFile = (file<\/span>) =><\/span> {\n    setSelectedFiles((currentSelection<\/span>) =><\/span> [...currentSelection, file]);\n  };\n\n  const<\/span> removeFile = (file<\/span>) =><\/span> {\n    setSelectedFiles((currentSelection<\/span>) =><\/span> {\n      const<\/span> fileIndex = currentSelection.indexOf(file);\n      const<\/span> newSelection = currentSelection.slice();\n      newSelection.splice(fileIndex, 1<\/span>);\n      return<\/span> newSelection;\n    });\n  };\n\n  const<\/span> getBase64Representation = (file<\/span>) =><\/span>\n    new<\/span> Promise<\/span>((resolve, reject<\/span>) =><\/span> {\n      const<\/span> reader = new<\/span> FileReader();\n      reader.readAsDataURL(file);\n      reader.onload = ()<\/span> =><\/span> resolve(reader.result);\n      reader.onerror = (error<\/span>) =><\/span> reject(error);\n    });\n\n  const<\/span> getBase64Strings = useCallback(async<\/span> () => {\n    setIsLoading(true<\/span>);\n    const<\/span> base64Strings = await<\/span> Promise<\/span>.all(\n      selectedFiles.map((file<\/span>) =><\/span> getBase64Representation(file))\n    );\n    setBase64Strings(base64Strings);\n    setIsLoading(false<\/span>);\n  }, [selectedFiles]);\n\n  useEffect(()<\/span> =><\/span> {\n    getBase64Strings().catch(console<\/span>.error);\n  }, [getBase64Strings]);\n  return<\/span> [addFile, removeFile, base64Strings, isLoading];\n};\n\nexport<\/span> default<\/span> useFileSelection;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
The getBase64Representation<\/code> function takes a file and generates the base64 encoding of the provided file. This process is asynchronous, and as a result, the function returns a promise. This function is used in the getBase64Strings<\/code> to update the base64 strings whenever the selectedFiles<\/code> state variable changes. Finally, with the useEffect<\/code> hook, we call the getBase64Strings<\/code> whenever the list of selected files changes.<\/p>\n
The last thing we do is export an array containing the addFile<\/code>, removeFile<\/code> functions, and the base64Strings<\/code> and isLoading<\/code> variables.<\/p>\n
Add UploadButton<\/code> Component<\/h2>\n
Next, we need a component to handle the selection of images. In the src<\/code> directory, create a new folder named components<\/code>. In the src\/components<\/code> directory, create a new file named UploadButton.js<\/code> and add the following to it:<\/p>\n
import<\/span> { UploadOutlined } from<\/span> \"@ant-design\/icons\"<\/span>;\nimport<\/span> { Button, Upload } from<\/span> \"antd\"<\/span>;\n\nconst<\/span> UploadButton = ({ addFile, removeFile, loading }<\/span>) =><\/span> {\n  const<\/span> beforeUpload = (file<\/span>) =><\/span> {\n    addFile(file);\n    return<\/span> false<\/span>;\n  };\n  const<\/span> props = {\n    onRemove<\/span>: removeFile,\n    multiple<\/span>: true<\/span>,\n    showUploadList<\/span>: false<\/span>,\n    beforeUpload,\n    accept<\/span>: \"image\/*\"<\/span>,\n  };\n  return<\/span> (\n    <Upload<\/span> {...props<\/span>}><\/span>\n      <Button<\/span> loading<\/span>={loading}<\/span> icon<\/span>={<\/span><UploadOutlined<\/span> \/><\/span>} type=\"primary\" ghost>\n        Click to Upload\n      <\/Button<\/span>><\/span>\n    <\/Upload<\/span>><\/span><\/span>\n  );\n};\n\nexport<\/span> default<\/span> UploadButton;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Putting Everything Together<\/h2>\n
The last thing we need to do is update our src\/App.js<\/code> file to render our upload button and display a grid of images (which are targeted and used in the pdf generation). To do this, open your src\/App.js<\/code> file and update it to match the following:<\/p>\n
import<\/span> \".\/App.css\"<\/span>;\nimport<\/span> { useRef } from<\/span> \"react\"<\/span>;\nimport<\/span> useFileSelection from<\/span> \".\/hooks\/useFileSelection\"<\/span>;\nimport<\/span> UploadButton from<\/span> \".\/components\/UploadButton\"<\/span>;\nimport<\/span> { Button, Row, Col } from<\/span> \"antd\"<\/span>;\nimport<\/span> Pdf from<\/span> \"react-to-pdf\"<\/span>;\n\nconst<\/span> App = ()<\/span> =><\/span> {\n  const<\/span> [addFile, removeFile, base64Strings, isLoading] = useFileSelection();\n  const<\/span> ref = useRef();\n\n  return<\/span> (\n    <div<\/span> style<\/span>={{<\/span> margin:<\/span> \"2<\/span>%\" }}><\/span>\n      <Row<\/span> justify<\/span>=\"center\"<\/span> style<\/span>={{<\/span> marginBottom:<\/span> \"10px<\/span>\" }}><\/span>\n        <Col<\/span> span<\/span>={6}<\/span>><\/span>\n          <UploadButton<\/span>\n            addFile<\/span>={addFile}<\/span>\n            removeFile<\/span>={removeFile}<\/span>\n            loading<\/span>={isLoading}<\/span>\n          \/><\/span>\n        <\/Col<\/span>><\/span>\n        <Col<\/span> span<\/span>={6}<\/span>><\/span>\n          {base64Strings.length >= 1 && (\n            <Pdf<\/span>\n              targetRef<\/span>={ref}<\/span>\n              filename<\/span>=\"images.pdf\"<\/span>\n              options<\/span>={{<\/span> orientation:<\/span> \"landscape<\/span>\" }}\n              scale<\/span>={0.9}<\/span>\n            ><\/span>\n              {({ toPdf }) => (\n                <Button<\/span> danger<\/span> onClick<\/span>={toPdf}<\/span>><\/span>\n                  Generate Pdf\n                <\/Button<\/span>><\/span>\n              )}\n            <\/Pdf<\/span>><\/span>\n          )}\n        <\/Col<\/span>><\/span>\n      <\/Row<\/span>><\/span>\n      <div<\/span> ref<\/span>={ref}<\/span>><\/span>\n        <Row<\/span> gutter<\/span>={[0,<\/span> 16<\/span>]} justify<\/span>=\"center\"<\/span>><\/span>\n          {base64Strings.map((base64String, index) => (\n            <Col<\/span> span<\/span>={5}<\/span>><\/span>\n              <img<\/span>\n                src<\/span>={base64String}<\/span>\n                key<\/span>={index}<\/span>\n                style<\/span>={{<\/span> height:<\/span> \"200px<\/span>\", width:<\/span> \"250px<\/span>\" }}\n              \/><\/span>\n            <\/Col<\/span>><\/span>\n          ))}\n        <\/Row<\/span>><\/span>\n      <\/div<\/span>><\/span>\n    <\/div<\/span>><\/span><\/span>\n  );\n};\n\nexport<\/span> default<\/span> App;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
First, we retrieve the functions and variables to help with the file selection process from our previously declared useFileSelection<\/code> hook. Next, we create a mutable ref object using the useRef<\/code> hook.\nThe rendered component consists of two rows. The first row holds the button to upload images and another to generate the pdf file from the uploaded images – the latter which is wrapped in a PDF component. The PDF component has four props, namely:<\/p>\n
    \n
  1. \ntargetRef<\/code> – This is the ref for the target component (in our case, the div element wrapping the second row).<\/li>\n
  2. \nfilename<\/code> – This is the name that should be given to the generated pdf document.<\/li>\n
  3. \noptions<\/code> – You can view the complete list of available options here<\/a>. For our use case, we change the page orientation to landscape. This provides more real estate for our images and allows us to fit more into the page.<\/li>\n
  4. \nscale<\/code> – We used this to scale down the image to 0.9 of the original size.<\/li>\n<\/ol>\n
    With everything in place, run your application using the following command:<\/p>\n
        npm start\n<\/code><\/span><\/pre>\n
    By default, the application should be available at http:\/\/localhost:3000\/<\/a>. The final result will look like the gif shown below.<\/p>\n
    \"GIF<\/p>\n
    Find the complete project here<\/a> on GitHub.<\/p>\n
    Keeping it Simple<\/h2>\n
    While the above method is great for more advanced applications, especially ones requiring multiple image uploads, we\u2019ll also explore a simpler approach that allows users to upload a single image and then generate a PDF file from that image. This method involves direct saving to the local file system, and the use of a basic HTML input for image upload. It also provides a simple button to generate the PDF. This can be beneficial for applications that don\u2019t require complex setups or multiple image uploads.<\/p>\n
    Here\u2019s an example of how to convert a single image to PDF using React:<\/p>\n
    import React, { useState } from "react";\nimport PDF from "react-to-pdf";\n\nconst App = () => {\n  const [imageData, setImageData] = useState(null);\n\n  const handleImageChange = (e) => {\n    const file = e.target.files[0];\n    const reader = new FileReader();\n    reader.onload = (e) => {\n      setImageData(e.target.result);\n    };\n    reader.readAsDataURL(file);\n  };\n\n  const handleGeneratePDF = () => {\n    const pdf = new PDF();\n    pdf.addPage(imageData);\n    pdf.save("image.pdf");\n  };\n\n  return (\n    <div>\n      <input type="file" onChange={handleImageChange} \/>\n      <button onClick={handleGeneratePDF}>Generate PDF<\/button>\n    <\/div>\n  );\n};\n\nexport default App;\n<\/code><\/pre>\n
    This more streamlined method offers a way to quickly integrate image-to-PDF functionality without relying heavily on external UI components. Do remember to always use code with caution and adapt wherever you see fit.<\/p>\n
    Conclusion<\/h2>\n
    In this article, we looked at the image to PDF React converter that allows you to convert images into a PDF document on the fly using the react-to-pdf library (within the react to pdf converter tool). We rendered a grid of images for our demonstration, which we eventually converted to a PDF document. This is just one area of application as we could also use this functionality to render, edit and save brochures or posters, or any other graphic content for printing or further dissemination.<\/p>\n
    If you\u2019re a developer, we recommend you take a look at how Cloudinary makes working with images simple with powerful AI tools<\/a> (and we provide a free for life<\/a> account, too!).<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":87,"featured_media":29517,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,370,246],"class_list":["post-28169","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-image","tag-react"],"acf":[],"yoast_head":"\nHow to Use the React to PDF Converter for Images<\/title>\n<meta name=\"description\" content=\"Learn how to easily save uploaded images into a PDF file using the React to PDF converter for free.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/convert-images-to-pdf-files-with-react-to-pdf\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Convert Images to PDF Files With React-to-PDF\" \/>\n<meta property=\"og:description\" content=\"Learn how to easily save uploaded images into a PDF file using the React to PDF converter for free.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/convert-images-to-pdf-files-with-react-to-pdf\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2023-06-08T14:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-21T15:43:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1684790771\/Blog-convert-jpg-to-pdf-nextjs\/Blog-convert-jpg-to-pdf-nextjs.jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1100\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"melindapham\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/convert-images-to-pdf-files-with-react-to-pdf#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/convert-images-to-pdf-files-with-react-to-pdf\"},\"author\":{\"name\":\"melindapham\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\"},\"headline\":\"Convert Images to PDF Files With React-to-PDF\",\"datePublished\":\"2023-06-08T14:00:00+00:00\",\"dateModified\":\"2025-10-21T15:43:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/convert-images-to-pdf-files-with-react-to-pdf\"},\"wordCount\":7,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/convert-images-to-pdf-files-with-react-to-pdf#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1684790771\/Blog-convert-jpg-to-pdf-nextjs\/Blog-convert-jpg-to-pdf-nextjs.jpg?_i=AA\",\"keywords\":[\"Guest Post\",\"Image\",\"React\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2023\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/convert-images-to-pdf-files-with-react-to-pdf\",\"url\":\"https:\/\/cloudinary.com\/blog\/convert-images-to-pdf-files-with-react-to-pdf\",\"name\":\"How to Use the React to PDF Converter for Images\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/convert-images-to-pdf-files-with-react-to-pdf#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/convert-images-to-pdf-files-with-react-to-pdf#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1684790771\/Blog-convert-jpg-to-pdf-nextjs\/Blog-convert-jpg-to-pdf-nextjs.jpg?_i=AA\",\"datePublished\":\"2023-06-08T14:00:00+00:00\",\"dateModified\":\"2025-10-21T15:43:02+00:00\",\"description\":\"Learn how to easily save uploaded images into a PDF file using the React to PDF converter for free.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/convert-images-to-pdf-files-with-react-to-pdf#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/convert-images-to-pdf-files-with-react-to-pdf\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/convert-images-to-pdf-files-with-react-to-pdf#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1684790771\/Blog-convert-jpg-to-pdf-nextjs\/Blog-convert-jpg-to-pdf-nextjs.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1684790771\/Blog-convert-jpg-to-pdf-nextjs\/Blog-convert-jpg-to-pdf-nextjs.jpg?_i=AA\",\"width\":2000,\"height\":1100,\"caption\":\"Image showing graphic representation of the react to pdf converter including a screenshot of images of puppies and the code that converted the images to PDF\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/convert-images-to-pdf-files-with-react-to-pdf#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Convert Images to PDF Files With React-to-PDF\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\",\"name\":\"melindapham\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"caption\":\"melindapham\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Use the React to PDF Converter for Images","description":"Learn how to easily save uploaded images into a PDF file using the React to PDF converter for free.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/convert-images-to-pdf-files-with-react-to-pdf","og_locale":"en_US","og_type":"article","og_title":"Convert Images to PDF Files With React-to-PDF","og_description":"Learn how to easily save uploaded images into a PDF file using the React to PDF converter for free.","og_url":"https:\/\/cloudinary.com\/blog\/convert-images-to-pdf-files-with-react-to-pdf","og_site_name":"Cloudinary Blog","article_published_time":"2023-06-08T14:00:00+00:00","article_modified_time":"2025-10-21T15:43:02+00:00","og_image":[{"width":2000,"height":1100,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1684790771\/Blog-convert-jpg-to-pdf-nextjs\/Blog-convert-jpg-to-pdf-nextjs.jpg?_i=AA","type":"image\/jpeg"}],"author":"melindapham","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/convert-images-to-pdf-files-with-react-to-pdf#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/convert-images-to-pdf-files-with-react-to-pdf"},"author":{"name":"melindapham","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9"},"headline":"Convert Images to PDF Files With React-to-PDF","datePublished":"2023-06-08T14:00:00+00:00","dateModified":"2025-10-21T15:43:02+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/convert-images-to-pdf-files-with-react-to-pdf"},"wordCount":7,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/convert-images-to-pdf-files-with-react-to-pdf#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1684790771\/Blog-convert-jpg-to-pdf-nextjs\/Blog-convert-jpg-to-pdf-nextjs.jpg?_i=AA","keywords":["Guest Post","Image","React"],"inLanguage":"en-US","copyrightYear":"2023","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/convert-images-to-pdf-files-with-react-to-pdf","url":"https:\/\/cloudinary.com\/blog\/convert-images-to-pdf-files-with-react-to-pdf","name":"How to Use the React to PDF Converter for Images","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/convert-images-to-pdf-files-with-react-to-pdf#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/convert-images-to-pdf-files-with-react-to-pdf#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1684790771\/Blog-convert-jpg-to-pdf-nextjs\/Blog-convert-jpg-to-pdf-nextjs.jpg?_i=AA","datePublished":"2023-06-08T14:00:00+00:00","dateModified":"2025-10-21T15:43:02+00:00","description":"Learn how to easily save uploaded images into a PDF file using the React to PDF converter for free.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/convert-images-to-pdf-files-with-react-to-pdf#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/convert-images-to-pdf-files-with-react-to-pdf"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/convert-images-to-pdf-files-with-react-to-pdf#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1684790771\/Blog-convert-jpg-to-pdf-nextjs\/Blog-convert-jpg-to-pdf-nextjs.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1684790771\/Blog-convert-jpg-to-pdf-nextjs\/Blog-convert-jpg-to-pdf-nextjs.jpg?_i=AA","width":2000,"height":1100,"caption":"Image showing graphic representation of the react to pdf converter including a screenshot of images of puppies and the code that converted the images to PDF"},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/convert-images-to-pdf-files-with-react-to-pdf#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Convert Images to PDF Files With React-to-PDF"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9","name":"melindapham","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","caption":"melindapham"}}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1684790771\/Blog-convert-jpg-to-pdf-nextjs\/Blog-convert-jpg-to-pdf-nextjs.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28169","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/87"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=28169"}],"version-history":[{"count":8,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28169\/revisions"}],"predecessor-version":[{"id":38946,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28169\/revisions\/38946"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/29517"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28169"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28169"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28169"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
This component renders an antd Upload<\/a> component that provides the addFile<\/code>, removeFile<\/code> functions, and isLoading<\/code> boolean received as props. Additionally, we declared a beforeUpload<\/code> function which overrides antd\u2019s<\/a> default behavior of trying to upload the image to a server.\nIn our case, we want the new file to be added to our state variable and nothing else; hence the beforeUpload<\/code> function returns false<\/code>.<\/p>\n
This hook contains three state variables. selectedFiles<\/code> keeps track of the files the user has selected, base64Strings<\/code> holds the base64<\/a> encoded string for each selected file, and the isLoading<\/code> state variable is used to indicate whether or not the encoding process is ongoing. Next, we declare two functions, addFile<\/code> and removeFile<\/code>, which are used to update the file selection.<\/p>\n