ඔබ වෙබ් අඩවිය සඳහා ඕනෑම ආකාරයක ඡායාරූප උඩුගතකයක් ගොඩනඟන්නේ නම්, ඔබට ඉක්මනින් අවබෝධ වනු ඇත මූලික ගොනුවක් ඇතුළත් කිරීම ප්රමාණවත් නොවන බව. පරිශීලකයා විශාල ගොනුවක් උඩුගත කිරීමට උත්සාහ කරන මොහොතේ, අත්දැකීම බිඳ වැටේ. ඔවුන් "අඩුගත කිරීම" ක්ලික් කරයි, බ්රවුසරය වැටී ඇති බව පෙනේ, එය ක්රියාකාරී වන හෝ බිඳ වැටී ඇති බව ඔවුන් නොදනිති. යථාර්ථය වන්නේ, කිසිවකුගෙන් එකක් ගොඩනගා ගැනීම ක්ෂේත්රයේ ක්රීඩකයාගේ කූඩුවකි.එය සරලව පෙනේ, නමුත් ඔබ ඉක්මනින් ඔබව මතුපිට මාලිගාවේ ගැඹුරින් සොයා ගනී ඔත්තු, සිදුවීම් ඇහුම්කන්, සහ DOM පරිශීලකත්වය. එය සම්මත විය යුතු ක්රියාකාරකම් සඳහා බෝතලයක් ටොන් එකක්. XMLHttpRequest අපි අතින් එකක් ගොඩනඟන ආකාරය හරහා ඇවිදිමු, පසුව මම ඔබට පෙන්වන්නම් ඇයි අපි ඔබට කවදාවත් අවශ්ය නොවන බව සහතික කරමු. ප් රධාන Takeaways 
 
 
 
 
 
 මෘදුකාංගය ඕනෑම මෘදුකාංගය තුළ හොඳ පරිශීලක අත්දැකීම් සඳහා ප්රගතිශීලී වේ. Custom progress bar from scratch නිර්මාණය කිරීම සඳහා, its upload.onprogress event XMLHttpRequest භාවිතා කරන boilerplate JavaScript අවශ්ය වේ. අත්හදා බැලීමේ ප්රවේශය ඔබට DOM යාවත්කාලීන සහ ගණන තනිවම කළමනාකරණය කිරීමට බල කරයි. Frontend-only progress bar එක server-side endpoint එකක් නොමැතිව file එක ලබාගන්නා අතර එය තවත් සංකීර්ණතාවක්. Filestack තෝරාගැනීම ස්වයංක්රීයව විශ්වාසදායක, වෘත්තීයව නිර්මාණය කරන ලද ප්රගතිශීලී වේදිකාවක් ඇතුළත් වේ, කිසිදු අමතර කේතයක් අවශ්ය නොවේ. Vanilla JavaScript භාවිතා කරන ආකාරය ඔබ මෙම විශේෂාංගය තනියම නිර්මාණය කිරීමට අවශ්ය නම්, ඔබ බ්රවුසරය භාවිතා කළ යුතුය (XHR) API. එය ඔබට HTTP ඉල්ලීම් සිදු කිරීමට සහ, අප සඳහා ප්රධාන වශයෙන්, උඩුගත කිරීමේ දියුණුව නිරීක්ෂණය කිරීමට ඉඩ සලසයි. XMLHttpRequest මෙන්න මෙහෙම පෙනුම, කොටසක් කොටසක්. 1 HTML ක් රමය පළමුව, ඔබට මූලික ගොනුව ඇතුලත් කිරීම සහ ක්රියාකාරිත්වය මාර්ගය සඳහා container අවශ්ය වේ. <h2>Manual Progress Bar Demo</h2>
<input type="file" id="fileInput">

<div class="progress-container">
    <div class="progress-bar" id="progressBar">0%</div>
</div>
 2) CSS ඊළඟට, අපගේ ක්රියාකාරිත්වය පෙන්නුම් කිරීම සඳහා අපගේ ක්රියාකාරිත්වය පෙන්නුම් කිරීම සඳහා සරල ස්ටයිල් කිහිපයක් මෙන්න. .progress-container {
    width: 100%;
    max-width: 400px;
    background-color: #dfe1e6;
    border-radius: 4px;
    height: 24px;
    margin-top: 1rem;
}

.progress-bar {
    width: 0%;
    height: 100%;
    background-color: #0052cc;
    text-align: center;
    line-height: 24px;
    color: white;
    font-size: 14px;
    border-radius: 4px;
    transition: width 0.3s ease;
}
 • JavaScript අපි අමුද්රව්ය තෝරා ගත යුතුය, ගොනුවක් ඇසීමට, XHR ඉල්ලීමක් නිර්මාණය කිරීම, සිදුවීම් ඇසීම සඳහා ඇසීම මෑතකදී මෑතකදී මෑතකදී මෑතකදී මෑතකදී මෑතකදී මෑතකදී මෑතකදී මෑතකදී මෑතකදී මෑතකදී මෑතකදී මෑතකදී upload.onprogress const fileInput = document.getElementById('fileInput');
const progressBar = document.getElementById('progressBar');

fileInput.addEventListener('change', (e) => {
  const file = e.target.files[0];
  if (!file) {
    return;
  }

  // You still need to build a server endpoint to handle this request.
  const url = 'https://your-backend-endpoint.com/upload';

  const xhr = new XMLHttpRequest();
  const formData = new FormData();

  xhr.open('POST', url, true);

  // The key event listener for tracking progress.
  xhr.upload.onprogress = function(event) {
    if (event.lengthComputable) {
      const percentComplete = Math.round((event.loaded / event.total) * 100);
      progressBar.style.width = percentComplete + '%';
      progressBar.textContent = percentComplete + '%';
    }
  };

  xhr.onload = function() {
    if (xhr.status === 200) {
      progressBar.style.backgroundColor = '#07a85d'; // Green for success.
      progressBar.textContent = 'Complete!';
    } else {
      progressBar.style.backgroundColor = '#de350b'; // Red for failure.
      progressBar.textContent = 'Upload Failed!';
    }
  };

  formData.append('uploadedFile', file);
  xhr.send(formData);
});
 ඔබ සෑම පියවරකටම වගකිව යුතු අතර, අපි නිවැරදි වැරදි කළමනාකරණය, timeouts, හෝ මෙම කේතය ප්රතිපත්තිය ලබා ගැනීම සඳහා ගැලපෙන පිටුපසින් නොමැතිව අතුරුදහන් වන බව සැබෑවටත් අතුරුදහන් කර නැත. මෙම කේතය අත්හදා බැලීම සඳහා සැබෑ ප්රථම ලෝහය පෙන්වයි.එය ගොනුව ලබා ගැනීමට සර්වර් අවශ්ය නිසා, මෙම HTML සෘජුවම ක්රියාත්මක කිරීම සඳහා හේතුවක් වනු ඇත. ඔබගේ බ්රවුසරයේ කොන්සෝලයේ වරද.මේ වරද මෙම ප්රවේශය අවශ්ය වනු ඇති සැඟවුණු backend සංකීර්ණතාවයේ විශිෂ්ට උදාහරණයකි. Note: පාඨමාලාව Filestack සමඟ සරල මාර්ගය දැන්, විකල්පය දිහා බලමු.අපි Filestack picker නිර්මාණය කරන විට, අපි ඒ ක්රියාකාරීත්වය සම්පූර්ණයෙන්ම ඇතුළත් කර ඇත. නැත්නම් Progress Handler එකක් ලියන්න. එය උඩුගත කිරීම අතරතුර සහ පසුව පරිශීලකයින් පැහැදිලි ප්රතිචාර ලබා දීමට නිර්මාණය කර ඇත. XMLHttpRequest The progress bar is built-in and works automatically. ඔබේ වෙබ් අඩවිය සඳහා ශක්තිමත් පින්තූර උඩුගතකයක් ලබා ගැනීම සඳහා සම්පූර්ණ කේතය මෙන්න, Filestack භාවිතා කිරීමෙන් ක්රියාකාරී වේ. <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Filestack Uploader with Automatic Progress Bar</title>
    <script src="https://static.filestackapi.com/filestack-js/4.x.x/filestack.min.js"></script>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
        }
        #uploadBtn {
            font-size: 16px;
            padding: 12px 24px;
            cursor: pointer;
        }
    </style>
</head>
<body>

    <h2>Filestack Uploader Demo</h2>
    <p>Click the button and watch the built-in progress bar.</p>
    <button id="uploadBtn">Launch Uploader</button>

    <script>
        // Replace 'YOUR_API_KEY' with your actual Filestack API key.
        // You can get one by signing up at filestack.com.
        const apikey = 'YOUR_API_KEY';
        const client = filestack.init(apikey);

        const options = {
            // This function will be called once the upload is complete.
            onUploadDone: (res) => console.log(res),
            // You can add more options here to customize the picker,
            // such as file types, max size, cloud sources, etc.
            // For example:
            // accept: ['image/*', 'video/*'],
            // maxFiles: 5,
            // transformations: {
            //   crop: true,
            //   rotate: true,
            // },
        };

        // Attach an event listener to the button to open the Filestack picker.
        document.getElementById('uploadBtn').addEventListener('click', () => {
            client.picker(options).open();
        });
    </script>

</body>
</html>
 ඒකයි.මේක තමයි සම්පූර්ණ මෙහෙයුම.ඔබට සෑම ගොනුවකටම විස්තරාත්මක දියුණුවක් පෙන්වන ලස්සන, සම්පූර්ණ ක්රියාකාරී උඩුගත කිරීම් ලැබෙන අතර, එය ලබා ගැනීමට ඔබට තේරුම් ගත හැකි කේත පහක් ලිව්වා.අපි ඉතිරිව කටයුතු කරනවා. ඇල්ලීම Up මෑත JavaScript ප්රවේශය රැකියාව සිදු කරයි, නමුත් එය සංවර්ධකයාගේ කාල සීමාව පිළිබඳ පරිපූර්ණ උදාහරණයකි.ඔබට XHR සිදුවීම් කළමනාකරණය කිරීම සහ DOM ක්රියාත්මක කිරීම සඳහා boilerplate කේතය ලිවීමට සහ එය ප්රථම සඳහා පමණක් වේ.ඔබ තවමත් ගොනු සැබවින්ම ලබා ගැනීමට සේවාදායක අංගයක් ගොඩනැගීමට හා රැකබලා ගැනීමට අවශ්ය වේ. අපි Filestack picker නිර්මාණය කරන විට, අපි progress bar table stakes ලෙස සැලකිල්ලට ගත්තේ, ඔබ විසින්ම ක්රියාත්මක කළ යුතු විකල්පයක් නොවේ. එය හොඳ පරිශීලක අත්දැකීම් සඳහා මූලික අවශ් යතාවක්.එහෙම හේතුවක් නිසා එය ස්ථාවර වශයෙන් ඇතුළත් වේ, ශක්තිමත් වැරදි කළමනාකරණය, විශාල ගොනු සඳහා multipart uploads, සහ retry logic සමග. ඔබේ කාලය ඔබේ වටිනාම සම්පත් වේ. විසඳා ඇති ප්රශ්න නැවත ක්රියාත්මක කිරීම අහිමි ක්රීඩාවකි. ඉලක්කය ඔබගේ යෙදුමෙහි ප්රධාන ලෝහය මත අවධානය යොමු කිරීමයි, වෝල්ටීයතා නොවේ. අපි වෝල්ටීයතා කටයුතු කළෙමු, එබැවින් ඔබ වැදගත් දේ මත වැඩ කිරීමට නැවත පැමිණිය හැකිය. This article was originally published on the  . Filestack blog Filestack බ්ලොග්

2022 - HackerNoon Contributor of the Year - Api

Learn More

Nominated for 2022 - HackerNoon Contributor of the Year - Api

මෙම ශ්‍රව්‍යය කතාවේ මුල් භාෂාවෙන් නිෂ්පාදනය කර ඇත!

දිග වැඩියි; කියවීමට

Make resilience your competitive advantage

About Author

අදහස්

ටැග් එල්ලන්න

මෙම ලිපිය ඉදිරිපත් කරන ලදී

Related Stories

Meet IONOS: HackerNoon Company of the Week

AN INDIAN'S TREACHERY

Publish Your Next Technology Press Release with HackerNoon

Meet PennyFly Entertainment, Startups of the Year Winner (Malibu, CA)

Meet IONOS: HackerNoon Company of the Week

AN INDIAN'S TREACHERY

Publish Your Next Technology Press Release with HackerNoon

Meet PennyFly Entertainment, Startups of the Year Winner (Malibu, CA)

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps