DropzoneJS

Question

一般的な質問：私はそれが私のテーブルレイアウトを台無し要素に包まれ、デフォルトでだテーブルの全幅を埋めるために、私のドロップゾーンに追加された行を取得できますか

。

説明：

私はテーブル形式でアップロードされたファイルを表示するためにDropzoneJSを取得しようとしています。私のDropzoneが正しくテーブルにありますが、プレビューテンプレートを正しく表示することができません。すべての まず、ドロップゾーンが<td></td>要素にファイルを追加することはできませんので、問題が発生するので、私はこの使用してCSS

<div class="div-tr"> 
    <div class="div-td"></div> 
    <div class="div-td"></div> 
</div> 

私の目標は、どのDropzoneJSにpreviewTemplateを追加することがあるようなテーブルのレイアウトフォーマットに私のテーブルを変換しました問題は、デフォルトでドロップゾーンがpreviewTemplateで<div>にクラスdz-processing dz-image-preview dz-error dz-successのセットを追加することにある

<div class="div-tr"> 
    <div class="div-td"> 
     <i class="fa fa-file-o"></i> 
    </div> 
    <div class="div-td"> 
     <div class="dz-filename"> 
      <span data-dz-name></span> 
     </div> 
    </div> 
    <div class="div-td"> 
     <div class="dz-size" data-dz-size></div> 
    </div> 
    <div class="div-td"> 
     <div class="dz-progress"> 
      <span class="dz-upload" data-dz-uploadprogress></span> 
     </div> 
    </div> 
    <div class="div-td"> 
     <div class="dz-success-mark"> 
      <span>✔</span> 
     </div> 
     <div class="dz-error-mark"> 
      <span>✘</span> 
     </div> 
    </div> 
</div> 

次のようになります。ドキュメントによれば、それらは class="dz-preview"で <div>に追加されますが、そのクラスが存在するかどうかにかかわらず、そのプレビューテンプレートが注入されるコンテナの最初の内部要素として追加されます。 これは、previewTemplate 、、テーブルの行であると考え、それは性質だ失って、今だけ余分 <div>行のインナーラップが追加されることがあるため、これが起こる最初 <div class="div-td">

+-------------+--------------+-----------+----------+ 
|    |    |   |   | Existing row 
+-------------+--------------+-----------+----------+ 
|    |    |   |   | Existing row 
+-------------+--------------+-----------+----------+ 
|    |    |   |   | Existing row 
+-------------+--------------+-----------+----------+ 
|    |    |   |   | Existing row 
+-------------+--------------+-----------+----------+ 
| | | | |           Row added by upload 
+---+---+--+--+ 

の幅で示しました。テーブルの

私のCSSレイアウトのために、この

/* DIV table style */ 

.div-table{ 
    display: table; 
    width: 100%; 
    background-color: #fff; 
} 
.div-tr{ 
    display: table-row; 
} 
.div-th, .div-td { 
    display: table-cell; 
    padding: 8px 15px; 
    border-bottom: 1px solid #eaeff0; 
    vertical-align: middle; 
} 
.div-thead{ 
    display: table-header-group; 
    font-weight: bold; 
} 
.div-tfoot{ 
    display: table-footer-group; 
    font-weight: bold; 
    background-color: #fff; 
} 
.div-tbody{ 
    display: table-row-group; 
} 

ドキュメントがここに発見されたようになっていますhttp://www.dropzonejs.com/#layout

CSSを変更したり、JSが評価されてのためにすべてのヘルプ。

Answer 1

プレビューテンプレートを希望どおりにカスタマイズすることができます。この場合は、クラスとクラスを必要に応じてプレビュー要素に追加するだけです。http://www.dropzonejs.com/#themingここで

はドロップゾーンテンプレートをオーバーライドする方法の例です：

HTML：

<div class="dropzone" id="myDropzone"></div> 

    <div class="dropzone-previews div-table"></div> 

    <div id="preview-template" style="display: none;"> 
     <div class="dz-preview dz-file-preview div-tr"> 
      <div class="dz-details"> 
       <div class="dz-filename div-td"><span data-dz-name></span></div> 
       <div class="dz-size div-td" data-dz-size></div> 
       <div class="dz-image div-td"> 
        <img data-dz-thumbnail /> 
       </div> 
      </div> 
      <div class="dz-progress div-td"><span class="dz-upload" data-dz-uploadprogress></span></div> 
      <div class="div-td"> 
       <div class="dz-success-mark"><span>✔</span></div> 
       <div class="dz-error-mark"><span>✘</span></div> 
      </div> 
      <div class="dz-error-message div-td"><span data-dz-errormessage></span></div> 
     </div> 
    </div> 

JS：

Dropzone.options.myDropzone = { 
    previewsContainer: ".dropzone-previews", 
    previewTemplate: document.getElementById('preview-template').innerHTML, 
    url: 'upload.php', 
    init: function() { 
     this.on('success', function(file){ 
      var errordiv = document.getElementsByClassName('dz-error-mark'); 
      errordiv[errordiv.length - 2].style.display = 'none'; // The -2 is because there is also one in the preview-template 
     }); 
     this.on('error', function(file){ 
      var succesdiv = document.getElementsByClassName('dz-success-mark'); 
      succesdiv[succesdiv.length - 2].style.display = 'none'; 
     }); 
    } 
} 

注あなただけですることができますテーブルを使用したい場合は、そのプレビューの要素を<td>と<tr>にラップし、divの代わりにpreviewsContainerという表を使用します。

要素dz-error-markとdz-success-markは、デフォルトでdropzoneに常に表示されるため、イベントに応じて非表示にすることができます。これはinit関数内のコードと同じです。または、最初に表示しないようにして、それに応じて表示する方が良いかもしれません。

テンプレートを変更すると、dropzoneのデフォルトの動作も変更しないと、正しく表示されなくなります。

Hereまた、dropzoneドキュメントでも説明されているように、大幅にカスタマイズされたdropzoneの例を見ることができます。

Answer 2

私はこの問題を解決しました。そして、wallek876からの答えは私を正しい方向に送ったので、それは受け入れられる答えになります。

解答の詳細は、dropzone-previewsが、新しい要素を追加するべきではなく、表の外側ではなく、表の外側にあることがわかりました。

ソリューション：

私はそうのよう<div class="div-table" id="upload-container">へのidとしてupload-containerを移動しました。

私は<div id="preview-template">を提案しておいたので、previewTemplateの最初の子として<div class="div-tr">を適用しました。この構造はテーブルレイアウトを戻し、残りのスタイリングはCSSを使用して適用されました。

私はHTMLにpreviewTemplateを置くことができませんでした。