Update PDFTron with images,

Technical Support
, , ,
1

Product: Update PDFTron with images or annotations, on save, the image is saving as DRAFT

Product Version:

Please give a brief summary of your issue:

When i want to save the annotation and stamps and it save it as draft.
This is my function to save the image:

const saveDocument = async () => {
setIsLoadingDocument(true);

	let name = '';
	let annotationsAdded = [];
	let file = null;
	let pages = 0;

	if (mediaFile) {
		const fileType = `${mediaFile.name.split('.').pop()}`;
		name = `${eventId}.${fileType}`;
		file = await fileToBlob(mediaFile);
	} else {
		const doc = instanceDocumentViewer.getDocument();
		pages = doc.getPageCount();
		const { annotationManager } = webViewer.Core;
		const xfdfString = await annotationManager.exportAnnotations();
		annotationsAdded = await annotationManager.getAnnotationsList();

		const data = await doc.getFileData({
			// saves the document with annotations in it
			xfdfString
		});

		const arr = new Uint8Array(data);
		file = new Blob([arr], { type: 'application/pdf' });
		name = `${eventId}.pdf`;
	}

	const clerkId = getValueFromToken('clerk');
	const path = `/${clerkId}/${caseId}/${eventId}${
		annotationsAdded.length > 0 ? '/redacted' : ''
	}/${name}`;

	const FormData = require('form-data');
	let formData = new FormData();
	formData.append('file', file);
	formData.append('path', path);
	formData.append('eventId', eventId);
	formData.append('pages', pages);
	const contentType = file.type;

	postDocument({ body: formData, url: postUrl, contentType: contentType })
		.then((response) => {
			if (response.status >= 400) {
				showAlertErrorSaveDocument();
			} else {
				setIsSaveDocument(true);
				!mediaFile && getDocumentSaved();

				if (mediaFile) {
					setMediaFile(null);
					showAlertSuccessUpload({ name });
				} else {
					setToast({
						text: `${name} has been successfully uploaded.`,
						show: true,
						type: TOAST_TYPES.SUCCESS
					});
				}
			}

			setIsLoadingDocument(false);
		})
		.catch((err) => {
			console.log(err);
			setIsLoadingDocument(false);
			showAlertErrorSaveDocument();
		});
};
2

Hello Alan,

Thank you for contacting WebViewer Support.

I’d like to know if you could provide a sample document and/or a code that we could run and try to reproduce a similar scenario to yours, so we can help you better on this.

Are you using custom stamps?

Best Regards,

Dandara Navarro
Web Software Developer
PDFTron Systems, Inc.

1 Like
3

@dnavarro yes!

I am adding an image to the PDF Tron in useState and when the state is changed, this useeffect is called.

const [ imageSelection, setImageSelection] = useState(“”)

useEffect(() => {
if (imageSelection) {
const { Annotations, annotationManager } = webViewer.Core;
const stampAnnot = new Annotations.StampAnnotation();
stampAnnot.PageNumber = 1;
stampAnnot.X = 100;
stampAnnot.Y = 250;
stampAnnot.Width = 275;
stampAnnot.Height = 300;
const keepAsSVG = true;
stampAnnot.setImageData(imageSelection, keepAsSVG);
stampAnnot.Author = annotationManager.getCurrentUser();

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

}, [imageSelection]);

Then i have the function which save the pdf with the annotation

const saveDocument = async () => {
setIsLoadingDocument(true);
let name = ‘’;
let annotationsAdded = [];
let file = null;
let pages = 0;

if (mediaFile) {
	const fileType = `${mediaFile.name.split('.').pop()}`;
	name = `${eventId}.${fileType}`;
	file = await fileToBlob(mediaFile);
} else {
	const doc = instanceDocumentViewer.getDocument();
	pages = doc.getPageCount();
	const { annotationManager } = webViewer.Core;
	const xfdfString = await annotationManager.exportAnnotations();
	annotationsAdded = await annotationManager.getAnnotationsList();

	const data = await doc.getFileData({
		xfdfString
	});

	const arr = new Uint8Array(data);
	file = new Blob([arr], { type: 'application/pdf' });
	name = `${eventId}.pdf`;
}
const clerkId = getValueFromToken('clerk');
const path = `/${clerkId}/${caseId}/${eventId}${
	annotationsAdded.length > 0 ? '/redacted' : ''
}/${name}`;

const FormData = require('form-data');
let formData = new FormData();
formData.append('file', file);
formData.append('path', path);
formData.append('eventId', eventId);
formData.append('pages', pages);
const contentType = file.type;

postDocument({ body: formData, url: postUrl, contentType: contentType })
	.then((response) => {
		if (response.status >= 400) {
			showAlertErrorSaveDocument();
		} else {
			setIsSaveDocument(true);
			!mediaFile && getDocumentSaved();

			if (mediaFile) {
				setMediaFile(null);
				showAlertSuccessUpload({ name });
			} else {
				setToast({
					text: `${name} has been successfully uploaded.`,
					show: true,
					type: TOAST_TYPES.SUCCESS
				});
			}
		}

		setIsLoadingDocument(false);
	})
	.catch((err) => {
		console.log(err);
		setIsLoadingDocument(false);
		showAlertErrorSaveDocument();
	});

};

BUT IT STILL RETURN AND IMAGE WHICH SAID “DRAFT”

4

Hi Alan,

Unfortunately, just with this part of the code I’m not able to check what is going on. It would help us better if you send the most as you can of your code. I cannot see where you’re calling the saveDocument method. Also, I’d like to see how you’re setting the state of imageSelection.

Please send me a runnable code so I can reproduce the same scenario. You might clone your project and remove the parts of the code not related. If you prefer, you can send me by e-mail. My e-mail is dnavarro@pdftron.com.

Thank you,

Dandara Navarro