Open files from file system, sign, download and share pdf via mail

I am new to using React the farthest I’ve gone is cloning the react demo and running with npm start.

I am trying to : Open, sign, download and share via mail; the pdf files.

I haven’t successfully created a use case without an error yet.

I’ve tried using axios but linking it to the webViewer is the challenge
Here is the code I saw in geekforgeeks

import axios from 'axios';

import React,{Component} from 'react';

class App extends Component {

	state = {

	// Initially, no file is selected
	selectedFile: null
	// On file select (from the pop up)
	onFileChange = event => {
	// Update the state
	this.setState({ selectedFile:[0] });
	// On file upload (click the upload button)
	onFileUpload = () => {
	// Create an object of formData
	const formData = new FormData();
	// Update the formData object
	// Details of the uploaded file
	// Request made to the backend api
	// Send formData object"api/uploadfile", formData);
	// File content to be displayed after
	// file upload is complete
	fileData = () => {
	if (this.state.selectedFile) {
		return (
			<h2>File Details:</h2>
<p>File Name: {}</p>

<p>File Type: {this.state.selectedFile.type}</p>

			Last Modified:{" "}

	} else {
		return (
			<br />
			<h4>Choose before Pressing the Upload button</h4>
	render() {
	return (
			File Upload using React!
				<input type="file" onChange={this.onFileChange} />
				<button onClick={this.onFileUpload}>

export default App;

Please I will need a solution to this. Please try to be as basic as possible.


Once you have uploaded a file using Axios you can set a file using instance.loadDocument() API. This API expects a string to the file path or a Blob. You can read this guide here for more information: PDF.js Express Viewer Integration Best Practices | Documentation

Using our react sample, which uses hooks, you could have the current file be a state variable and have a useEffect hook that loads the new document on file state change like so:

useEffect( () => {
  if(file) {

To download a pdf with a signature, you will need to merge the annotation XFDF data into the PDF. You can do so using our Rest Utility package. Here is a guide using our Rest Utility package and the npm package file-saver to download the file:

Once you have merged the file data, you can download it using the example above or use another service to email the merged file.


1 Like

Thank you for this, I will give you feedback once I implemented this in my code. :smiley: