あなたがウェブサイトのための画像アップロードを構築している場合、あなたはすぐに基本的なファイル入力が十分ではないことに気付くでしょう. ユーザーが大きなファイルをアップロードしようとしている瞬間、経験は壊れます. 彼らは「アップロード」をクリックし、ブラウザが掛かっているように見えるし、それが動作しているか壊れたかどうかを知らない。 問題は、ゼロからの構築は、古典的な開発者ののように見えるが、あなたはすぐに自分自身を悪草の奥深くに オブジェクト、イベントオーディエンス、およびDOM操作. それは単に標準であるべき機能のためのボイラープレートのトンです。 XMLHttpRequest 手動で1つを構築する方法を歩いてみましょう、そして私はあなたが決して必要としないことを確認した理由をあなたに示します。 Key Takeaways 
 
 
 
 
 
 パフォーマンスバーは、あらゆる現代のファイルアップロードの良いユーザー体験に不可欠です。 ゼロからのカスタマイズされた進捗バーを構築するには、XMLHttpRequest の upload.onprogress イベントを使用して boilerplate JavaScript が必要です。 マニュアルアプローチは、DOMの更新と計算を自分で管理するように強制します。 フロントエンドのみのプロセスバーは、ファイルを受信するサーバー側のエンドポイントなしでは役に立たないため、より複雑さを加えます。 Filestack ピッカーには、信頼性の高いプロフェッショナルなプロセスバーが自動的に含まれており、追加のコードは必要ありません。 The Manual Method with Vanilla JavaScript(ヴァニラJavaScript) あなたがこの機能を自分で構築するなら、あなたはブラウザの機能を使用する必要があります。 (XHR) API. それはあなたがHTTPリクエストを作成し、私たちにとって重要なことは、アップロードの進行を監視することを可能にします。 XMLHttpRequest こちらは、その実装がどう見えるか、パーツごとに。 1.HTML まず、基本的なファイル入力と進捗バーのコンテナが必要です。 <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.CSS 次に、私たちの進捗バーが実際に進行しているように見えるようにするためのいくつかの簡単なスタイルがあります。 .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.JavaScript 私たちは要素を選択し、ファイルに耳を傾け、XHRリクエストを作成し、イベントオーディオを接続する必要があります。 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);
});
 あなたは各ステップの責任者であり、正しいエラー処理、タイムアウト、またはこのコードがファイルを受け取るために適切なバックエンドなしに役に立たないという事実さえ触れていません。 このコードは、手動でアップロードするための実際のフロントエンドの論理を示しています. Because it requires a server to receive the file, running this HTML directly will cause a このエラーは、このアプローチが必要とする隠れたバックエンドの複雑さの素晴らしい例です。 Note: コース政策 The Simple Way with Filestack(ファイルスタック) 次に、代替案を見てみましょう. Filestack ピッカーを設計したとき、その機能をすべて直接それに組み込んだのです. You don't need to create a Filestack pick. あるいは、進歩手法を書く。 これは、アップロード中におよびアップロード後にユーザーに明確なフィードバックを与えるように設計されています。 XMLHttpRequest The progress bar is built-in and works automatically. あなたのウェブサイトのために強力な画像アップロードを取得するための完全なコードは、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>
 それが実装全体です. あなたはそれぞれのファイルの詳細な進捗状況を示す美しい、フル機能のアップロードを取得し、それを得るために意味のあるコードの約5行を書きました。 Wrapping Up 手動のJavaScriptアプローチは作業を完了しますが、それは開発者のタイムスインクの完璧なイラストです. あなたはXHRイベントを管理し、DOMを操作するためにボイラープレートコードを書く必要があり、それはフロントエンドのためだけです. あなたはまだファイルを実際に受信するためにサーバー側のエンドポイントを構築し、維持する必要があります. これらはすべて進捗バーのために。 Filestack ピッカーを構築したとき、プロセス バーはテーブル ストックではなく、あなたが自分で実装する必要があるオプションの機能であると考えました。それは良いユーザー エクスペリエンスのための基本的な要件です。 あなたの時間はあなたの最も貴重な資源です。解決した問題の再実装に費やすことは負けのゲームです。目標は、あなたのアプリケーションのコアロジクスに焦点を当てることです。 This article was originally published on the  . Filestack blog Filestack ブログ

2022 - HackerNoon Contributor of the Year - Api

Learn More

Nominated for 2022 - HackerNoon Contributor of the Year - Api

このオーディオは、ストーリーの元の言語で制作されています。

Filestackを使用してあなたのウェブサイトの画像アップロードのプロセスバーを構築する簡単な方法

About Author

コメント

ラベル

この記事は

Related Stories

AI/ML データレイクのリファレンスアーキテクチャを構築するためのアーキテクトガイド

AI の力を解き放つ。最先端技術の体系的レビュー: 概要と序論

目に見えない層: ユーザーインタビューがかけがえのない資産である理由

Claude Sonnet 3.5 システムプロンプトの漏洩: 法医学的分析

AI/ML データレイクのリファレンスアーキテクチャを構築するためのアーキテクトガイド

AI の力を解き放つ。最先端技術の体系的レビュー: 概要と序論

目に見えない層: ユーザーインタビューがかけがえのない資産である理由

Claude Sonnet 3.5 システムプロンプトの漏洩: 法医学的分析

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps