React+ipfs implements file upload and download

recently, I was uploading files to ipfs using js, so I built an ipfs node locally according to the tutorials. The upload port is 5001, and the port for viewing files is 8080. But after writing the code, I tested it on my local node and realized the function of uploading files. The file can be accessed using the native test node http://127.0.0.1:8080/ipfs/:hash, but it is often not accessible under https://ipfs.io/ipfs/:hash (sometimes, but not immediately, at intervals). So I wonder if I"ve been walled, but the vpn is normal, like a 1-2k txt file that takes a long time to read.

Q:
1. This ipfs upload file will take a long time to check, and how to check the upload progress.
2. The downloaded file is an unformatted file, how to achieve the uploaded file format is the downloaded file format.

the code is as follows:

import React, {Component} from "react";
import "./App.css";

const ipfsAPI = require("ipfs-api");
const ipfs = ipfsAPI({host: "localhost", port: "5001", protocol: "http"});
// hash = "QmdkpWSqP1eCMyY5epNLzqdp1M16nUYM2CkxwZPZy3vQHc";
// function Utf8ArrayToStr(array) {
//   var out,
//     i,
//     len,
//     c;
//   var char2,
//     char3;

//   out = "";
//   len = array.length;
//   i = 0;
//   while (i < len) {
//     c = array[iPP];
//     switch (c >> 4) {
//       case 0:
//       case 1:
//       case 2:
//       case 3:
//       case 4:
//       case 5:
//       case 6:
//       case 7:
//         // 0xxxxxxx
//         out += String.fromCharCode(c);
//         break;
//       case 12:
//       case 13:
//         // 110x xxxx   10xx xxxx
//         char2 = array[iPP];
//         out += String.fromCharCode(((c & 0x1F) << 6) | (char2 & 0x3F));
//         break;
//       case 14:
//         // 1110 xxxx  10xx xxxx  10xx xxxx
//         char2 = array[iPP];
//         char3 = array[iPP];
//         out += String.fromCharCode(((c & 0x0F) << 12) | ((char2 & 0x3F) << 6) | ((char3 & 0x3F) << 0));
//         break;
//       default:
//         break;
//     }
//   }

//   return out;
// }


class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      strHash: null,
      strContent: null,
      imgSrc: null
    }
  }

  saveTextBlobOnIpfs = (blob) => {
    return new Promise(function(resolve, reject) {
      const descBuffer = Buffer.from(blob, "utf-8");
      ipfs.add(descBuffer).then((response) => {
        console.log(response)
        resolve(response[0].hash);
      }).catch((err) => {
        console.error(err)
        reject(err);
      })
    })
  }

  saveImageOnIpfs = (reader) => {
    return new Promise(function(resolve, reject) {
      const buffer = Buffer.from(reader.result);
      ipfs.add(buffer).then((response) => {
        console.log(response)
        resolve(response[0].hash);
      }).catch((err) => {
        console.error(err)
        reject(err);
      })
    })
  }


  render() {
    return (<div>
      <input type="file" ref="file" id="file" name="file" multiple="multiple"/>
      <br/>
      <input ref="ipfsContent"/>
      <button onClick={() => {
          var file = this.refs.file.files[0];
          var reader = new FileReader();
          // reader.readAsDataURL(file);
          reader.readAsArrayBuffer(file)
          reader.onloadend = (e) => {
            console.log(reader);
            // IPFS
            this.saveImageOnIpfs(reader).then((hash) => {
              console.log(hash);
              this.setState({
                imgSrc: hash,
                strHash: hash
              })
            });
          }

          // let ipfsContent = this.refs.ipfsContent.value;
          // console.log(ipfsContent);
          // this.saveTextBlobOnIpfs(ipfsContent).then((hash) => {
          //   console.log(hash);
          //   this.setState({strHash: hash});
          // });
        }}>IPFS</button>
      http://ipfs.io/ipfs/{this.state.strHash}
      <button onClick={() => {
          console.log("ipfs")
          let hash = this.state.strHash;
          
          ipfs.cat(hash).then((stream) => {
            console.log(stream);
            let strContent = Utf8ArrayToStr(stream);
            console.log(strContent);
            this.setState({strContent: strContent});
          });
        }}></button>
      <h1>{"https://ipfs.io/ipfs/" + this.state.imgSrc}</h1>
      <img alt=""  src={"http://127.0.0.1:8080/ipfs/" + this.state.imgSrc}/>
      </div>);
  }
}

export default App;