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

Technical Support
1

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: event.target.files[0] });
	
	};
	
	// On file upload (click the upload button)
	onFileUpload = () => {
	
	// Create an object of formData
	const formData = new FormData();
	
	// Update the formData object
	formData.append(
		"myFile",
		this.state.selectedFile,
		this.state.selectedFile.name
	);
	
	// Details of the uploaded file
	console.log(this.state.selectedFile);
	
	// Request made to the backend api
	// Send formData object
	axios.post("api/uploadfile", formData);
	};
	
	// File content to be displayed after
	// file upload is complete
	fileData = () => {
	
	if (this.state.selectedFile) {
		
		return (
		<div>
			<h2>File Details:</h2>
			
<p>File Name: {this.state.selectedFile.name}</p>

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

			
<p>
			Last Modified:{" "}
			{this.state.selectedFile.lastModifiedDate.toDateString()}
			</p>

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

export default App;

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

2

Hi,

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) {
   instance.loadDocument(file);
  }
},[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:

https://pdfjs.express/api/utils/tutorial-Adding%20a%20download%20button.html

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

Cheers,
Dustin

1 Like
3

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

2 Likes