How to check if the remote source is available using React?

user_1434847 0
Viewed 2977

I would like to check if the remote resource exist (for example a very huge zip file. I don't need to collect the file). So what is the best way just to check the existence of the resource?

reactjs javascript
2 Answers

You can make a HEAD request to see if a URL exists. Maybe something like this.

async function exists(url) {
  const result = await fetch(url, { method: 'HEAD' });
  return result.ok;
}
user_1072770 
import React from "react";
import "./styles.css";

export default class App extends React.Component {
  state = { isFileExists: false };
  componentDidMount() {
    this.checkFIle(window.location.origin + "/files/FL_1.zip")
      .then(() => {
        this.setState({ isFileExists: true });
      })
      .catch(err => {
        this.setState({ isFileExists: false });
      });
  }
  checkFIle = async url => {
    return fetch(url, { method: "HEAD" });
  };
  render() {
    const { isFileExists } = this.state;
    return (
      <div className="App">
        {isFileExists && <p>File Exists</p>}
        {!isFileExists && <p>File Not Exists</p>}
      </div>
    );
  }
}

Check out the code sample in below url:

https://codesandbox.io/s/loving-napier-dpli5

user_80626200
Related