Failed to load PDF file

Viewed 394
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"" **

0 Answers
Related