docs/default.css
[roojs1] / docs / symbols / src / Roo_bootstrap_DocumentManager.js.html
index 4006276..78f437c 100644 (file)
  * @cfg {String} paramName default 'imageUpload'
  * @cfg {String} method default POST
  * @cfg {String} url action url
- * @cfg {Number} boxes number of boxes default 12
+ * @cfg {Number} boxes number of boxes, 0 is no limit.. default 0
  * @cfg {Boolean} multiple multiple upload default true
- * @cfg {Number} minWidth default 300
- * @cfg {Number} minHeight default 300
  * @cfg {Number} thumbSize default 300
  * @cfg {String} fieldLabel
  * @cfg {Number} labelWidth default 4
          * @param {Roo.bootstrap.DocumentManager} this
          * @param {Object} file
          */
-        </span><span class="jsdoc-string">&quot;edit&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
+        </span><span class="jsdoc-string">&quot;edit&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-comment">/**
+         * @event beforeselectfile
+         * Fire before select file
+         * @param {Roo.bootstrap.DocumentManager} this
+         */
+        </span><span class="jsdoc-string">&quot;beforeselectfile&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-comment">/**
+         * @event process
+         * Fire before process file
+         * @param {Roo.bootstrap.DocumentManager} this
+         * @param {Object} file
+         */
+        </span><span class="jsdoc-string">&quot;process&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
         
     </span><span class="jsdoc-syntax">});
 };
 
 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.bootstrap.DocumentManager</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.bootstrap.Component</span><span class="jsdoc-syntax">,  {
     
-    </span><span class="jsdoc-var">boxes </span><span class="jsdoc-syntax">: 12,
+    </span><span class="jsdoc-var">boxes </span><span class="jsdoc-syntax">: 0,
     </span><span class="jsdoc-var">inputName </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
-    </span><span class="jsdoc-var">minWidth </span><span class="jsdoc-syntax">: 300,
-    </span><span class="jsdoc-var">minHeight </span><span class="jsdoc-syntax">: 300,
     </span><span class="jsdoc-var">thumbSize </span><span class="jsdoc-syntax">: 300,
     </span><span class="jsdoc-var">multiple </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
     </span><span class="jsdoc-var">files </span><span class="jsdoc-syntax">: [],
     </span><span class="jsdoc-var">onUploaderClick </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">)
     {
         </span><span class="jsdoc-var">e.preventDefault</span><span class="jsdoc-syntax">();
-        </span><span class="jsdoc-var">this.selectorEl.dom.click</span><span class="jsdoc-syntax">();
+        
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'beforeselectfile'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">) != </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.selectorEl.dom.click</span><span class="jsdoc-syntax">();
+        }
+        
     },
     
     </span><span class="jsdoc-var">onFileSelected </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">)
             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
         }
         
-        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.files.length </span><span class="jsdoc-syntax">&gt; </span><span class="jsdoc-var">this.boxes</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.boxes </span><span class="jsdoc-syntax">&gt; 0 &amp;&amp; </span><span class="jsdoc-var">this.files.length </span><span class="jsdoc-syntax">&gt; </span><span class="jsdoc-var">this.boxes</span><span class="jsdoc-syntax">){
             </span><span class="jsdoc-var">this.files </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.files.slice</span><span class="jsdoc-syntax">(0, </span><span class="jsdoc-var">this.boxes</span><span class="jsdoc-syntax">);
         }
         
         </span><span class="jsdoc-var">this.uploader.show</span><span class="jsdoc-syntax">();
         
-        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.files.length </span><span class="jsdoc-syntax">&gt; </span><span class="jsdoc-var">this.boxes </span><span class="jsdoc-syntax">- 1){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.boxes </span><span class="jsdoc-syntax">&gt; 0 &amp;&amp; </span><span class="jsdoc-var">this.files.length </span><span class="jsdoc-syntax">&gt; </span><span class="jsdoc-var">this.boxes </span><span class="jsdoc-syntax">- 1){
             </span><span class="jsdoc-var">this.uploader.hide</span><span class="jsdoc-syntax">();
         }
         
         
         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">files </span><span class="jsdoc-syntax">= [];
         
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">docs </span><span class="jsdoc-syntax">= [];
+        
         </span><span class="jsdoc-var">Roo.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.files</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">file</span><span class="jsdoc-syntax">){
             
             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">file.id</span><span class="jsdoc-syntax">) != </span><span class="jsdoc-string">'undefined' </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">file.id </span><span class="jsdoc-syntax">* 1 &gt; 0){
                 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
             }
             
-            </span><span class="jsdoc-var">this.delegates.push</span><span class="jsdoc-syntax">(
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">file.type.indexOf</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'image'</span><span class="jsdoc-syntax">) != -1){
+                </span><span class="jsdoc-var">this.delegates.push</span><span class="jsdoc-syntax">(
+                    (</span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+                        </span><span class="jsdoc-var">_this.process</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">file</span><span class="jsdoc-syntax">);
+                    })</span><span class="jsdoc-var">.createDelegate</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">)
+                );
+        
+                </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+            }
+            
+            </span><span class="jsdoc-var">docs.push</span><span class="jsdoc-syntax">(
                 (</span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
                     </span><span class="jsdoc-var">_this.process</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">file</span><span class="jsdoc-syntax">);
                 })</span><span class="jsdoc-var">.createDelegate</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">)
         
         </span><span class="jsdoc-var">this.files </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">files</span><span class="jsdoc-syntax">;
         
+        </span><span class="jsdoc-var">this.delegates </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.delegates.concat</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">docs</span><span class="jsdoc-syntax">);
+        
         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.delegates.length</span><span class="jsdoc-syntax">){
             </span><span class="jsdoc-var">this.refresh</span><span class="jsdoc-syntax">();
             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
     {
         </span><span class="jsdoc-var">this.uploader.show</span><span class="jsdoc-syntax">();
         
-        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.files.length </span><span class="jsdoc-syntax">&gt; </span><span class="jsdoc-var">this.boxes </span><span class="jsdoc-syntax">- 1){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.boxes </span><span class="jsdoc-syntax">&gt; 0 &amp;&amp; </span><span class="jsdoc-var">this.files.length </span><span class="jsdoc-syntax">&gt; </span><span class="jsdoc-var">this.boxes </span><span class="jsdoc-syntax">- 1){
             </span><span class="jsdoc-var">this.uploader.hide</span><span class="jsdoc-syntax">();
         }
         
         </span><span class="jsdoc-var">this.refresh</span><span class="jsdoc-syntax">();
     },
     
+    </span><span class="jsdoc-var">clear </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
+    {
+        </span><span class="jsdoc-var">Roo.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.files</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">file</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">file.target</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+            }
+            
+            </span><span class="jsdoc-var">file.target.remove</span><span class="jsdoc-syntax">();
+
+        }, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        
+        </span><span class="jsdoc-var">this.files </span><span class="jsdoc-syntax">= [];
+        
+        </span><span class="jsdoc-var">this.refresh</span><span class="jsdoc-syntax">();
+    },
+    
     </span><span class="jsdoc-var">onClick </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">)
     {
         </span><span class="jsdoc-var">e.preventDefault</span><span class="jsdoc-syntax">();
     
     </span><span class="jsdoc-var">process </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">file</span><span class="jsdoc-syntax">)
     {
-        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.editable </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">file.type.indexOf</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'image'</span><span class="jsdoc-syntax">) != -1){
-            </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'edit'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">file</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'process'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">file</span><span class="jsdoc-syntax">) !== </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.editable </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">file.type.indexOf</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'image'</span><span class="jsdoc-syntax">) != -1){
+                </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'edit'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">file</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+            }
+
+            </span><span class="jsdoc-var">this.uploadStart</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">file</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
+
             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
         }
         
-        </span><span class="jsdoc-var">this.uploadStart</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">file</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
-        
-        </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
     },
     
     </span><span class="jsdoc-var">uploadStart </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">file</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">crop</span><span class="jsdoc-syntax">)
         </span><span class="jsdoc-var">file.target.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'tall'</span><span class="jsdoc-syntax">);
         </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
         
+    },
+    
+    </span><span class="jsdoc-var">uploadFromSource </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">file</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">crop</span><span class="jsdoc-syntax">)
+    {
+        </span><span class="jsdoc-var">this.xhr </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">XMLHttpRequest</span><span class="jsdoc-syntax">();
+        
+        </span><span class="jsdoc-var">this.managerEl.createChild</span><span class="jsdoc-syntax">({
+            </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'roo-document-manager-loading'</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: [
+                {
+                    </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
+                    </span><span class="jsdoc-var">tooltip </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">file.name</span><span class="jsdoc-syntax">,
+                    </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'roo-document-manager-thumb'</span><span class="jsdoc-syntax">,
+                    </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'&lt;i class=&quot;fa fa-circle-o-notch fa-spin&quot;&gt;&lt;/i&gt;'
+                </span><span class="jsdoc-syntax">}
+            ]
+
+        });
+
+        </span><span class="jsdoc-var">this.xhr.open</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.method</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.url</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+        
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">headers </span><span class="jsdoc-syntax">= {
+            </span><span class="jsdoc-string">&quot;Accept&quot;</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;application/json&quot;</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-string">&quot;Cache-Control&quot;</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;no-cache&quot;</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-string">&quot;X-Requested-With&quot;</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;XMLHttpRequest&quot;
+        </span><span class="jsdoc-syntax">};
+        
+        </span><span class="jsdoc-keyword">for </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">headerName </span><span class="jsdoc-keyword">in </span><span class="jsdoc-var">headers</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">headerValue </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">headers</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">headerName</span><span class="jsdoc-syntax">];
+            </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">headerValue</span><span class="jsdoc-syntax">) {
+                </span><span class="jsdoc-var">this.xhr.setRequestHeader</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">headerName</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">headerValue</span><span class="jsdoc-syntax">);
+            }
+        }
+        
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">_this </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        
+        </span><span class="jsdoc-var">this.xhr.onload </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
+        {
+            </span><span class="jsdoc-var">_this.xhrOnLoad</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">_this.xhr</span><span class="jsdoc-syntax">);
+        }
+        
+        </span><span class="jsdoc-var">this.xhr.onerror </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
+        {
+            </span><span class="jsdoc-var">_this.xhrOnError</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">_this.xhr</span><span class="jsdoc-syntax">);
+        }
+        
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">formData </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">FormData</span><span class="jsdoc-syntax">();
+
+        </span><span class="jsdoc-var">formData.append</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'returnHTML'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'NO'</span><span class="jsdoc-syntax">);
+        
+        </span><span class="jsdoc-var">formData.append</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'crop'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">crop</span><span class="jsdoc-syntax">);
+        
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">file.filename</span><span class="jsdoc-syntax">) != </span><span class="jsdoc-string">'undefined'</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">formData.append</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'filename'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">file.filename</span><span class="jsdoc-syntax">);
+        }
+        
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">file.mimetype</span><span class="jsdoc-syntax">) != </span><span class="jsdoc-string">'undefined'</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">formData.append</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'mimetype'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">file.mimetype</span><span class="jsdoc-syntax">);
+        }
+        
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'prepare'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">formData</span><span class="jsdoc-syntax">) != </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.xhr.send</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">formData</span><span class="jsdoc-syntax">);
+        };
     }
 });
 </span></code></body></html>
\ No newline at end of file