Uma uye ukwakha noma iyiphi isithombe uploader for a website, uzothola ngokushesha ukuthi isicelo esisodwa ifayela akufanele. I imizuzu umsebenzisi isixazululo ukulanda ifayela elikhulu, ukucubungula. Bhalisa "Upload", isibuyekezo likhula, futhi akufanele akufanele ukuba isebenza noma esithile. Lokhu kwimizuzu esifanele ukuthi uzothola ukuthi unemibuzo yokuphakama. Indawo kuyinto, ukwakha omunye ukusuka kwangaphakathi kuyinto classic developer trap. Kuboniswa ngokuphathelene, kodwa ngokushesha uzothola ngokuphathelene emangalisayo izicathulo, ama-event listeners, kanye ne-dom manipulation. It is a ton of boilerplate for a feature that should just be standard. XMLHttpRequest Thola thwebula kanjani ukwakha umzimba, futhi ngemuva kwalokho ngibonisa ukuthi sizothintela ukuthi akufanele akufanele. Ukubuyekezwa 
 
 
 
 
 
 I-progress bar iyimfuneko yokufakelwa kwamakhasimende enhle emkhakheni ye-file uploader. Ukwakhiwa kwe-custom progress bar ukusuka kwangaphakathi kufuneka i-boilerplate JavaScript usebenzisa i-XMLHttpRequest ye-upload.onprogress event. Ukufinyelela okuzenzakalelayo kuvimbela ukulawula ukuhlaziywa kwe-DOM kanye ne-calculations ngokuvamile. I-frontend-only progress bar iyatholakala ngaphandle kwe-endpoint ye-server-side yokuthumela ifayela, okwenza kube lula kakhulu. I-Picker ye-Filestack iyatholakala ngokuzenzakalelayo nge-progress bar eyenziwe ngempumelelo, ngaphandle kokuchofoza okwengeziwe. Ukusebenza kwe-Manual Method With Vanilla JavaScript Uma uye ukwakha le feature wena, kufanele usebenzisa isixhobo se-browser (XHR) API. Uyakwazi ukwenza imibuzo ye-HTTP futhi, okungenani kakhulu kwethu, ukulawula ukuthuthukiswa kwe-upload. XMLHttpRequest Ngiyazi ukuthi ukulungiselela kubonakala, ingxenye ngalinye. 1. Ukusebenza kwe-HTML Okokuqala, kufanele uxhumane ifayela esisodwa kanye ne-container ye-progress bar. <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. I-CSS Okulandelayo, lapha izindlela eziningana ezivamile zokwenza ibhande lethu lokuphendula kubonakala njengokuthuthukiswa. .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;
}
 I-JavaScript Yomphakathi Kuyinto lapho umsebenzi enhle kuqala. Thina ukhethe izinto, ukulandela ifayela, ukwakha isicelo se-XHR, ukulandela umbhali we-event umkhosi, futhi manually update DOM. 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);
});
 Kuyinto ukusebenza, kodwa bheka umkhosi. Uyazi zonke izinyathelo, futhi thina akuyona ukulawula imiphumela efanele, timeouts, noma inkinga ukuthi le ikhodi ayinempumelelo ngaphandle kwe-backend efanelekayo ukufumana ifayela. Lokhu kuyinto nje uhlobo lokusebenza esizayo sikholelwa ukuthi kufanele akuyona. Kuyinto ikhowudi ibonisa logic ephelele frontend for a manual upload. Njengoba kufuneka i-server ukufumana ifayela, ukusebenza lokhu HTML ngqo uzodinga a ingxaki ku-console ye-browser yakho. Le ngxaki kuyinto isibonelo esihle sokubambisana esifundeni esifundeni esifundeni esifundeni esifundeni. Note: Ukucubungula The Simple Way nge Filestack Ngaphezu kwalokho, thina ucwaningo lwezinhlangano. Lapho thwebula i-Filestack picker, thina ukwakha zonke izici zayo ngqo ku-Filestack. Unemibuzo yokwenza isikhwama noma ubhalise umphathi we-progress. It yenzelwe ukunikela abasebenzisi imibuzo esifanele ngesikhathi futhi ngemuva kokufaka. XMLHttpRequest The progress bar is built-in and works automatically. Ngiyazi ikhowudi ephelele yokufaka i-image uploader enhle yewebhu yakho, ephelele nge-progress bar, usebenzisa i-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>
 Kuyinto. Kuyinto isicelo ephelele. Uphumela i-uploader enhle enhle enikeza imiphumela enhle ye-file ngamunye, futhi uqhagamshelane cishe amayunithi angu-5 ye-code enhle yokufinyelela. Thina siphinde. Ukuhlobisa Umgangatho we-JavaScript wokwenza umsebenzi, kodwa kuyinto isithombe ephelele sokukhishwa kwe-time sink ye-developer. Uyaziwa ukudala ikhodi ye-boilerplate ukulawula iziganeko ze-XHR kanye nokushintshwa kwe-DOM, futhi lokhu kuphela ye-frontend. Uyazi ukwakha nokuthuthukiswa kwe-endpoint ye-server ukuze ngokuvamile ufike ifayela. Yonke oku kunazo ku-progress bar. Uma sethu i-Picker ye-Filestack, sincoma i-progress bar ukuba iyatholakala embhedeni, futhi akuyona umphini wokufaka ukuthi kufanele usebenzise ngokuvamile. Kuyinto isidingo esiyingqayizivele yokufakelwa kwamakhasimende enhle. Ngakho-ke kuhlanganiswe ngokuvamile, kanye ne-error handling enhle, ukulayishwa kwezinhlayiya eziningana kumadokhumenti amakhulu, kanye ne-retry logic. I-time yakho kuyinto impahla yakho enhle kakhulu. Ukusabalalisa ukuguqulwa kwama-problems ezisungulwe kuyinto umdlalo wokugaya. Umthombo wokusekelwe ku-logic core ye-application yakho, ngaphandle kwe-plumbing. Thina ukulawula i-plumbing ukuze ungakwazi ukufinyelela ekusebenzeni kwalo enhle. This article was originally published on the  . Filestack blog Ikhaya Blog

2022 - HackerNoon Contributor of the Year - Api

Learn More

Nominated for 2022 - HackerNoon Contributor of the Year - Api

Lo msindo ukhiqizwa ngolimi lokuqala lwendaba!

Kude kakhulu; Uzofunda

Make resilience your competitive advantage

Indlela Elula Ukwakha I-Progress Bar ye-Image Uploader ye-Website yakho Usebenzisa i-Filestack

About Author

IMIBONO

HANG TAGS

LESI SIHLOKO SETHULWE NGAPHAKATHI

Related Stories

The Billionaires F*cked Up

Zulu Network: Moving The Bitcoin Economy Forward With a Two-Tiered Bitcoin Layer 2 Architecture

The Billionaires F*cked Up

Zulu Network: Moving The Bitcoin Economy Forward With a Two-Tiered Bitcoin Layer 2 Architecture

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps