Ember.js ember-plupload拖放

时间:2016-08-14 11:25:11

标签: javascript ember.js drag-and-drop plupload

我想创造一个拖累和放大器删除上传文件ember.js应用程序,我正在尝试使用ember-plupload,但我无法使plupload工作,这是我的代码:

{{#pl-uploader for="upload-image" extensions="jpg jpeg png gif" onfileadd="uploadImage" as |queue dropzone|}}
  <div class="dropzone" id={{dropzone.id}}>
    {{#if dropzone.active}}
      {{#if dropzone.valid}}
        Drop to upload
      {{else}}
        Invalid
      {{/if}}
    {{else if queue.length}}
      Uploading {{queue.length}} files. ({{queue.progress}}%)
    {{else}}
      <h4>Upload Images</h4>
      <p>
        {{#if dropzone.enabled}}
          Drag and drop images onto this area to upload them or
        {{/if}}
        <a id="upload-image">Add an Image.</a>
      </p>
    {{/if}}
  </div>
{{/pl-uploader}}
{{outlet}}

这是plupload的示例模板。还有一条路线:

import Ember from "ember";

const get = Ember.get;
const set = Ember.set;

export default Ember.Route.extend({

  actions: {
    uploadImage: function (file) {
      var product = this.modelFor('product');
      var image = this.store.createRecord('image', {
        product: product,
        filename: get(file, 'name'),
        filesize: get(file, 'size')
      });

      file.read().then(function (url) {
        if (get(image, 'url') == null) {
          set(image, 'url', url);
        }
      });

      file.upload('/api/images/upload').then(function (response) {
        set(image, 'url', response.headers.Location);
        return image.save();
      }, function () {
        image.rollback();
      });
    }
  }
});

再次采样。最后是结果,页面

  

上传图片

     

将图像拖放到此区域以上传它们或添加图像。

但我无法将任何东西拖到它上面。一个萤火虫日志:

  

实例化FileInput ...
  尝试运行时:html5
对象{accept = [1],   name =“file”,multiple = true,...}
默认模式:浏览器
已选中   mode:false
运行时'html5'无法初始化
尝试运行时:html4   
对象{accept = [1],name =“file”,multiple = true,...}
默认模式:   浏览器选择的模式:false
运行时'html4'初始化无法   尝试运行时:flash
对象{accept = [1],name =“file”,multiple = true,   ...}
select_multiple:true(兼容模式:null)
drag_and_drop:   true(兼容模式:null)
默认模式:客户端
        send_browser_cookies:false(兼容模式:客户端)
        select_file:true(兼容模式:client)
所选模式:false
  运行时'flash'无法初始化
尝试运行时:silverlight
  对象{accept = [1],name =“file”,multiple = true,...}
        select_multiple:true(兼容模式:null)
drag_and_drop:true   (兼容模式:null)
默认模式:浏览器
        send_browser_cookies:false(兼容模式:客户端)
        select_file:true(兼容模式:客户端)
Silverlight不是   未满足安装或最小版本(2.0.31005.0)要求(不是   可能)。
选择模式:假Run运行时'silverlight'未通过   初始化
实例化FileDrop ...
尝试运行时:html5
对象   {accept = [1],required_caps = Object,...}
默认模式:浏览器
    选择的模式:false
运行时'html5'无法初始化
尝试   runtime:html4
对象{accept = [1],required_caps = Object,...}

  模式:浏览器
选择模式:false
运行时'html4'失败   初始化
尝试运行时:flash
对象{accept = [1],   required_caps = Object,...}
select_multiple:true(兼容模式:   null)
drag_and_drop:true(兼容模式:null)
默认模式:   客户端
drag_and_drop:true(兼容模式:null)
        send_browser_cookies:false(兼容模式:客户端)
        select_file:true(兼容模式:client)
所选模式:false
  运行时'flash'无法初始化
尝试运行时:silverlight
  Object {accept = [1],required_caps = Object,...}
select_multiple:true   (兼容模式:null)
drag_and_drop:true(兼容模式:   null)
默认模式:浏览器
drag_and_drop:true(兼容模式:   null)
send_browser_cookies:false(兼容模式:客户端)
        select_file:true(兼容模式:客户端)
Silverlight不是   未满足安装或最小版本(2.0.31005.0)要求(不是   可能)。
选择模式:假Run运行时'silverlight'未通过   初始化

在这种情况下我该怎么办?问候,Rafał

1 个答案:

答案 0 :(得分:0)

我在作者的github页面上创建了一个问题,问题立即得到解决,因此案件已经结束,感谢蒂姆的大力支持。

有一个新的, ember-plupload的工作版本。

问候,Rafał