web-dev-qa-db-ja.com

Dropzone js angular 4

誰かがangular 2または4を前にしてdropzone Jsライブラリを使用しましたか？有用な例やリンクがある場合は、ありがとう

angulardropzone.js
8
Abdelrahman Hussien

Dropzone用のAngular 5+ラッパーがあります here です。

7
dvlsc

少し遅いかもしれませんが、いくつかの調査の結果、Angular 5を使用してdropzone 5.0.2を作成するための情報が見つかりました。

  • dropzone.jsライブラリをsrc/js/の下に配置します（まだ作成されていない場合は、jsディレクトリを作成します）
  • js/dropzone.jsのスクリプトのリストに.angular-cli.jsonを追加します

  • 説明されているように、 ここ は、angularプロジェクトのルート（.angular-cli.jsonがある場所）のcmd/Shellで次のコマンドを実行します。

    npm install --save @types/dropzone

  • これで、次のようにTypeScriptクラスにドロップゾーンをインポートできます。

    import * as dropzone from 'dropzone';

また、Angularコンポーネント（Angular 2+）として統合することもできます この記事 。

[〜＃〜]警告[〜＃〜]：私はそれをテストしなかったので、おそらく何かが欠けているか間違っています。ようやく別のライブラリを使いました。

3
Aymen Turki

Angularでの使用に最適化されていないため、dropzone.jsにバインドされていない場合は、次のライブラリをお勧めします。

高度にカスタマイズ可能なAngularドラッグアンドドロップ動作を実装するコンポーネントを記述しました。これは、ドロップされたファイルのリストを出力イベントとして返します。
これは here で見つかります。

モジュールをインポートした後、コンポーネントにアクセスできます。

<ngx-dropzone [multiple]="false" [maxFileSize]="2000"></ngx-dropzone>

設定するオプションがいくつかあり、適切なデフォルトのスタイルが設定されています（スクリーンショットはGitHubリポジトリにあります）。必要に応じて、独自のdivコンテナにカスタムスタイルとホバー効果を設定して、それをドロップゾーンに配置することもできます。この詳細については、APIの説明をご覧ください。

<ngx-dropzone [customContent]="customDropzone" (filesDropped)="onFilesDropped($event)">
<ng-template #customDropzone>
    <div class="custom-dropzone">
        This is my custom content
    </div>
</ng-template>
0
Peter Freeman