Kung ikaw ay bumuo ng anumang uri ng image uploader para sa isang website, ikaw ay mabilis na makikita na ang isang pangunahing file input ay hindi kapaki-pakinabang. Ang oras ng isang gumagamit ay nag-upload ng isang malaking file, ang karanasan ay tumuturo. sila ay i-click "Upload," ang browser ay nagpapakita ng hangin, at sila ay walang ideya kung ito ay gumagana o na-broken. Ito ay ang eksaktong oras na makikita mo na kailangan mo ng isang progression bar. Ang bagay na ito ay, bumuo ng isang mula sa loob ay isang classic developer trap. It seems straightforward, but you soon find yourself deep in the weeds of... Objects, event listeners, at DOM manipulation. Ito ay isang ton ng boilerplate para sa isang tampok na dapat lamang maging standard. XMLHttpRequest Pumunta kami sa pamamagitan ng kung paano bumuo ng isang manually, at pagkatapos ay ipakita ko sa iyo kung bakit sigurado namin na hindi mo kailangang gawin. Mga Key Takeaways 
 
 
 
 
 
 Ang isang progress bar ay kinakailangan para sa isang mahusay na user experience sa anumang modernong file uploader. Pagbuo ng isang custom progress bar mula sa zero ay nangangailangan ng boilerplate JavaScript gamit XMLHttpRequest ang kanyang upload.onprogress event. Ang manual na paraan ay inihahanda sa iyo upang i-manage ang mga update at pag-calculations ng DOM ang iyong sarili. Ang isang front-end-only progression bar ay hindi gumagana nang walang isang server-side endpoint upang makakuha ng ang file, na magdagdag ng higit pa ng kompleksidad. Ang Filestack picker ay automatic na naglalaman ng isang reliable, propesyonal na disenyo progression bar, na walang pangunahing code na kinakailangan. Ang manual na paraan sa Vanilla JavaScript Kung ikaw ay upang bumuo ang feature na ito sa iyong sarili, kailangan mong gamitin ang browser (XHR) API. Ito ay nagbibigay-daan sa iyo upang gumawa ng HTTP requests at, crucial para sa amin, monitor ang progreso ng isang upload. XMLHttpRequest Ito ay kung ano ang implementation na nakikita, piece by piece. 1. ang HTML Kailangan mo ng isang pangunahing file input at isang container para sa 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>
 ang css Next, dito ang ilang mga simpleng mga estilo upang gawin ang aming progression bar makikita na ito ay nagtatapos. .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-download ang JavaScript Ito ay kung saan ang karaniwang trabaho ay dumating sa. Kailangan namin upang piliin ang mga elemento, makinig sa isang file, lumikha ng isang XHR request, pag-atake ng isang event listener sa Pagkatapos, i-update ang DOM at i-update ang 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);
});
 Ito ay gumagana, ngunit tingnan ang seremonya. Ikaw ay responsibilidad para sa bawat step, at hindi namin kahit na nakikipag-usap sa parehong paghahatid ng mga error, timeouts, o ang katotohanan na ang code na ito ay hindi gumagana nang walang isang katumbas na backend upang makakuha ng ang file. Ang code na ito ay nagpapakita ng tunay na logic ng frontend para sa isang manual na pag-upload. Dahil ito ay nangangailangan ng isang server upang makakuha ng ang file, ang pag-execute ng HTML na ito ay direktang magiging sanhi ng isang ang error sa console ng iyong browser. Ang error na ito ay isang mahusay na halimbawa ng masasaktan backend complexity na ito ay nangangailangan. Note: Mga politika Ang Simple Way sa Filestack Pero kapag nalaman niyang nakilala mo siya dahil binasa mo ang diary... get ready for the consequences. o magkaroon ng isang progression manager. Ito ay dinisenyo upang magbigay ng mga gumagamit ng clear feedback sa panahon at pagkatapos ng pag-upload. XMLHttpRequest The progress bar is built-in and works automatically. Narito ang buong code upang makakuha ng isang malakas na image uploader para sa iyong website, kumpletong may isang progress bar, gamit ang 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>
 That's it. That's the entire implementation. You get a beautiful, full-featured uploader that shows detailed progress for each file, at you wrote about five lines of meaningful code to get it. We handle the rest. nagtatapos sa UP Ang manual na pagsusuri ng JavaScript ay gumagawa ng trabaho, ngunit ito ay isang perpekto na ilustrasyon ng isang developer time sink. You're forced to write boilerplate code to manage XHR events and manipulate the DOM, at ito lamang para sa frontend. You still have to build and maintain a server-side endpoint to actually receive the file. Kapag nilikha namin ang Filestack picker, tinatanggap namin na ang isang progress bar ay mga table stakes, hindi isang optional na tampok na kailangan mo upang i-implementate ang iyong sarili. Ito ay isang pangunahing kinakailangan para sa isang mahusay na karanasan ng gumagamit. Ito ang dahilan kung bakit ito ay kasama sa default, kasama ang malakas na pagproseso ng mga error, multipart uploads para sa mga malaking mga file, at retry logic. Ang iyong oras ay ang iyong pinaka-karaniwang resource. Paggamit nito upang i-reploy ang mga problema ay isang losing game. Ang target ay mag-focus sa core logic ng iyong application, hindi ang plumbing. This article was originally published on the  . Filestack blog Mga Blog

2022 - HackerNoon Contributor of the Year - Api

Learn More

Nominated for 2022 - HackerNoon Contributor of the Year - Api

Ang audio na ito ay ginawa sa orihinal na wika ng kuwento!

Masyadong mahaba; Upang basahin

Make resilience your competitive advantage

Ang isang simpleng paraan upang bumuo ng isang progress bar para sa iyong website's image uploader gamit ang Filestack

About Author

MGA KOMENTO

HANG TAGS

ANG ARTIKULONG ITO AY IPINAKITA SA

Related Stories

Hosting a DNS domain on the blockchain

Getting intimate with Ethereum tokens

COVID-19: We Need More Than Data, We Need Insights!

How I deployed my spark document classification(Logistic Regression) model/s as a standalone app…

Hosting a DNS domain on the blockchain

Getting intimate with Ethereum tokens

COVID-19: We Need More Than Data, We Need Insights!

How I deployed my spark document classification(Logistic Regression) model/s as a standalone app…

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps