Uppy

3ステップで試す

1. 1

   Uppyの動作確認用ディレクトリを作る

   本番向けのpackage構成とは分けて、公式CDN配布版を試すための空ディレクトリを用意します。

   demo=$(mktemp -d "${TMPDIR:-/tmp}/uppy.XXXXXX") && cd "$demo"コピー
2. 2

   Dashboardだけを表示する最小HTMLを作る

   README記載のv6.0.4配布版からCoreとDashboardを読み込み、アップロード先を設定せずファイル選択UIだけを確認します。

   printf "%s\n" '<!doctype html>' '<meta charset="utf-8">' '<link href="https://releases.transloadit.com/uppy/v6.0.4/uppy.min.css" rel="stylesheet">' '<div id="files-drag-drop"></div>' '<script type="module">' "import { Uppy, Dashboard } from 'https://releases.transloadit.com/uppy/v6.0.4/uppy.min.mjs';" "const uppy = new Uppy();" "uppy.use(Dashboard, { target: '#files-drag-drop', inline: true });" '</script>' > index.htmlコピー
3. 3

   ブラウザでHTMLを開いてDashboardを確認する

   index.htmlをブラウザで開き、ドラッグ＆ドロップとファイル選択用のDashboardが表示されることを確認します。CDN配布版は最小確認用で、本番では必要なpackageだけ導入します。

   index.htmlコピー

Built with

• TypeScript
• JavaScript

カテゴリとタグ

GitHubデータ

このOSSの使い方や活用事例をMarkdownで投稿できます。管理者が承認した後に公開されます。

あわせて探訪

• SweetAlert218,098 Stars

  共通タグ 4件

  alert・confirm・promptをWAI-ARIA対応のpopupへ置き換え、Promiseで結果を受け取る

  JavaScript
• Tippy.js12,240 Stars

  共通タグ 4件

  tooltip・popover・dropdownをPopperベースで配置し、hover・focus・click操作へ追加する

  JavaScript
• melonJS6,401 Stars

  共通タグ 4件

  WebGPU・WebGL 2・Canvasを同じAPIで扱い、ブラウザ向け2D／2.5Dゲームを組み立てるエンジン

  JavaScript
• Ant Design99,682 Stars

  共通タグ 3件 · 同じ言語

  enterprise向けReact UIを完成済みcomponents・design token・theme機構で統一し、管理画面や業務画面を素早く構築する

  TypeScript
• Tailwind CSS97,773 Stars

  共通タグ 3件 · 同じ言語

  ユーティリティクラスをHTMLやコンポーネントで組み合わせ、必要なCSSをビルド時に生成する

  TypeScript
• Playwright97,099 Stars

  共通タグ 3件 · 同じ言語

  Chromium・Firefox・WebKitを一つのAPI/Test runnerで操作し、E2E test・script・agent browser automationを実行する

  TypeScript