futoricky/ember-cli-dropzonejs

Drag and drop file uploader addon using dropzonejs

ember-cli-dropzonejs's Issues

setting autoProcessQueue to false does not prevent autoProcess

i submitted this pull-request which fixed the issue for me locally. The attribute was named incorrectly (had double c's)

#3

Enable manual processing of Queue

You can successfully set autoProcessQueue=false and the component behaves accordingly. However their is no convenient way to call processQueue().

Q: autoProcessQueue=false, how to start processing

Hi,

with a dropzone that does not automatically starts processing what's the recommended way to start manually?

{{drop-zone
                    maxDropRegion=false
                    autoProcessQueue=false
                    maxFiles=1
                    acceptedFiles='image/*'
                    clickable=true
                    addRemoveLinks=true
                    addedfile=addedFileEvent
            }}

Fix breaking changes in FastBoot 1.0

The current ember-cli-fastboot releases (1.0.0-rc.1 and above) introduce breaking changes. These will most likely break your current FastBoot implementation.

See ember-fastboot/ember-cli-fastboot#387 for more information and a guide on how to fix your addon. Also you may want to visit the -fastboot Slack channel to get help from other users.

Note: this issue has been created automatically, by searching for certain patterns in your code. If you think this has been falsely created, feel free to close!

Support for `Closure Action`

Any plan to support Closure Action as we're moving fast toward Ember 2.0 ? It will allow us to avoid using a Controller for event handling. BTW, Thanks much for your work.

Access Dropzone within callback

Thanks again for your great work on this project.

There seems to be no way to access dropzone in the callbacks in which only a File object is passed.

For example, if I want to clear the Dropzone display of all existing files in an onSuccess method, there is no way to do it -- at least that I can find.

Keep up the great work!

Broken with Glimmer 2

Defining the null property named element here https://github.com/FutoRicky/ember-cli-dropzonejs/blob/master/addon/components/drop-zone.js#L9 breaks this addon with the Glimmer 2 engine with the following error:
TypeError: Cannot read property 'getElement' of undefined

Happy to fix if you can point me in the right direction

Dynamic Options Hash

Hey There -

Would you be willing to consider a PR that introduces a more dynamic options hash?

The current api to type out all the options is a little cumbersome for my (admittedly a little bit of an edge) use case. I need to pass in quite a bit of context-specific data into the component.

I was thinking of an API somewhat like this:

{{!-- my component --}}

{{drop-zone options=dynamic}}

and in my my-component.js

options: {
endpoint: '/foo',
}

Let me know and I'll submit the PR

Fix for flickering breaking on 'dragenter'

Hey, I noticed that the recent fix for flickering is breaking for me when I drag a file into the dropzone element. I am getting:

Uncaught TypeError: Cannot read property 'classList' of undefined

which is referencing this code:

getDropzoneOptions: function getDropzoneOptions() {
      var onDragEnterLeaveHandler = function onDragEnterLeaveHandler(dropzoneInstance) {
        var onDrag = (function (element) {
          var dragCounter = 0;

          return {
            enter: function enter(event) {
              event.preventDefault();
              dragCounter++;
              element.classList.add('dz-drag-hover');
            },
            leave: function leave() {
              dragCounter--;

              if (dragCounter === 0) {
                element.classList.remove('dz-drag-hover');
              }
            }
          };
        }).call(dropzoneInstance.element);

        dropzoneInstance.on('dragenter', onDrag.enter);
        dropzoneInstance.on('dragleave', onDrag.leave);
      };

re: #35

Inside of the enter function, element is undefined, so .classList breaks here.

Any help would be greatly appreciated. Thanks!

override init method error

I want to override init method to show uploaded images on server, but when I try to override init function,ember throw error in browser console.
error message is:

EmberError {description: undefined, fileName: undefined, lineNumber: undefined, message: "Assertion Failed: You must call `this._super(...ar…to call `this._super(...arguments);` from `init`.", name: "Error"…}

my template like this:

        {{#drop-zone url=uploadUrl
          addRemoveLinks=true
          dictRemoveFile="remove"
          dictCancelUpload='cancel'
          acceptedFiles='.jpg,.png'
          sending=sending 
          removedFile=removedFile 
          success=success 
          init=initDropzone}}
          <div class="dz-message">
            <div>
              <span>click to upload images</span>
              <br>
              <small>drag images to upload</small>
            </div>
          </div>
        {{/drop-zone}}

my route like this:

  setupController: function(controller, model) {
    this._super(controller, model);

    controller.reopen({
      uploadUrl: config.fileUploadUrl,

      sending: (formData, xhr) => {

      },
      removedFile: ({xhr}) => {

      },
      success: (file, resp) => {

      },
      initDropzone: function(){
        console.log('hello');
      }
    });
  }

my ember version is 2.11.I don't know if it is an bug.

When extending the drop-zone component, "this" is not the component

How can I access the component itself?

import DropzoneComponent from 'ember-cli-dropzonejs/components/drop-zone';

export default DropzoneComponent.extend({
  customFunction() {
    // do stuff
  },
  addedfile(file) {
    // "this" is the component, so the following fails with:
    // "this.customFunction is not a function"
    this.customFunction(file);
  },
});

Uncaught Error: No URL provided.

This exception is thrown (even though everything works).

This happens even with the most basic code:
{{drop-zone url="/"}}

I'm guessing this is related to: dropzone/dropzone#1355

success callback context

Hi,

i want to trigger an action via the success callback, so i in my component i did the following:

{{drop-zone url="http://localhost/upload" success=uploadSuccess}}

The 'uploadSuccess` function gets called as expected, but loses the context of my wrapping component. Is there anyway to access my component / ember app?

Wrong logic is used in case of events

Events are used to notify other listeners about an event. What you did, is just a wrapper for a new object.

What was expected:

• drop-zone emits an event, I can subscribe and react

What we have:

• {{drop-zone url=imageUploadUrl addRemoveLinks=true complete=(action "onUploadComplete")}}
• The result is: I've created a new object with MY OWN complete event, replacing the default one.

How to fix:

• In case of events, you should register a callback using the emit function. Preserving the native event. Example: instance.on('complete', this.complete)

Workaround:

• Use only noop events, like: queuecomplete, addedfiles, etc. see the source code.

Nevermind

Uncaught Error

I get this error

Uncaught Error: Assertion Failed: A helper named 'drop-zone' could not be found

even after following these steps

ember install ember-cli-dropzonejs
bower install dropzone

`var app = new EmberApp({

---

emberCliDropzonejs: {
includeDropzoneCss: false
}

---

});`

addedFileEvent: Ember.computed(function() {
    return function() {
      // do something...
    };
  }),

{{drop-zone url='http://example.com/example' addfile=addedFileEvent}}

How to trigger reset event ?

How I used?

I used this inside the form.

  <form>
   {{dropzone event1=(action 'actionName') }}
 </form>

Problem or Requirement

I don't know how to trigger the reset event. I am supposed to reset the elements in the form to their
initial status.
I did not find anything related inside the docs.

Fails to build with Dropzone 5.5.0

Dropzone JS 5.5.0 was packaged incorrectly and is missing the dist js files. See https://gitlab.com/meno/dropzone/issues/115 for issue.

Currently, installing ember-cli-dropzone will use dropzone 5.5.0 and therefore fails to build. This can be resolved by specifying dropzone version 5.4.0 in your project's package.json dependencies. Not sure if you want to lock the addon's package.json to 5.4.0 until a new version of dropzone is packaged, but figured I'd file an issue so people were aware.

Error in tooltip

I was playing with the demo and noticed that whatever file I uploaded I would get an ugly error message from the hover-event tooltip. See visual below.

How to upload images on AWS S3?

I am using ember js for front-end and laravel 5 for back end

Make the whole body a dropzone?

How can I make the entire document.body a dropzone? Using the standard lib, I could do something like this:

let myDropzone = new Dropzone(document.body, {...});

Is there a way to init Dropzone from a controller?

Custom previewTemplate

Dropzone has the ability to specify a previewTemplate parameter (http://www.dropzonejs.com/#config-previewTemplate) which allows to use a custom template for image previews, but it seems this is currently not supported in this addon.

Could you please add this option to the addon?

Uncaught Error: Assertion Failed: A helper named 'drop-zone' could not be found

Trying to use this plugin i get

Uncaught Error: Assertion Failed: A helper named 'drop-zone' could not be found

package.json

"ember-cli-dropzonejs": "0.2.4",

ember app info

ember.debug.js:5378 DEBUG: -------------------------------
ember.debug.js:5378 DEBUG: Ember                     : 1.13.7
ember.debug.js:5378 DEBUG: Ember Data                : 1.13.9
ember.debug.js:5378 DEBUG: jQuery                    : 2.1.4
ember.debug.js:5378 DEBUG: Ember Simple Auth         : 0.8.0
ember.debug.js:5378 DEBUG: Ember Simple Auth Testing : 0.8.0
ember.debug.js:5378 DEBUG: -------------------------------

its appearing in vendor.js as this

define('ember-cli-dropzonejs/components/drop-zone/component', ['exports', 'ember'], function (exports, Ember) {

Any ideas?

Chunking

By the looks of it the chunking properties are not implemented so it is not possible to use these settings.

Therefore large files can not be uploaded

Manual upload to S3

I need to upload to S3, i have an endpoint which generates the appropriate object for posting to S3, but i want to clarify how you would manually process the queue. I have an array of uploaded files. I'm unsure what part of the file object needs to be part of the S3 post?

how do I use multiple drop-zone instances?

Using multiple drop-zone instances, the following error occurs:

Uncaught Error: Dropzone already attached.
    at new Dropzone (dropzone.js:427)
    at Class.createDropzone (drop-zone.js:218)
    at Class.insertDropzone (drop-zone.js:225)
    at Object.applyStr (ember.debug.js:24972)
    at Object.sendEvent (ember.debug.js:19411)
    at Class.trigger [as _super] (ember.debug.js:35727)
    at Class.trigger (ember.debug.js:43723)
    at Class.superWrapper [as trigger] (ember.debug.js:24805)
    at Renderer.didInsertElement (ember.debug.js:14574)
    at Renderer_dispatchLifecycleHooks [as dispatchLifecycleHooks] (ember.debug.js:14486)

Official Dropzone.js says: https://github.com/enyo/dropzone/wiki/FAQ#i-get-the-error-dropzone-already-attached-when-creating-the-dropzone

In my instantiation I am trying:
{{#drop-zone autoDiscover=false url=url clickable=true addRemoveLinks=true enctype="multipart/form-data" acceptedFiles=".override" maxFiles=1 height=20 }}

..where autoDiscover=false should do the trick, however this does not work.

How can I set this behavior on my component?

Cannot find module 'broccoli-stew'

Ran into this error when I updated to the latest version.

Error: Cannot find module 'broccoli-stew'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.Module._load (module.js:417:25)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/me/Desktop/project/node_modules/ember-cli-dropzonejs/index.js:8:35)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)

Fixed when I revert to 1.0.0.

includeDropzoneCss:false is not working

I added includeDropzoneCss:false to ember-cli-build.js but that didn't work, I can see dropzone css added to the vendor.css.
I think "included" hook gets triggered before the app options are set.
The issue was resolved for me when I changed the "included" hook to the below:

included(app) {
    let options = app.options.emberCliDropzonejs || { includeDropzoneCss: true };

    this.import('vendor/dropzone.min.js');



    if (options.includeDropzoneCss){
      this.import('app/styles/dropzone.min.css');
    }
  }

What's the best way of changing the URL before the upload starts

I have the following in my component:

export default Ember.Component.extend({
	method: null,
	headers: null,
	token: null,
	fileName: null,
	url: Ember.computed('token', 'fileName', function () {
		let baseUrl = 'https://12345.blob.core.windows.net/ocr/';
		let filename = this.get('fileName');
		let token = this.get('token');
		return baseUrl + filename + token;
	}),
	addedFileEvent: Ember.computed(function () {
		var _this = this;
		return function (file) {
			_this.set('fileName', file.name);
		};
	})
});

And this in my template:

{{drop-zone url=url method=method headers=headers addedfile=addedFileEvent }}

But the url computed property never fires.

What is the best way of modifying the URL each time a file is added and before it uploads to the server?

Content Security Policy

We are using this package for some time now and it works great! But we are trying to implement a secure content security policy. However, the preview of the images is show as a base64 image. In order to allow to show those we need to add image-src: 'data' to our CSP. The documentation of the CSP marks this as potentially insecure. Is there a way to still have the previews working without allowing this potentially insecure method?

Would be great to hear how other projects use this package in combination with a CSP.

Remove dropzone from bower dependencies

Bower is basically an obsolete package manager as the JS world transitions to npm/yarn. Please consider removing dropzone from bower dependencies and grabbing it with npm instead.

How to attach all the dropzone options

How to attach all the options associated with a dropzone in hbs file.. such as all the events fired by dropzone etc... In j's we use .options.I'd to assign the handlers.. not sure how same is done in ember as it needs to do things in routes controllet's etc...

Is it possible to bind an action with the uploader?

I want to perform an action whenever a file is added. Is it possible to do so? The action is in a controller.

Creating more than one dropzone component doesn't seem to work

I've got multiple dropzones I'd like for one page. The first one is working correctly, but adding others only initiates the first one.

DEBUG: -------------------------------
ember.debug.js:5378DEBUG: Ember                    : 1.13.7
ember.debug.js:5378DEBUG: Ember Data               : 1.13.8
ember.debug.js:5378DEBUG: jQuery                   : 1.11.3
ember.debug.js:5378DEBUG: Ember Simple Auth        : 0.8.0
ember.debug.js:5378DEBUG: Ember Simple Auth Devise : 0.8.0
ember.debug.js:5378DEBUG: -------------------------------

On iOS devices the image is being rotated

I have tested on MobileSafari on iPad and on iPhone and when the image has a greater height that width, the image is rotated.

Use new fastboot guard

process.env.EMBER_CLI_FASTBOOT is soon going to be deprecated and eventually removed. Therefore, we should instead use updateFastBootManifest hook.

https://github.com/ember-fastboot/ember-cli-fastboot#loading-additional-assets-in-fastboot-environment

Fix deprecation message

DEPRECATION: Overriding init without calling this._super is deprecated. Please call this._super.init && this._super.init.apply(this, arguments); addon: ember-cli-htmlbars

more info here ember-cli/ember-cli-htmlbars#77

`dropzoneOptions` validation checking is too reckless

https://github.com/FutoRicky/ember-cli-dropzonejs/blob/master/addon/components/drop-zone.js#L216

Here, some options are nullable, for example, thumbnailHeight and thumbnailWidth, they should be pass in this checker even set to null.

References:

http://www.dropzonejs.com/#config-thumbnailHeight
http://www.dropzonejs.com/#config-thumbnailWidth

Option `includeDropzoneCss` is not implemented

The option includeDropzoneCss described in the README.md file is not implemented.

Is the feature actually missing? Or it's the README file that is not up to date?

Also, thanks for this addon !

No way to set timeout configuration option

Dropzone.js added a default setting for timeout, which sets this to 30s, but there is no way to override this within your component so it is always set to 30s

Usage in yarn workspaces

Description

For a bit of context: I recently started fiddling with converting a couple of my projects to a monorepo using yarn workspaces. One of the downstream dependencies of one of my addons is ember-cli-dropzonejs.

I am getting an error when trying to resolve the dropzone dependency, I believe originating from treeForVendor and treeForStyles, which use this.project.root as the directory root when including dropzone in the vendor tree. Since dependencies are hoisted to the parent of the workspace, dropzone cannot be resolved and the following error is given:

Directory not found: /path/to/parent/workspace-a/node_modules/dropzone/dist/min

ember-cli-dropzonejs/index.js

Lines 14 to 17 in 7e26e6c

	var dropzoneJs = new Funnel(
	path.join(this.project.root, 'node_modules', 'dropzone/dist/min'),
	{ files: ['dropzone.min.js'] }
	);

Project layout, in case it is useful

-> parent
  -> node_modules/
    -> ember-cli-dropzonejs/
    -> dropzone/
  -> workspace-a/ [this.project.root]

Proposal

Use require.resolve to locate the needed dropzone dependency. This should follow the expected resolution whether in a workspace or not. Inspiration taken from ember-highcharts:
https://github.com/ahmadsoe/ember-highcharts/blob/4a326f0528bcf6236e18fa44ebbe30a185dc271d/index.js#L86-L98

Example:

https://github.com/daniellubovich/ember-cli-dropzonejs/blob/a83b70dd7d36c415b3b196520668eccd46dcbd69/index.js#L14-L17

    var dropzoneJs = new Funnel(
      path.join(path.dirname(require.resolve('dropzone')), 'min'),
      { files: ['dropzone.min.js'] }
    );

Initial Installation Fails

Either the guides are not complete or this breaks with Ember-Cli v2.10.

Error:

Uncaught Error: Compile Error: drop-zone is not a helper

Template:

{{drop-zone url='/endpoint'}}

Missing `renameFile` function

Dropzone.js support renameFile which is not added on this project. The change is very easy.

I'm using version 0.8.6 and it's not present and checking the latest (1.0.1) version I see that it's not present either

Unable to use this reference in event handlers

Description

When extending the component or creating a event handler as said in the documentation, it works fine but thisis a reference to a DropZone objects, not a controller. Therefore, you cannot perform actions like this.transitionTo() or this.get().

Example

// template.hbs
 {{drop-zone url='<some_url>' success=successEvent}}

Here I use it in a route but the effect is the same as extending the component:

// route controller.js
export default Ember.Controller.extend({
    successEvent: function(){
        this.transitionTo('<success_route>') // this fails since this is not a component
    },
});

Maybe I am not using it correctly. I have tried to do it as described in READ.me file but I get Uncaught TypeError: Cannot read property 'apply' of undefined error