使用 ExtJS 6 拖放文件

Question

我目前有一个 web 应用程序，其视图是使用 ExtJS 6 编写的：我们目前使用 Java 小程序，其目的是允许用户将文件从文件系统拖放到 Web 服务器。我的目标是删除那个小程序，并使用 ExtJS6 处理拖放：这可能吗？

我试图在文档中搜索它，但我找到的唯一主题 (https://docs.sencha.com/extjs/6.0/core_concepts/drag_drop.html) 是关于拖放框架元素的。

Answer 1

要支持拖放文件，您可以使用以下events：
drop, dragstart, dragenter, dragover, dragleave, dragexit.

一个工作示例：https://fiddle.sencha.com/#fiddle/10v9

Ext.application({
    name: 'Fiddle',

    launch: function() {

        var store = Ext.create('Ext.data.Store', {
            fields: ['name', 'size', 'file']
        });

        Ext.widget('container', {

            renderTo: Ext.getBody(),

            items: [{
                xtype: 'grid',

                columns: [{
                    header: 'Name',
                    dataIndex: 'name',
                    flex: 2
                }, {
                    header: 'Size',
                    dataIndex: 'size',
                    flex: 1,
                    renderer: Ext.util.Format.fileSize
                }],

                viewConfig: {
                    emptyText: 'Drop Files Here',
                    deferEmptyText: false
                },
                store: store,

                listeners: {

                    drop: {
                        element: 'el',
                        fn: 'drop'
                    },

                    dragstart: {
                        element: 'el',
                        fn: 'addDropZone'
                    },

                    dragenter: {
                        element: 'el',
                        fn: 'addDropZone'
                    },

                    dragover: {
                        element: 'el',
                        fn: 'addDropZone'
                    },

                    dragleave: {
                        element: 'el',
                        fn: 'removeDropZone'
                    },

                    dragexit: {
                        element: 'el',
                        fn: 'removeDropZone'
                    },

                },

                noop: function(e) {
                    e.stopEvent();
                },

                addDropZone: function(e) {
                    if (!e.browserEvent.dataTransfer || Ext.Array.from(e.browserEvent.dataTransfer.types).indexOf('Files') === -1) {
                        return;
                    }

                    e.stopEvent();

                    this.addCls('drag-over');
                },

                removeDropZone: function(e) {
                    var el = e.getTarget(),
                        thisEl = this.getEl();

                    e.stopEvent();


                    if (el === thisEl.dom) {
                        this.removeCls('drag-over');
                        return;
                    }

                    while (el !== thisEl.dom && el && el.parentNode) {
                        el = el.parentNode;
                    }

                    if (el !== thisEl.dom) {
                        this.removeCls('drag-over');
                    }

                },

                drop: function(e) {
                    e.stopEvent();

                    Ext.Array.forEach(Ext.Array.from(e.browserEvent.dataTransfer.files), function(file) {
                        store.add({
                            file: file,
                            name: file.name,
                            size: file.size
                        });
                        console.log(file);
                    });

                    this.removeCls('drag-over');
                }


            }],

            padding: 20


        });

    }
});

Answer 2

我正在使用我在 sencha 论坛中找到的解决方案：

Ext.define('FileDropper', {
    extend: 'Ext.plugin.Abstract',
    alias: 'plugin.filedropper',

    overCls: '',

    init: function(c) {
        this.target = c;
        c.on({
            element: 'el',
            scope: this,
            dragover: this.onDragOver,
            dragenter: this.onDragEnter,
            dragLeave: this.onDragLeave,
            drop: this.onDrop
        });
    },

    onDragOver: function(e) {
        e.stopEvent();
    },

    onDragEnter: function(e) {
        this.target.addCls(this.overCls);
        e.stopEvent();
    },

    onDragLeave: function() {
        this.target.removeCls(this.overCls);
    },

    onDrop: function(e) {
        var callback = this.callback,
            scope = this.scope || this;

        e.stopEvent();
        this.target.removeCls(this.overCls);
        if (callback) {
            callback.call(scope, e.browserEvent.dataTransfer.files);
        }
    }
});

像这样将插件添加到您的视图中：

Ext.define('MyPanel', {
    extend: 'Ext.Panel',

    // ... your content

    plugins: [{
        ptype: 'filedroppper'
        overCls: 'foo'
        callback: function(files) {
            // handle your upload
        }
    }]
});

您只需在回调中处理丢失的文件：

    callback: function (files) {
        var url = 'example.org'
        var xhr = new XMLHttpRequest();
        var fd = new FormData();

        xhr.open("POST", url, true);
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                // Handle response.
                alert(xhr.responseText); // handle response.
            }
        };

        for (var i = 0; i < files.length; i++) {
            fd.append('files', files.item(i));
        }

        // Initiate a multipart/form-data upload
        xhr.send(fd);
    }

但是如果您使用 FormData() 确保您不必支持旧浏览器。

Answer 3

此 fiddle 中包含的 Window 允许用户将文件从文件系统拖放到 Web 服务器。

源代码：

Ext.application({
  name: 'Fiddle',

  launch: function() {

      var store = Ext.create('Ext.data.Store', {
          fields: ['name', 'size', 'file', 'status']
      });

      var postDocument = this.postDocument;

      Ext.widget('container', {

          renderTo: Ext.getBody(),

          items: [{
              multiSelect: true,
              xtype: 'grid',
              id: 'UploadGrid',
              columns: [{
                  header: 'Name',
                  dataIndex: 'name',
                  flex: 2
              }, {
                  header: 'Size',
                  dataIndex: 'size',
                  flex: 1,
                  renderer: Ext.util.Format.fileSize
              }, {
                  header: 'Status',
                  dataIndex: 'status',
                  flex: 1,
                  renderer: this.rendererStatus
              }],

              viewConfig: {
                  emptyText: 'Drop Files Here',
                  deferEmptyText: false
              },
              store: store,

              listeners: {

                  drop: {
                      element: 'el',
                      fn: 'drop'
                  },

                  dragstart: {
                      element: 'el',
                      fn: 'addDropZone'
                  },

                  dragenter: {
                      element: 'el',
                      fn: 'addDropZone'
                  },

                  dragover: {
                      element: 'el',
                      fn: 'addDropZone'
                  },

                  dragleave: {
                      element: 'el',
                      fn: 'removeDropZone'
                  },

                  dragexit: {
                      element: 'el',
                      fn: 'removeDropZone'
                  },

              },

              noop: function(e) {
                  e.stopEvent();
              },

              addDropZone: function(e) {
                  if (!e.browserEvent.dataTransfer || Ext.Array.from(e.browserEvent.dataTransfer.types).indexOf('Files') === -1) {
                      return;
                  }

                  e.stopEvent();

                  this.addCls('drag-over');
              },

              removeDropZone: function(e) {
                  var el = e.getTarget(),
                      thisEl = this.getEl();

                  e.stopEvent();


                  if (el === thisEl.dom) {
                      this.removeCls('drag-over');
                      return;
                  }

                  while (el !== thisEl.dom && el && el.parentNode) {
                      el = el.parentNode;
                  }

                  if (el !== thisEl.dom) {
                      this.removeCls('drag-over');
                  }

              },

              drop: function(e) {
                  e.stopEvent();
                  Ext.Array.forEach(Ext.Array.from(e.browserEvent.dataTransfer.files), function(file) {
                      store.add({
                          file: file,
                          name: file.name,
                          size: file.size,
                          status: 'Ready'

                      });
                  });
                  this.removeCls('drag-over');
              },

              tbar: [{
                  text: "Upload",
                  handler: function() {
                      for (var i = 0; i < store.data.items.length; i++) {
                          if (!(store.getData().getAt(i).data.status === "Uploaded")) {
                              store.getData().getAt(i).data.status = "Uploading";
                              store.getData().getAt(i).commit();
                              //replace "insert your upload url here" with the real url
                              postDocument("insert your upload url here", store, i);
                          }
                      }

                  }
              }, {
                  text: "Erase EVERYTHING",
                  handler: function() {
                      store.reload();
                  }
              }, {
                  text: "Erase uploaded files",
                  handler: function() {
                      for (var i = 0; i < store.data.items.length; i++) {
                          var record = store.getData().getAt(i);
                          if ((record.data.status === "Uploaded")) {
                              store.remove(record);
                              i--;
                          }
                      }
                  }
              }, {
                  text: "Erase selected files",
                  handler: function() {
                      store.remove(Ext.getCmp('UploadGrid').getSelection());
                  }
              }]


          }],

          padding: 20


      });

  },

  rendererStatus: function(value, metaData, record, rowIndex, colIndex, store) {
      var color = "grey";
      if (value === "Ready") {
          color = "blue";
      } else if (value === "Uploading") {
          color = "orange";
      } else if (value === "Uploaded") {
          color = "green";
      } else if (value === "Error") {
          color = "red";
      }
      metaData.tdStyle = 'color:' + color + ";";
      return value;
  },

  postDocument: function(url, store, i) {
      var xhr = new XMLHttpRequest();
      var fd = new FormData();
      fd.append("serverTimeDiff", 0);
      xhr.open("POST", url, true);
      fd.append('index', i);
      fd.append('file', store.getData().getAt(i).data.file);
      //xhr.setRequestHeader("Content-Type","multipart/form-data");
      xhr.setRequestHeader("serverTimeDiff", 0);
      xhr.onreadystatechange = function() {
          if (xhr.readyState == 4 && xhr.status == 200) {
              //handle the answer, in order to detect any server side error
              if (Ext.decode(xhr.responseText).success) {
                  store.getData().getAt(i).data.status = "Uploaded";
              } else {
                  store.getData().getAt(i).data.status = "Error";
              }
              store.getData().getAt(i).commit();
          } else if (xhr.readyState == 4 && xhr.status == 404) {
              store.getData().getAt(i).data.status = "Error";
              store.getData().getAt(i).commit();
          }
      };
      // Initiate a multipart/form-data upload
      xhr.send(fd);
  }
});

使用 ExtJS 6 拖放文件

Drag and drop file using ExtJS 6

java

applet

drag-and-drop

extjs

extjs6