Dacă construiți orice tip de încărcător de imagini pentru un site web, veți realiza rapid că o intrare de fișier de bază nu este suficientă. În momentul în care un utilizator încearcă să încarce un fișier mare, experiența se rupe. Ei fac clic pe "Încarcă", browserul pare să se agățească și nu au nicio idee dacă funcționează sau este rupt. Acesta este exact momentul în care îți dai seama că ai nevoie de o bară de progres. Lucrul este, construirea unuia de la zero este o capcană clasică pentru dezvoltatori. obiecte, ascultători de evenimente și manipulare DOM. Este o tonă de boilerplate pentru o caracteristică care ar trebui să fie standard. XMLHttpRequest Să trecem prin cum să construim unul manual, iar apoi vă voi arăta de ce ne-am asigurat că nu va trebui niciodată. Principiul Takeaways 
 
 
 
 
 
 O bară de progres este esențială pentru o experiență bună a utilizatorului în orice încărcător de fișiere modern. Construirea unei bare de progres personalizate de la zero necesită boilerplate JavaScript folosind XMLHttpRequest evenimentul său upload.onprogress. Abordarea manuală vă obligă să gestionați singur actualizările și calculele DOM. O bara de progres numai front-end este inutilă fără un punct final de partea serverului pentru a primi fișierul, adăugând mai multă complexitate. Pick-ul Filestack include automat o bară de progres de încredere, proiectată profesional, fără a fi necesar un cod suplimentar. Metoda manuală cu Vanilla JavaScript Dacă ați construi această caracteristică singur, va trebui să utilizați browser-ul (XHR) API. Vă permite să faceți solicitări HTTP și, crucial pentru noi, să monitorizați progresul unei încărcări. XMLHttpRequest Iată cum arată această implementare, bucată de bucată. 1 din HTML În primul rând, aveți nevoie de o intrare de fișier de bază și de un container pentru bara de progres. <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. în css Apoi, iată câteva stiluri simple pentru a face ca bara noastră de progres să pară că progresează de fapt. .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;
}
 Întrebare: JavaScript Trebuie să selectăm elementele, să ascultăm un fișier, să creăm o cerere XHR, să atașăm un ascultător de evenimente la Eveniment, și actualizarea manuală a 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);
});
 Acest lucru funcționează, dar uitați-vă la ceremonie. Sunteți responsabil pentru fiecare pas, și nu am atins nici măcar gestionarea corectă a erorilor, timelapse, sau faptul că acest cod este inutil fără un backend corespunzător pentru a primi fișierul. Deoarece necesită un server pentru a primi fișierul, executarea directă a acestui HTML va provoca o Această eroare este un exemplu excelent al complexității ascunse de backend pe care această abordare o necesită. Note: Politică de curs Calea simplă cu Filestack Acum, să ne uităm la alternativă.Când am proiectat selectorul Filestack, am construit toată această funcționalitate direct în el. sau de a scrie un progres. Acesta este conceput pentru a oferi utilizatorilor feedback clar în timpul și după încărcare. XMLHttpRequest The progress bar is built-in and works automatically. Iată codul complet pentru a obține un încărcător de imagini puternic pentru site-ul dvs., completat cu o bară de progres, folosind 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>
 Aceasta este întreaga implementare. obțineți un încărcător frumos, cu caracteristici complete care arată progresul detaliat pentru fiecare fișier, și ați scris aproximativ cinci linii de cod semnificativ pentru a-l obține. Îmbrăcăminte Abordarea manuală JavaScript face treaba, dar este o ilustrație perfectă a unei perioade de timp a dezvoltatorului. Sunteți forțați să scrieți codul boilerplate pentru a gestiona evenimentele XHR și a manipula DOM-ul, și asta este doar pentru frontend. Când am construit selectorul Filestack, am considerat că o bară de progres ar trebui să fie pariuri de masă, nu o caracteristică opțională pe care ar trebui să o implementați singur. Este o cerință fundamentală pentru o experiență bună a utilizatorului. Timpul dvs. este cea mai valoroasă resursă. Cheltuirea acestuia pentru reimplementarea problemelor rezolvate este un joc de pierdere. Scopul este de a vă concentra pe logica de bază a aplicației dvs., nu pe alimentarea cu apă. Am gestionat alimentarea cu apă, astfel încât să puteți reveni la lucru pe ceea ce contează. This article was originally published on the  . Filestack blog Filed under Bloguri

2022 - HackerNoon Contributor of the Year - Api

Learn More

Nominated for 2022 - HackerNoon Contributor of the Year - Api

Acest audio este produs în limba originală a poveștii!

Prea lung; A citi

Make resilience your competitive advantage

O modalitate simplă de a construi o bară de progres pentru încărcătorul de imagini al site-ului dvs. folosind Filestack

About Author

COMENTARII

Etichete suspendate

ACEST ARTICOL A FOST PREZENTAT IN

Related Stories

How Soon Can Google Investors Make Bank?

The Spacecoin Writing Contest by Spacecoin and HackerNoon: Round 1 Results 🎉

The TechBeat: Apple Customers Return Vision Pro By The Droves (2/26/2024)

The #bitcoin Writing Contest by Rootstock and HackerNoon: Round 1 Results 🎉

How Soon Can Google Investors Make Bank?

The Spacecoin Writing Contest by Spacecoin and HackerNoon: Round 1 Results 🎉

The TechBeat: Apple Customers Return Vision Pro By The Droves (2/26/2024)

The #bitcoin Writing Contest by Rootstock and HackerNoon: Round 1 Results 🎉

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps