# How to upload a PDF file to a web page, get the PDF fields values and render them into the same web page fields using JavaScript

**URL:** <https://pdfjs.community/t/how-to-upload-a-pdf-file-to-a-web-page-get-the-pdf-fields-values-and-render-them-into-the-same-web-page-fields-using-javascript/1484>\
**Category:** Technical Support\
**Created:** [March 18, 2022, 2:22pm UTC](https://pdfjs.community/t/how-to-upload-a-pdf-file-to-a-web-page-get-the-pdf-fields-values-and-render-them-into-the-same-web-page-fields-using-javascript/1484 "2022-03-18T14:22:50Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![samehkm](https://avatars.discourse-cdn.com/v4/letter/s/48db29/32.png) [@samehkm](https://pdfjs.community/u/samehkm)\
**Post date:** [March 18, 2022, 2:22pm UTC](https://pdfjs.community/t/how-to-upload-a-pdf-file-to-a-web-page-get-the-pdf-fields-values-and-render-them-into-the-same-web-page-fields-using-javascript/1484/1 "2022-03-18T14:22:50Z")

</div>

**Which product are you using?**

Visual Studio Code  
**PDF.js Express Version**

**Detailed description of issue**  
{I am trying to develop a web page where I want to upload a PDF file to this web page, get the values of the PDF fields then insert them into the web page fields using JavaScript. May I ask for a sample code on how to do this

I tried the following code but did not work}

**Expected behaviour**  
{Provide a screenshot or description of the expected behaviour}

**Does your issue happen with every document, or just one?**  
{Answer here}

**Link to document**  
{Provide a link to the document in question if possible}

**Code snippet**  
{

```
<head>

    <script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@2.13.216/build/pdf.min.js"></script>

</head>

<body>

    <input type="file" id="file-id" name="file_name" onchange="ExtractText();">

    <!-- a container for the output -->

    <div id="output"></div>

    <script>

        function ExtractText() {

            var input = document.getElementById("file-id");    

            //alert(input.files[0].name);

            pdfjsLib.getDocument('./SamplePDF.pdf').then(doc=>{

                console.log("This PDF has "+doc._pdfInfo.numPages+" pages");

            });

        }

    </script>

</body>

```

}

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/1X/ffbcd25c7d423db8d5acd5db201c272f4db306dd.png) [@system](https://pdfjs.community/u/system)\
**Post date:** [March 18, 2022, 2:22pm UTC](https://pdfjs.community/t/how-to-upload-a-pdf-file-to-a-web-page-get-the-pdf-fields-values-and-render-them-into-the-same-web-page-fields-using-javascript/1484/3 "2022-03-18T14:22:56Z")

</div>

**Hello, I’m Ron, an automated tech support bot 🤖**

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:
- [Support forms with PDF.js Express](https://pdfjs.express/documentation/forms/overview)
- [Integrating PDF.js Express Plus into an existing Blazor project - Integrate PDF.js Express WebViewer](https://pdfjs.express/documentation/get-started/blazor/exist-project#integrate-pdf.js-express-webviewer)
- [Create Custom PDF Stamps using JavaScript | PDF.js Express SDK - Standard stamps](https://pdfjs.express/documentation/annotation/stamps#standard-stamps)

APIs:
- [Core.Annotations.WidgetFlags - new WidgetFlags(options)](https://pdfjs.express/api/Core.Annotations.WidgetFlags.html#WidgetFlags__anchor)
- [PDF.js Express Utilities](https://pdfjs.express/api/utils/index.html#__anchor)
- [Core.Annotations.DatePickerWidgetAnnotation - new DatePickerWidgetAnnotation(field, options)](https://pdfjs.express/api/Core.Annotations.DatePickerWidgetAnnotation.html#DatePickerWidgetAnnotation__anchor)

Forums:
- [Can we highlight/Annotate scanned pdf (for eg. some scanned pages)?](https://pdfjs.community/t/can-we-highlight-annotate-scanned-pdf-for-eg-some-scanned-pages/1030/1)
- [Security! Does PDF.js Express allow to disable browser cache for PDF form values populated by User?](https://pdfjs.community/t/security-does-pdf-js-express-allow-to-disable-browser-cache-for-pdf-form-values-populated-by-user/1373/1)
- [Construction plan does not sharpen up when zooming in](https://pdfjs.community/t/construction-plan-does-not-sharpen-up-when-zooming-in/336/1)

---

<div class="post-metadata">

**Author:** ![dnavarro](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/dnavarro/32/707_2.png) [@dnavarro](https://pdfjs.community/u/dnavarro)\
**Post date:** [March 21, 2022, 3:45pm UTC](https://pdfjs.community/t/how-to-upload-a-pdf-file-to-a-web-page-get-the-pdf-fields-values-and-render-them-into-the-same-web-page-fields-using-javascript/1484/4 "2022-03-21T15:45:44Z")

</div>

Hi There,

I see that you’re using the PDF.js library.  
This forum is specifically for support of our product **PDF.js Express** , so, unfortunately, we cannot help you with this.

Thanks,

Dandara

---

<div class="post-metadata">

**Author:** ![samehkm](https://avatars.discourse-cdn.com/v4/letter/s/48db29/32.png) [@samehkm](https://pdfjs.community/u/samehkm)\
**Post date:** [March 24, 2022, 6:35pm UTC](https://pdfjs.community/t/how-to-upload-a-pdf-file-to-a-web-page-get-the-pdf-fields-values-and-render-them-into-the-same-web-page-fields-using-javascript/1484/5 "2022-03-24T18:35:51Z")

</div>

Hi, I do not mind using any other SW to get the function delivered. Are the above requirements can be done with PDF.js Express