Saving Annotations to Document - React Native

PDFTron - React Native - Android

Hi, I am looking trying to save annotations to the document using react native.

I added a custom button to the viewer, and used the SaveDocument api to save the document which executes but it seems like the annotations are not saved when I reopen the document.

Here’s the code snippet

return (
                <View style={{ flex: 1 }}>
                    <DocumentView
                        ref={(c) => this._viewer = c}
                        document={filepath}
                        showLeadingNavButton={false}
                        leadingNavButtonIcon={
                            Platform.OS === "ios" ? "ic_close_black_24px.png" : "ic_arrow_back_white_24dp"
                        }
                        onLeadingNavButtonPressed={this.onLeadingNavButtonPressed}
                        onDocumentLoaded={path => {
                            console.info("The document has finished loading:", path);
                        }}
                        fitMode={Config.FitMode.FitPage}
                        bottomToolbarEnabled={true}
                        annotationToolbars={[myToolbar]}
                        collabEnabled={true}
                        currentUser={this.props.currentUser ? this.props.currentUser.value : "Guest"}
                        currentUserName={this.props.currentUserName ? this.props.currentUserName.value : "Guest"}
                        annotationMenuItems={[
                            Config.AnnotationMenu.note,
                            Config.AnnotationMenu.style,
                            Config.AnnotationMenu.delete
                        ]}
                    />
                    <View style={styles.button}>
                            <Button
                                onPress={() => {
                                    this._viewer.saveDocument().then((filepath) => {
                                        console.info('saveDocument:', filepath);
                                      });
                                }}
                                title="Save"
                            />
                        </View>
                    </View>
            );

Could you please share API to save annotations to the document?

Also, my use case is similar to Save Annotations in Mendix documentation that you have provided. I am looking for something similar in React Native. Kindly provide your inputs on this too.
Thanks

Hello, I’m Ron, an automated tech support bot :robot:

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

Guides:APIs:Forums:

Hi, could you please provide the exact value passed in for “filepath”? Is it a local file? HTTPS file? When you say “re-open”, are you re-opening the exact same locally stored file that you have permission to (so you can write to it)?

Hi Shirley,

following is the filepath which is rendering the pdf file

which is the same path for the saved document

In this particular use case of my application, I am retrieving the file from the local storage to which, I want to add a few annotations and save it.
That is if I render the same file from my local storage, even after I exit the viewer it should retrieve the pdf with annotation.

Using the code as mentioned above → I am unable to view the annotations after saving the document although the document still renders from the same storage location.

Hope this helps. Thanks

Hi, I believe this is the same problem we discussed in the other ticket you raised. Your file path is incorrect, you should either use a proper local file path, looks like “/data/XXX/test.pdf”, or use a proper content URI path, looks like “content://com.google.android.apps.docs.storage/document/acc%3D1%3Bdoc%3Dencoded%3D3ANW16SOSAt4EvkKHsYo_159-fKCSyFbzE4zHcCNeew3N7oDXd0jgvbNFDM%3D”. The path you put in, the system does not know how to handle it or save back. Please update to use content URI, if issue persist, please provide a sample project that we can run as-is. Thanks.

Hi Shirley,

As suggested, I am able to get the proper local file path
D/ReactNativeJS: ‘saveDocument:’, ‘/data/user/0/com.mendix.nativetemplate/cache/Test.pdf’

Does PDFTRon provides any React Native APIs to retrieve the pdf file content with annotations from the temp path returned by SaveDocument API? If not, can you please suggest any other way to retrieve the file content so that I can POST this file content to my REST service which saves this data into database.

Hi, could you elaborate on what you mean by “retrieve the file content”? If you are uploading the file to your server, you would just use regular react native API to perform the upload.

Hi, I want to be able to sent the file (with annotations) as a blob to the server, how do I convert the file to blob once I save the document using the save document API? I see it returns a temp path eg : /data/user/0/com.mendix.nativetemplate/cache/Test.pdf

Any input on how can I get the contents of the file as blob from this path ?

This is unrelated to PDFTron API, you would want to stackoverflow “upload a file with react native” for the best result, the first one I found is How to upload file to server using react-native - Stack Overflow. Thanks.

1 Like