イージー★Up!

Webアプリで使える
ファイルコントロール

デモはこちら
ビューアー
ドラッグ & ドロップ
アップロード & ダウンロード
プレビュー
レスポンシブ
ピュア javascript

イージー★Up!とは

Webフロントエンドの添付ファイルコントロールです。
バックエンドAPIと連携して、お手持ちのWebアプリに取付けできます。

・Drag&Dropによる複数ファイルの添付
・Drag&Dropによるダウンロード(ChromeとEdgeのみ)
・ZIPによる一括ダウンロード
・削除
・簡易プレビュー
・各種添付制限
・ソート スクロール
・同一ファイル名の上書き添付
・ロケールに合わせた日本語-英語表記切替え
・レスポンシブ対応
 など

標準コントロール(input type="file")に比べ、便利な機能を搭載しています。
素のjavascriptで実装しているので、ライブラリ・フレームワークに依存しません。

インターフェース

リスト表示

グリッド表示

ドラッグ&ドロップ

ファイル選択ダイアログ

一括ダウンロード

省略時

ロケール:英語

PDFプレビュー

画像プレビュー

動画プレビュー

機能一覧

No 内容
添付ファイルのリスト表示とグリッド表示 アイコン/名前/日付/サイズ
ドラッグ&ドロップによる複数ファイルの登録 (スマートフォン タブレットでは一部未対応のOSあり)
ファイル選択ダイアログからの複数ファイルの登録 (使用するブラウズ機能により単独ファイルの場合あり)
ファイルのアップロード
ファイルのダウンロード
選択ファイルの一括ダウンロード(ZIP)
削除ボタンによる添付ファイルの削除
同一ファイル名の上書き
アイコンクリックによるプレビュー(ファイルをダウンロード&保存せず表示)
・画像(表示可能なファイル種別はブラウザに依存)
・動画/音楽ファイルの再生 (再生可能なメディアフォーマットはブラウザに依存)
・PDF (モバイル端末は先頭ページのみ表示等機種依存あり)
・プレーンテキスト(ASCII JIS SJIS EUC-JP UTF-8 UTF-16)
編集モードと表示モードの切替
添付ファイル表示エリア 展開・省略切替
添付ファイルURLリンク クリップボードコピー (全添付ファイルの名前とURLパスのセット)
添付ファイル 名前 日付 サイズヘッダクリックによる 昇順 降順 切替
拡張子毎にまとめて表示するか否かの切替
添付ファイル数・サイズの合計表示
スクロールバーの表示・非表示(全添付ファイルの表示)切替
拡張子 / ファイル数 /合計ファイルサイズ による添付制限
表示属性(表示タイプ 一覧表示行数 スクロール有無 ソート 添付ファイル表示エリア展開・省略指定)のブラウザ起動時の初期値指定
ブラウザを終了するまで上記表示属性の保持 (ページ遷移などで初期値に戻さない)
ブラウザ言語設定(ロケール)による英語・日本語の切り替え
バックエンドAPI 送信タイミングの指定(保持モード・即時モード)

実装

バックエンド

バックエンドに、3つのAPIを用意します。

No 内容
バックエンドのファイル情報を、所定のJSON形式でイージー★Up!に引き渡すAPI。(必須)
イージー★Up!からファイルの追加・削除情報を、所定のmultipart/form-dataで受信し、ファイル生成と削除を行うAPI。(必須)
イージー★Up!から一括ダウンロードを行うファイル名リストを受信し、ZIPファイルの生成とダウンロードを行います。(任意)

フロントエンド

javascriptにて、イージー★Up!を生成します。

No 内容
イージー★Up!作成メソッドを呼び出し、指定のHTML要素に展開します。
バックエンドAPIへの送信タイミングを指定します。
① 保持モード - ファイル添付・削除確定のトリガ(例.保存ボタン)で、ファイル送信メソッドを呼び出し、バックエンドと連携します。
② 即時モード - ファイル添付・削除の都度、バックエンドと連携します。

DEMO

文書管理をイメージした、関連資料を添付するデモです。
実際に操作をお試しください。

ご使用後は、自分が作成した文書の削除をお願い致します。
また個人情報が含まれるファイルは、添付しないように配慮ください。

デモはこちら
Image

対応ブラウザ

Windows

Google Chrome 最新版
Mozilla Firefox 最新版
Microsoft Edge 最新版

Android

Google Chrome 最新版

macOS iOS(14.1以上)

Google Chrome 最新版
Safari 最新版