import React, { Component } from "react";
import fire from "../config/fire";
import FileUploader from "react-firebase-file-uploader";
import { Document, Page } from "react-pdf";
import { pdfjs } from "react-pdf";
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
class PdfUpload extends Component {
state = {
username: "",
avatar: "",
isUploading: false,
progress: 0,
avatarURL: "",
};
handleChangeUsername = (event) =>
this.setState({ username: event.target.value });
handleUploadStart = () => this.setState({ isUploading: true, progress: 0 });
handleProgress = (progress) => this.setState({ progress });
handleUploadError = (error) => {
this.setState({ isUploading: false });
console.error(error);
};
handleUploadSuccess = (filename) => {
this.setState({ avatar: filename, progress: 100, isUploading: false });
fire
.storage()
.ref("pdfs")
.child(filename)
.getDownloadURL()
.then((url) => this.setState({ avatarURL: url }));
};
render() {
let urlpdf = this.state.avatarURL;
return (
<div>
<form>
{this.state.isUploading && <p>Progress: {this.state.progress}</p>}
{this.state.avatarURL && <Document file={urlpdf} />}
<FileUploader
name="avatar"
randomizeFilename
storageRef={fire.storage().ref("pdfs")}
onUploadStart={this.handleUploadStart}
onUploadError={this.handleUploadError}
onUploadSuccess={this.handleUploadSuccess}
onProgress={this.handleProgress}
/>
</form>
</div>
);
}
}
export default PdfUpload;
**Here, in the above code, I'm trying to upload and view the PDF file using react-pdf and react-firebase-file-uploader library. But, PDF file is uploading properly, But giving me error while showing the uploaded pdf in webpage as "UnknownErrorException details: "UnknownErrorException: Failed to fetch" message: "Failed to fetch" name: "UnknownErrorException"" **