Ember.js ember-plupload drag&drop

Ember.js ember-plupload drag&drop

本文关键字:amp drop drag js ember-plupload Ember      更新时间:2023-09-26

我想创建一个拖拽&放下上传文件烬.js应用程序,我试图使用烬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();
      });
    }
  }
});

样本。最后是结果,页面

上传图像

将图片拖放到此区域,可以上传图片或添加图片。

但是我不能拖动任何东西到上面。和一个firebug日志:

实例化FileInput……
html5
Object {accept=[1];Name ="file", multiple=true,…}
默认模式:browser
selected
运行时'html5'初始化失败
尝试运行时:html4 . mode: false
Object {accept=[1], name="file", multiple=true,…}
默认模式:
运行时'html4'初始化失败
尝试运行:flash
Object {accept=[1], name="file", multiple=true,…}
select_multiple: true(兼容模式:null)
drag_and_drop:True(兼容模式:null)
默认模式:client
Send_browser_cookies: false(兼容模式:client)
Select_file: true(兼容模式:client)
选择模式:false
运行时"flash"初始化失败
尝试运行时:silverlight
对象{accept=[1], name="file", multiple=true,…}
Select_multiple: true(兼容模式:null)
drag_and_drop: true(兼容模式:null)
默认模式:browser
Send_browser_cookies: false(兼容模式:client)
select_file: true(兼容模式:client)
Silverlight不是未满足安装或最低版本(2.0.31005.0)要求可能)。

运行时'silverlight'失败initialize
Instantiating FileDrop…
正在运行:html5
对象{accept=[1], required_caps=Object,…}
默认模式:browser

运行时'html5'初始化失败
尝试runtime: html4
Object {accept=[1], required_caps=Object,…}
default
Runtime 'html4' failed to初始化
尝试运行:flash
Object {accept=[1],required_caps =对象,……}
select_multiple: true(兼容模式:
drag_and_drop: true(兼容模式:Null)
默认模式:Client
drag_and_drop: true(兼容模式:null)
Send_browser_cookies: false(兼容模式:client)
Select_file: true(兼容模式:client)
选择模式:false
运行时"flash"初始化失败
尝试运行时:silverlight
对象{accept=[1], required_caps=Object,…}
select_multiple: true(兼容模式:null)
drag_and_drop: true(兼容模式:
默认模式:浏览器
drag_and_drop: true(兼容模式:
send_browser_cookies: false(兼容模式:client)
select_file: true(兼容模式:client)
Silverlight不是未满足安装或最低版本(2.0.31005.0)要求可能)。

运行时'silverlight'失败初始化

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

我在作者的github页面上创建了一个问题,问题立即得到了解决,所以这个案子已经结束了,感谢Tim的大力支持。

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

问候,拉法ł