CODEWITHSUNDEEP
reactjspage-refresh
Himanshu Shekhar
Himanshu Shekhar

Reputation: 6643

How can i show alert to the user when user try to reload the page while file uploading to server from react js?

basically i want to prevent the manual page refresh while file upload in progress.

useEffect(() => {
        if (window.performance) {
          if (performance.navigation.type === 1) {
            if (progress.length !== 0) {
              if (progress[0].progress !== 100) {
                alert('Your video is uploading ! page reload will stop your video upload');
              }
            }
          }
        }

}

Upvotes: 0

Views: 1178

Answers (1)

Slim
Slim

Reputation: 683

You can try with the beforeunload event. The logic would be within these lines:

window.beforeunload = (e) => {
     e.preventDefault()
     if (progress.length !== 0) {
        if (progress[0].progress !== 100) {
            alert('Your video is uploading ! page reload will stop your video upload');
        e.returnValue = '';
        }
     }
};

But you could get some errors depending on how you implement it in React, that you can fix by following https://stackoverflow.com/a/39094299 or using the react-beforeunload library for instance

import { useRef, useEffect } from 'react';

const useUnload = fn => {
  const cb = useRef(fn);

  useEffect(() => {
    const onUnload = cb.current;

    window.addEventListener("beforeunload", onUnload);

    return () => window.removeEventListener("beforeunload", onUnload);
  }, [cb]);
};

export default useUnload;

const MyComponent = () => {
  useUnload(e => {
    e.preventDefault();
    e.returnValue = '';
  });

  return (
    <div>
      Some content
    </div>
  );
};

Upvotes: 1

Related Questions