কিভাবে ফাইল শেয়ার করবেন

প্যালেন্স লিয়াও
Palances Liao

আধুনিক উপায়

ওয়েব শেয়ার এপিআই-এর share() পদ্ধতি ব্যবহার করে

ফাইল শেয়ার করতে navigator.share() কল করুন। মনে রাখবেন, share() ) মেথডটি কল করার আগে navigator.canShare() দিয়ে ফাইলগুলো শেয়ার করা যাবে কিনা তা সবসময় যাচাই করে নেবেন এবং আপনার সাইটটি HTTPS ব্যবহার করছে কিনা তা নিশ্চিত করবেন।

// Assume `blob` is a PNG image file.
const data = {
  files: [
    new File([blob], 'image.png', {
      type: blob.type,
    }),
  ],
  title: 'My title',
  text: 'My text',
};
if (navigator.canShare(data)) {
  await navigator.share(data);
}

Browser Support

  • ক্রোম: ১২৮।
  • প্রান্ত: ৯৩।
  • ফায়ারফক্স: একটি ফ্ল্যাগের আড়ালে।
  • সাফারি: ১২.১।

Source

ক্লাসিক উপায়

যদি ওয়েব শেয়ার এপিআই সমর্থিত না হয়, তবে ব্যবহারকারীকে ফাইলটি ডাউনলোড করার সুযোগ দেওয়াটাই পরবর্তী সেরা বিকল্প, যাতে তিনি নিজে থেকে এটি শেয়ার করতে পারেন, যেমন—ইমেইল, মেসেঞ্জার বা কোনো অনলাইন সোশ্যাল নেটওয়ার্ক অ্যাপের মাধ্যমে।

Browser Support

  • ক্রোম: ১৫।
  • প্রান্ত: ১৩।
  • ফায়ারফক্স: ২০।
  • সাফারি: ১০.১।

Source

প্রগতিশীল উন্নয়ন

নিচের পদ্ধতিটি ওয়েব শেয়ার এপিআই ব্যবহার করে, যখন ব্রাউজার তা সমর্থন করে এবং সমর্থিত ফাইলের ধরনের ওপর ভিত্তি করে ডেটা শেয়ার করা সম্ভব হয়। অন্যথায়, এটি ফাইলটি ডাউনলোড করার পদ্ধতিতে ফিরে যায়।

const button = document.querySelector('button');
const img =  document.querySelector('img');

// Feature detection
const webShareSupported = 'canShare' in navigator;
// Update the button action text.
button.textContent = webShareSupported ? 'Share' : 'Download';

const shareOrDownload = async (blob, fileName, title, text) => {
  // Using the Web Share API.
  if (webShareSupported) {
    const data = {
      files: [
        new File([blob], fileName, {
          type: blob.type,
        }),
      ],
      title,
      text,
    };
    if (navigator.canShare(data)) {
      try {
        await navigator.share(data);
      } catch (err) {
        if (err.name !== 'AbortError') {
          console.error(err.name, err.message);
        }
      } finally {
        return;
      }
    }
  }
  // Fallback implementation.
  const a = document.createElement('a');
  a.download = fileName;
  a.style.display = 'none';
  a.href = URL.createObjectURL(blob);
  a.addEventListener('click', () => {
    setTimeout(() => {
      URL.revokeObjectURL(a.href);
      a.remove();
    }, 1000)
  });
  document.body.append(a);
  a.click();
};

button.addEventListener('click', async () => {
  const blob = await fetch(img.src).then(res => res.blob());
  await shareOrDownload(blob, 'cat.png', 'Cat in the snow', 'Getting cold feet…');
});

আরও পড়ুন

ডেমো

এইচটিএমএল 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="icon"
      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎉</text></svg>"
    />
    <title></title>
    <link rel="stylesheet" href="style.css" />
    <!-- TODO: Devsite - Removed inline handlers -->
    <!-- <script src="script.js" type="module"></script> -->
  </head>
  <body>
    <h1>Share a file</h1>
    <img
      width="200"
      height="200"
      alt="A cat walking in the snow."
      src="cat.png"
    />
    <button type=button></button>
  </body>
</html>

সিএসএস 


        :root {
  color-scheme: dark light;
}

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  margin: 1rem;
  font-family: system-ui, sans-serif;
}

img,
video {
  height: auto;
  max-width: 100%;
  display: block;
}

button {
  margin: 1rem;
}

জেএস 


        const button = document.querySelector('button');
const img =  document.querySelector('img');

const webShareSupported = 'canShare' in navigator;
button.textContent = webShareSupported ? 'Share' : 'Download';

const shareOrDownload = async (blob, fileName, title, text) => {
  if (webShareSupported) {
    const data = {
      files: [
        new File([blob], fileName, {
          type: blob.type,
        }),
      ],
      title,
      text,
    };
    if (navigator.canShare(data)) {
      try {
        await navigator.share(data);
      } catch (err) {
        if (err.name !== 'AbortError') {
          console.error(err.name, err.message);
        }
      } finally {
        return;
      }
    }
  }
  // Fallback
  const a = document.createElement('a');
  a.download = fileName;
  a.style.display = 'none';
  a.href = URL.createObjectURL(blob);
  a.addEventListener('click', () => {
    setTimeout(() => {
      URL.revokeObjectURL(a.href);
      a.remove();
    }, 1000)
  });
  document.body.append(a);
  a.click();
};

button.addEventListener('click', async () => {
  const blob = await fetch(img.src).then(res => res.blob());
  await shareOrDownload(blob, 'cat.png', 'Cat in the snow', 'Getting cold feet…');
});