Merging XFDF using the Express REST API length exceeded error

Technical Support
1

I have edited 16 MB PDF total 20 pages. When click save button merging XFDF using the express REST API return error like below.
HTTP content length exceeded 10485760 bytes.

exceeded
exceeded1916×935 144 KB

WebViewer({
    disableFlattenedAnnotations: true,
    path: '/lib',
    licenseKey: '', // optional

    initialDoc: pdf_url,
}, document.getElementById('viewer'))
    .then(function(instance) {
        var docViewer = instance.docViewer;

        var annotManager = instance.annotManager;
        var Annotations = instance.Annotations;

        instance.setHeaderItems(function(header) {
            header.push({
                type: 'actionButton',
                img: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m0 0h24v24h-24z" fill="none"></path><path d="m21 19v-14c0-1.1-.9-2-2-2h-14c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zm-12.5-5.5 2.5 3.01 3.5-4.51 4.5 6h-14z"></path></svg>',
                onClick: function() {

                    onSavetwo();
                    async function onSavetwo() {
                        var stampAnnot = new Annotations.StampAnnotation();
                        stampAnnot.PageNumber = docViewer.getCurrentPage();
                        stampAnnot.rotation=180;
                        stampAnnot.X = 100;
                        stampAnnot.Y = 250;
                        stampAnnot.Width = 1050;
                        stampAnnot.Height = 591;
                        stampAnnot.ImageData = image_url;
                        stampAnnot.Author = await annotManager.getCurrentUser();

                        annotManager.addAnnotation(stampAnnot);
                        annotManager.redrawAnnotation(stampAnnot);
                    }


                }
            });
        });

        instance.setHeaderItems(function(header) {
            header.push({
                type: 'actionButton',
                img: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"/></svg>',
                onClick: function() {

                    onSave();
                    async function onSave() {

                        var xfdf = await annotManager.exportAnnotations({ links: false, widgets: false });
                        var fileData = await docViewer.getDocument().getFileData({});
                        var blob = new Blob([fileData], {type: 'application/pdf'});

                        var data = new FormData();
                        data.append('xfdf', xfdf);
                        data.append('file', blob);
                        data.append('license','pPNmq7E8QLc5z3EiploT');

                        // Process the file
                        var response = await fetch('https://api.pdfjs.express/xfdf/merge', {
                            method: 'post',
                            body: data
                        }).then(resp => resp.json());

                        var { url, key, id } = response;

                        // Download the file
                        var mergedFileBlob = await fetch(url, {
                            headers: {
                                Authorization: key
                            }
                        }).then(resp => resp.blob())

                        var data_PDF = new FormData();
                        data_PDF.append('data' , mergedFileBlob);

                        var xhr = new XMLHttpRequest();
                        xhr.onreadystatechange = function() {
                            if (this.readyState == 4) {
                                $('#cover-spin').hide(0);
                                $("#ed-alert").css("display", "block");
                                setTimeout(function() {  $("#ed-alert").css("display", "none"); }, 5000);
                            } else {
                                $('#cover-spin').show(0);
                            }
                        }
                        xhr.open('POST', upload_url, true);
                        xhr.send(data_PDF);



                        // Do something with blob...
                        // save(mergedFileBlob)
                    }

                }
            });
        });
    });
2

Hello!

The max request size for the API is 5.5MB, which is why that error is happening. If you want to merge PDFs larger than that, you will have to upload them to a server (Amazon S3 for example) and provide a URL to the PDF instead of sending the raw data.

Thanks,
Logan

3 
Hi,

I have tried with external url but the annotations not reflected pdf after save .

                            var xfdf = await annotManager.exportAnnotations({ links: false, widgets: false });
                            var fileData = await docViewer.getDocument().getFileData({});
                           // var blob = new Blob([fileData], {type: 'application/pdf'});

                            var data = new FormData();
                            data.append('xfdf', xfdf);
                            data.append('file', 'http://africau.edu/images/default/sample.pdf');
                            data.append('license','');

                            // Process the file
                            var response = await fetch('https://api.pdfjs.express/xfdf/merge', {
                                method: 'post',
                                body: data
                            }).then(resp => resp.json());

                            var { url, key, id } = response;

                            // Download the file
                            var mergedFileBlob = await fetch(url, {
                                headers: {
                                    Authorization: key
                                }
                            }).then(resp => resp.blob())

                            var data_PDF = new FormData();
                            data_PDF.append('data' , mergedFileBlob);

                            var xhr = new XMLHttpRequest();
                            xhr.onreadystatechange = function() {
                                if (this.readyState == 4) {
                                    $('#cover-spin').hide(0);
                                    $("#ed-alert").css("display", "block");
                                    setTimeout(function() {  $("#ed-alert").css("display", "none"); }, 5000);
                                } else {
                                    $('#cover-spin').show(0);
                                }
                            }
                            xhr.open('POST', upload_url, true);
                            xhr.send(data_PDF);
4

Hi,

This seems to be an issue on our end, we are looking in to it now and will get back to you asap!

Thanks for your patience,

Logan

5

So the issue actually isn’t with the server like I thought. PDF.js Express can not import annotations baked into a document, and instead just renders these annotations as flattened bitmaps. There seems to be a regression here where this is not working all the time, which is why the merged annotations do not show up.

In order to load annotations, you need to use the importAnnotations API and provide the XFDF (which can be retrieved either from your database, or our /extract endpoint).

Right now your flow is a bit strange because you are merging annotations into a document and then directly reopening it (meaning it would flatten the merged annots).

We will look into this annotation rendering regression ASAP, but for now we recommend that the /merge endpoint only be used when delivering the document to the user (via download etc).

Let me know if there are any more questions.

Thanks,
Logan

6

Hi,

This should work now. Our rendering engine (PDF.js) was not able to handle the annotations that we merged into the document, because they did not have a custom annotation appearance (most PDF readers support not have appearances). We have fixed the server to include these appearances, so the code you have above should work now.

Thanks,
Logan