Om du bygger någon typ av bilduppladdare för en webbplats kommer du snabbt att inse att en grundläggande filinmatning inte räcker. I det ögonblick som en användare försöker ladda upp en stor fil bryts upplevelsen. De klickar på "Upload", webbläsaren verkar hänga, och de har ingen aning om det fungerar eller bryts. Saken är att bygga en från grunden är en klassisk utvecklingsfälla.Det verkar enkelt, men du hittar dig snart djupt i objekt, händelse lyssnare, och DOM manipulation. Det är en ton av värmepanna för en funktion som bara borde vara standard. XMLHttpRequest Låt oss gå igenom hur man bygger en manuellt, och sedan ska jag visa dig varför vi säkerställde att du aldrig skulle behöva. Huvudsakliga takeaways 
 
 
 
 
 
 En framstegsruta är nödvändig för en bra användarupplevelse i någon modern filuppladdare. Att bygga en anpassad progress bar från grunden kräver boilerplate JavaScript med hjälp av XMLHttpRequest dess upload.onprogress händelse. Den manuella metoden tvingar dig att hantera DOM-uppdateringar och beräkningar själv. En frontend-only progress bar är värdelös utan en server-side endpoint för att ta emot filen, vilket lägger till mer komplexitet. Filestack-väljaren innehåller automatiskt en tillförlitlig, professionellt utformad framstegsruta, utan att ytterligare kod krävs. Den manuella metoden med Vanilla JavaScript Om du skulle bygga den här funktionen själv, skulle du behöva använda webbläsarens (XHR) API. Det låter dig göra HTTP-förfrågningar och, avgörande för oss, övervaka utvecklingen av en uppladdning. XMLHttpRequest Här är hur implementeringen ser ut, bit för bit. 1 Om HTML Först behöver du en grundläggande filingång och en behållare för framstegsfältet. <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. den css Nästa, här är några enkla stilar för att göra vår framsteg bar ser ut som om det faktiskt utvecklas. .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;
}
 • För JavaScript Det är här det tråkiga arbetet kommer in. Vi måste välja elementen, lyssna på en fil, skapa en XHR-förfrågan, bifoga en händelse lyssnare till händelse, och manuellt uppdatera 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);
});
 Det fungerar, men titta på ceremonin.Du är ansvarig för varje steg, och vi har inte ens berört korrekt felhantering, tidslinjer, eller det faktum att den här koden är värdelös utan en motsvarande backend för att ta emot filen. Denna kod visar den faktiska frontendlogiken för en manuell uppladdning. Eftersom det kräver en server för att ta emot filen, kör denna HTML direkt kommer att orsaka en Detta fel är ett bra exempel på den dolda backend-komplexiteten som detta tillvägagångssätt kräver. Note: Kurspolitik Det enkla sättet med Filestack Låt oss nu titta på alternativet.När vi designade Filestack pickern byggde vi in all den funktionaliteten direkt i den. Eller skriva en progress handledare. Den är utformad för att ge användare tydlig feedback under och efter uppladdningen. XMLHttpRequest The progress bar is built-in and works automatically. Här är den fullständiga koden för att få en kraftfull bilduppladdare för din webbplats, komplett med en progress bar, med 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>
 Du får en vacker, fullfjädrad uppladdare som visar detaljerat framsteg för varje fil, och du skrev ungefär fem rader av meningsfull kod för att få det. Wrapping upp Den manuella JavaScript-metoden gör jobbet, men det är en perfekt illustration av en utvecklartidssink.Du är tvungen att skriva boilerplate-kod för att hantera XHR-händelser och manipulera DOM, och det är bara för frontend.Du måste fortfarande bygga och underhålla en server-side-ändpunkt för att faktiskt få filen. När vi byggde Filestack-pickern ansåg vi att en framstegsruta skulle vara tabellspel, inte en valfri funktion som du borde implementera själv. Det är ett grundläggande krav för en bra användarupplevelse. Din tid är din mest värdefulla resurs. Att spendera den på att reimplementera lösta problem är ett förlorande spel. Målet är att fokusera på din applikations kärnlogik, inte på ledningen. This article was originally published on the  . Filestack blog Arkiv för Filestack Blog

2022 - HackerNoon Contributor of the Year - Api

Learn More

Nominated for 2022 - HackerNoon Contributor of the Year - Api

Det här ljudet är producerat på berättelsens originalspråk!

För länge; Att läsa

Make resilience your competitive advantage

Ett enkelt sätt att bygga en framstegsruta för din webbplatss bilduppladdare med Filestack

About Author

KOMMENTARER

HÄNG TAGGAR

DENNA ARTIKEL PRESENTERAS I

Related Stories

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps