Si vous construisez n'importe quel type de téléchargement d'image pour un site Web, vous vous rendrez vite compte qu'une entrée de fichier de base n'est pas suffisante. Le moment où un utilisateur essaie de télécharger un fichier de grande taille, l'expérience se brise. Ils cliquent sur "Upload", le navigateur semble pendre, et ils n'ont aucune idée si cela fonctionne ou est cassé. La chose est, en construisant un à partir de zéro est un piège de développeur classique. Il semble simple, mais vous vous trouvez bientôt profondément dans les mauvaises herbes de Objets, auditeurs d'événements et manipulation DOM. C'est une tonne de boilerplate pour une fonctionnalité qui devrait simplement être standard. XMLHttpRequest Passons à travers comment en construire un manuellement, puis je vais vous montrer pourquoi nous nous sommes assurés que vous n'auriez jamais à le faire. Principaux Takeaways 
 
 
 
 
 
 Une barre de progression est essentielle pour une bonne expérience utilisateur dans tout téléchargeur de fichiers moderne. Construire une barre de progrès personnalisée à partir de zéro nécessite JavaScript boilerplate en utilisant XMLHttpRequest son événement upload.onprogress. L'approche manuelle vous oblige à gérer vous-même les mises à jour DOM et les calculs. Une barre de progrès front-end seulement est inutile sans un point final du côté du serveur pour recevoir le fichier, ajoutant plus de complexité. Le sélectionneur Filestack inclut automatiquement une barre de progrès fiable et conçue professionnellement, sans code supplémentaire nécessaire. La méthode manuelle avec Vanilla JavaScript Si vous vouliez construire cette fonctionnalité vous-même, vous devriez utiliser le navigateur (XHR) API. Il vous permet de faire des demandes HTTP et, crucial pour nous, de surveiller le progrès d'un téléchargement. XMLHttpRequest Voici à quoi ressemble cette mise en œuvre, morceau par morceau. 1 - Le HTML Tout d’abord, vous avez besoin d’une entrée de fichier de base et d’un conteneur pour la barre de progression. <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 - Le CSS Ensuite, voici quelques styles simples pour que notre barre de progrès ressemble à un progrès réel. .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;
}
 3 - Le JavaScript Nous devons sélectionner les éléments, écouter un fichier, créer une demande XHR, joindre un écouteur d'événement au l'événement, et de mettre à jour manuellement le 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);
});
 Cela fonctionne, mais regardez la cérémonie. Vous êtes responsable de chaque étape, et nous n'avons même pas touché au bon traitement des erreurs, aux délais, ou au fait que ce code est inutile sans un backend correspondant pour recevoir le fichier. Ce code montre la logique actuelle du front-end pour un téléchargement manuel.Parce qu'il nécessite un serveur pour recevoir le fichier, l'exécution de ce HTML directement provoquera une erreur dans la console de votre navigateur. Cette erreur est un excellent exemple de la complexité cachée du backend que cette approche nécessite. Note: Course politique La méthode simple avec Filestack Maintenant, regardons l’alternative.Quand nous avons conçu le pick-up Filestack, nous avons intégré toutes ces fonctionnalités directement dans celui-ci. Ou écrire un progrès. Il est conçu pour donner aux utilisateurs des commentaires clairs pendant et après le téléchargement. XMLHttpRequest The progress bar is built-in and works automatically. Voici le code complet pour obtenir un puissant téléchargeur d'images pour votre site Web, complet avec une barre de progression, en utilisant 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>
 Vous obtenez un beau téléchargeur plein de fonctionnalités qui montre le progrès détaillé de chaque fichier, et vous avez écrit environ cinq lignes de code significatif pour l'obtenir. Envelopper le L'approche JavaScript manuelle fait le travail, mais c'est une illustration parfaite d'un temps d'attente de développeur. Vous êtes obligé d'écrire un code de boilerplate pour gérer les événements XHR et manipuler le DOM, et c'est juste pour le frontend. Vous devez encore construire et maintenir un endpoint du côté serveur pour réellement recevoir le fichier. Lorsque nous avons construit le pick-up Filestack, nous avons considéré une barre de progrès comme des paris de table, pas une fonctionnalité optionnelle que vous devriez mettre en œuvre vous-même.C'est une exigence fondamentale pour une bonne expérience utilisateur.C'est pourquoi elle est incluse par défaut, ainsi que la gestion des erreurs robuste, les téléchargements multiparts pour les fichiers volumineux et la logique de retry. Votre temps est votre ressource la plus précieuse. Le dépenser pour réappliquer les problèmes résolus est un jeu de perte. Le but est de vous concentrer sur la logique de base de votre application, pas sur le plomberie. This article was originally published on the  . Filestack blog Le blog de Filestack

2022 - HackerNoon Contributor of the Year - Api

Learn More

Nominated for 2022 - HackerNoon Contributor of the Year - Api

Cet audio est produit dans la langue originale de l'histoire !

Trop long; Pour lire

Make resilience your competitive advantage

Une façon simple de construire une barre de progression pour le téléchargement d'images de votre site Web à l'aide de la file stack

About Author

COMMENTAIRES

ÉTIQUETTES

CET ARTICLE A ÉTÉ PARU DANS

Related Stories

Nomades numériques, écoutez : ce que vous devez savoir sur le nouveau visa DTV de la Thaïlande

Comment améliorer votre flux de travail par 10 : 17 applications essentielles

Des forums aux flux : comment les algorithmes des réseaux sociaux façonnent l'interaction numérique

Le guide complet pour réussir une migration vers le cloud : stratégies et bonnes pratiques

Nomades numériques, écoutez : ce que vous devez savoir sur le nouveau visa DTV de la Thaïlande

Comment améliorer votre flux de travail par 10 : 17 applications essentielles

Des forums aux flux : comment les algorithmes des réseaux sociaux façonnent l'interaction numérique

Le guide complet pour réussir une migration vers le cloud : stratégies et bonnes pratiques

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps