Uncaught error dropzone already attached

Содержание

«Dropzone already attached.» error. #1889
Replies: 1 suggested answer · 3 replies
Dropzone min js 1 uncaught error dropzone already attached
jQuery plug in has issues #65
Comments

«Dropzone already attached.» error. #1889

When creating the Dropzone programmatically the error «Dropzone already attached» appears.

Beta Was this translation helpful? Give feedback.

1 You must be logged in to vote

This is most likely due to the autoDiscover feature of Dropzone.

When Dropzone starts, it scans the whole document, and looks for elements with the dropzone class. It then creates an instance of Dropzone for every element found. If you, later on, create a Dropzone instance yourself, you’ll create a second Dropzone which causes this error.

So you can either:

Turn off autoDiscover globally like this: Dropzone.autoDiscover = false; , or
Turn off autoDiscover of specific elements like this: Dropzone.options.myAwesomeDropzone = false;

You don’t have to create an instance of Dropzone programmatically in most situations! It’s recommended
to leave autoDiscover enabled, and configure your Dropzo…

This is most likely due to the autoDiscover feature of Dropzone.

So you can either:

Turn off autoDiscover globally like this: Dropzone.autoDiscover = false; , or
Turn off autoDiscover of specific elements like this: Dropzone.options.myAwesomeDropzone = false;

You don’t have to create an instance of Dropzone programmatically in most situations! It’s recommended
to leave autoDiscover enabled, and configure your Dropzone in the init option of your configuration.

Beta Was this translation helpful? Give feedback.

Marked as answer

1 You must be logged in to vote

so what is the matter of checking mechanism on elements which goes to source code of the id if it is given with class:dropzone in the same element? The reference said that if dz encounters with this class it then look for an option if existed then create instance in order to use specific options than default instead.

This is bad because by looking original documents created by the developer than search on stackoverflow instead, such things implies spending hours to figure them out. This page is the last destination of my investigation to confirm that it is a bug. If it is not please amend the part on the doc where it says that it can be configured with JQuery as it should be as it is not possible to configure this class with JQuery to avoid attachment by itself even if autodiscovery is false.

«// The dropzone method is added to jQuery elements and can
// be invoked with an (optional) configuration object.
$(«div#myId»).dropzone(< url: «/file/post» >);»

There is no way to invoke this specific configurations before this class is called by ‘dropzone’ even autosidcovery is false because in order to use jquery you have to place its source top then you have to place dropzone then you can call specific element with jQuery selector. With this way, autodiscovery has already attached to the element before jQuery.

To use jQuery you have to call the source of dropzone at first then create a native js (not jquery) with your own configurations and tell the class that it should ignore the specific element for the default implementation. After those all you can attach jquery to the element.

I hope I would help to people who have had this matter for a short period of time until reach this page.

Beta Was this translation helpful? Give feedback.

Источник

Dropzone min js 1 uncaught error dropzone already attached

I try to keep this FAQ as complete as possible. If you think that there is something missing, please contact me.

I get the error «Dropzone already attached.» when creating the Dropzone.

This is most likely due to the autoDiscover feature of Dropzone.

So you can either:

Turn off autoDiscover globally like this: Dropzone.autoDiscover = false; , or
Turn off autoDiscover of specific elements like this: Dropzone.options.myAwesomeDropzone = false;

You don’t have to create an instance of Dropzone programmatically in most situations! It’s recommended to leave autoDiscover enabled, and configure your Dropzone in the init option of your configuration.

Why are large files not uploading?

There is a maxFilesize option in Dropzone which defaults to 256 (MB). Increase this to upload files bigger than that. If your files upload fine but aren’t stored on the server, then it’s due to your server configuration. Most servers limit the file upload size as well. Please check with the appropriate documentation.

Why are some image thumbnails not generated?

There is a maxThumbnailFilesize option in Dropzone which defaults to 10 (MB) to prevent the browser from downsizing images that are too big. Increase this to create thumbnails of bigger files.

How to get notified when all files finished uploading?

At the moment there isn’t a single event to do that, but you can listen to the complete event, which fires every time a file completed uploading, and see if there are still files in the queue or being processed.

There is a queuecomplete event now that fires when all files in the queue have been uploaded.

How to show an error returned by the server?

Very often you have to do some verification on the server to check if the file is actually valid. If you want Dropzone to display any error encountered on the server, all you have to do, is send back a proper HTTP status code in the range of 400 — 500.

In most frameworks those error codes are generated automatically when you send back an error to the client. In PHP (for example) you can set it with the header command.

Dropzone will then know that the file upload was invalid, and will display the returned text as error message.

If the Content-Type of your response is text/plain , you can just return the text without any further markup. If the Content-Type is application/json , Dropzone will use the error property of the provided object. Eg.:

How to add a button to remove each file preview?

Starting with Dropzone version 3.5.0, there is an option that will handle all this for you: addRemoveLinks . This will add an Remove file element to the file preview that will remove the file, and it will change to Cancel upload if the file is currently being uploaded (this will trigger a confirmation dialog).

You can change those sentences with the dictRemoveFile , dictCancelUpload and dictCancelUploadConfirmation options.

If you still want to create the button yourself, you can do so like this:

How to submit additional data along the file upload?

If your Dropzone element is a «>

I want to display additional information after a file uploaded.

To use the information sent back from the server, use the success event, like this:

How to show an image created by the server after upload

If your server generates an image (for example, you render a PDF on the server after upload), you can display that image easily once it uploads like this:

Let’s say your server responds with JSON like this:

How to show files already stored on server

Use own confirm implementation

If you are unhappy with the way Dropzone asks a user if she wants to cancel or remove a file, and want to use some other way (e.g.: bootstrap’s modal), you can simply overwrite the Dropzone.confirm function.

How can I limit the number of files

You’re in luck! Starting with 3.7.0 Dropzone supports the maxFiles option. Simply set it to the desired quantity and you’re good to go. If you don’t want the rejected files to be viewed, simply register for the maxfilesexceeded event, and remove the file immediately:

Provide a thumbnail for files

If you want to provide a thumbnail for files other than images, you can, by emitting the thumbnail event yourself.

Reject images based on image dimensions

This is a bit tricky. The «problem» is, that the image dimensions are only known after the thumbnail event fired, which could potentially happen after the file already uploaded since thumbnail creation is queued.
That’s why the accept function (which determines if the file should be rejected) is called before the dimensions are actually known. Fortunately the accept function is asynchronous, and can «wait» for the thumbnail event. This is why you need to put the accept callback in the file object so you can reference it after the thumbnail has been generated:

Dropzone offers the possibility to upload files in chunks. The relevant configuration options for this feature are:

chunking which should be set to true
forceChunking , if true, will always send a file in chunks, even if it is only one chunk
chunkSize in bytes
parallelChunkUploads , if true, the chunks will be uploaded simultaneously
retryChunks , if true, the library will retry to upload a chunk if it fails
retryChunksLimit defaults to 3

Then there are two important callbacks. The first one is: params which can be a function, that receives files , xhr and chunk as the first argument. If chunking is enabled, you know that files only contains that one file, and chunk is the object holding all the information about the current chunk. Example:

See the documentation for that parameter for more information or look at the source code for the default implementation.

The second important callback is chunksUploaded , which gets the file that finished uploading and the done function as second argument. Do whatever you need to do in that function, to tell the server that the file finished uploading and invoke the done() function when ready.

Источник

jQuery plug in has issues #65

The jQuery plugin method has a problem.

I created a simple implementation, w/o any styling, because I just wanted to get it working before I messed with how it looks, but the dropzone isn’t visible.

To clarify the dropzone works. Now that I realize it’s a matter of the dropzone element not having a height, the issue appears to be the fact that the jQuery method does not show the dictDefaultMessage.

If it did, I’d be able to click on that and open the dialog, or drop files to it, but since the message didn’t show, the element had a zero height, and thus nothing to click 🙁

The text was updated successfully, but these errors were encountered:

I’ll have a look at it. I strongly recommend to use the base CSS at least which provides basic layout for the dropzone.

I tried to create the dropzone programmatically, and it fails to. I was going to open a new issue, but I think it’s related to the issue jQuery is having.

I think the problem is that the target element does not have the dropzone css class attached to it.

I get the same result (or lack of) with trying to use the class vs jQuery, and you’ve done a great job on error trapping so as I experiment w/ it, it let’s me know it won’t work.

If I add the dropzone class, and leave the jQuery or Class method in place I get the error letting me know dropzone is already attached.

Uncaught Error: Dropzone already attached.

I’ve looked in the code, and I can’t figure out where to add the dropzone css class. Every time I successfully modify your code to add the css class to the parent element, I keep getting the error that it’s already a dropzoen.

Why do you want to create it programmatically? You can simply create a configuration for it and setup all your event listeners in the init option function. I think that would solve your problems.

If you absolutely need to create the Dropzone programmatically, I can only suggest to add the class itself in the init function. That’s a bit of a hack, but I haven’t implemented an option for it yet (see #71). The code would look something like:

As I said though, the much cleaner and more elegant version would be to just create the configuration for it so Dropzone uses it when creating the Dropzone. Would look like this:

I’m closing this issue because IMO this is not a bug, but a missing feature at most. Feel free to continue the discussion if you disagree.

Not to drag this into the ground, but the hack you provided, is essentially what I tried to do, and I get the Uncaught Error: Dropzone already attached. message when adding the class.

I got the same result when I tried to hack the dropzone.js file directly, and add the css class when the instance was created. (I would assume I did this in the wrong place though.)

When I attempt to use the Dropzone.forElement() method to assign the dropzone to a var, it’s always returns null. I added a console.log() statement in the forElement loop and the dropzone I passed form#listingPhoto shows up as form#listingPhoto.dropzone clickable when the instance is created.

Because I can’t match the element, I always get null.

I think the real issue is the autoloading for dropzone. I think all of my code executes before dropzone and unless I create a setInterval() method to detect it, and then add my code to the instance.

If you don’t create your dropzone peogrammatically you won’t get the «Dropzone already attached» error. Have you tried the second solution I provided? It’s what everybody uses and it works. (Also please make sure that you are using the latest version of dropzone) if you’re still having trouble please post your source code.

I have the same problem to make dropzone by ajax.
I made a div element at first.

@mjza I resolved most of my issues by extending Dropzone from with in the init() method. I couldn’t extend Dropzone in instantiation because you get an uncaught exception error if your custom options aren’t listed in the Dropzone class.

Using the jQuery .on() method I was able to attach events listeners to the thumbnails. So in the end I was able to set a Maximum limit on the number of files to be uploaded by extending Dropzone in the init() method, and remove thumbnails from Dropzone w/ jQuery.

I still have a few things that need worked out, such as removing files from the queue once the max limit is reached, but all in good time.

Источник

Solution 1

Solved issue by using following code setup.

So you can either:

Turn off autoDiscover globally like this: Dropzone.autoDiscover = false;, or
Turn off autoDiscover for specific elements like
this: Dropzone.options.myAwesomeDropzone = false;

Reference:
FAQ on dropzone

Solution 2

Nothing worked for me so i went to the dropzone.js file and change the line that throw an error (i think in many versions it’s in line 426):

if (this.element.dropzone) {
    throw new Error("Dropzone already attached.");
  }

so i replace

throw new Error("Dropzone already attached.");

with

return this.element.dropzone;

and it is working

Solution 3

Dropzone.autoDiscover = false;
$('#bannerupload').dropzone({
    url: "/upload",
    maxFilesize: 100,
    paramName: "file",
    maxThumbnailFilesize: 5,
    init: function() {      
      this.on('success', function(file, json) {       
        jQuery("input#mediaid").val(json);
      });
    }
  });

Comments

I am using following code for drop zone but i am getting error, i tried to debug it but i am not able to resolve this action plz guide

http://jsfiddle.net/anam123/rL6Bh/

 -------------------> "Error: Dropzone already attached.

  throw new Error("Dropzone already attached.");"

Code::

https://gist.github.com/compact/8118670

snippts:

 /**
 * An AngularJS directive for Dropzone.js, http://www.dropzonejs.com/
 * 
 * Usage:
 * 
 * <div ng-app="app" ng-controller="SomeCtrl">
 *   <button dropzone="dropzoneConfig">
 *     Drag and drop files here or click to upload
 *   </button>
 * </div>
 */

angular.module('dropzone', []).directive('dropzone', function () {
  return function (scope, element, attrs) {
    var config, dropzone;

    config = scope[attrs.dropzone];

    // create a Dropzone for the element with the given options
    dropzone = new Dropzone(element[0], config.options);

    // bind the given event handlers
    _.each(config.eventHandlers, function (handler, event) {
      dropzone.on(event, handler);
    });
  };
});

angular.module('app', ['dropzone']);

angular.module('app').controller('SomeCtrl', function ($scope) {
  $scope.dropzoneConfig = {
    'options': { // passed into the Dropzone constructor
      'url': 'upload.php'
    },
    'eventHandlers': {
      'sending': function (file, xhr, formData) {
      },
      'success': function (file, response) {
      }
    }
  };
});

I am facing same issue … I tried Dropzone.autoDiscover = false; and the other option too … but I am getting same error
I eventually gave up. Just commented out the function in dropzone.js Dropzone._autoDiscoverFunction = function () { if (Dropzone.autoDiscover) { return Dropzone.discover(); } };
Not sure why this was down-voted, it worked for me. The Dropzone.autoDiscover = false; was all that was needed before the rest of the code.
ofcourse this works, i tested and implimented this myself
@ProgrammerCk — Yeah, who could doubt someone with 16 reputation and improper capitalization and punctuation?
this should be the correct answer. i have faced a similar issue and putting this function before each dropzone instance solved it.

Recents

Источник

I have this sample:

link

I managed to create this form but unfortunately it does not work because I get error.

Dropzone already attached.

CODE HTML:

<div class="dropzone dz-clickable" id="myDrop">
  <div class="dz-default dz-message" data-dz-message="">
    <span>Drop files here to upload</span>
  </div>
</div>

CODE JS:

Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("div#myDrop", { url: "/file/post"});

// If you use jQuery, you can use the jQuery plugin Dropzone ships with:
$("div#myDrop").dropzone({ url: "/file/post" });

I set up Dropzone.autoDiscover = false; but unfortunately still not working.

Can you please tell me what is causing this problem?

12 Answers

Defining below code globally will help:

Dropzone.autoDiscover = false;

You should use either

var myDropzone = new Dropzone("div#myDrop", { url: "/file/post"});

$("div#myDrop").dropzone({ url: "/file/post" });

not both. Basically what you are doing is calling the same thing twice.

Add Dropzone.autoDiscover = false before $(document).ready like this:

Dropzone.autoDiscover = false;
$(document).ready(function () {

});

<script>
  Dropzone.autoDiscover = false;
  $(document).ready(function() {
    var myDrop= new Dropzone("#myDrop", {
      url: '/admin/media'
    });
  });
</script>

instead of

<script>
  $(document).ready(function() {
    Dropzone.autoDiscover = false;
    var myDrop= new Dropzone("#myDrop", {
      url: '/admin/media'
    });
  });
</script>

This error can also happen when an element has already had a class dropzone.

However if this is removed then for some reason the default style will not apply after Dropzone is initiated. My only workaround is to create a custom style for that element.

After searching and trying several solution on the net, here I got one of the best solutions for solving this issue.

HTML

<div id="some-dropzone" class="dropzone"></div>

JavaScript

Dropzone.options.someDropzone = {
  url: "/file/post"
};

This is my hackish workaround. It basically checks if dropzone is loaded as DOM, and if it has not, then it will create one.

    function dropzoneExists(selector) {
        var elements = $(selector).find('.dz-default');
        return elements.length > 0;
    }

    var exists = dropzoneExists('div#photo_dropzone');
    if(exists) return;

    $('div#photo_dropzone').dropzone({
       ...
       ...
    });

UPDATE: It is suggested to figure out why the dropzone is initiated twice. Fixing that is the right way, and this answer is only a technically-debtful workaround.

I fixed this issue by editing the dropzone.js. just go to dropzone.js and replace

if (this.element.dropzone) {
    throw new Error("Dropzone already attached.");
  }

with

if (this.element.dropzone) {
    return this.element.dropzone;
 }

this solution is originally found by Haskaalo, posted on the github issues

This solution did not work for me when using Angular:

Dropzone.autoDiscover = false;

The only way I could get it to work with Angular without having to edit the dropzone.js file was this:

@ViewChild('containerElement') containerElement: ElementRef;

...    

/* Make sure all Dropzone instances are destroyed */
if (Dropzone.instances.length > 0) {
    Dropzone.instances.forEach((e: any) => {
        e.off();
        e.destroy();
    });
}

/* Remove existing dropzone element from the DOM */
const element: any = document.getElementById('my-dropzone');
element.remove();

/* Create new dropzone DOM element */
const html =
` <div id="my-dropzone" class="dropzone">` +
    `<div class="dz-message">` +
    `<i class="fad fa-cloud-upload-alt dz-message-icon"></i>` +
    `<p>Drop files, or click to browse</p>` +
    `</div>` +
`</div>`;
this.containerElement.nativeElement.insertAdjacentHTML('beforeend', html);

sometimes is because you have twice elements html with the same id dropzone.

<div id="dropzone" class="dropzone"></div>

<div id="dropzone" class="dropzone"></div>

You can concat your id «myDrop» with some unique value for every single instance of Dropzone.

Example:

 html: <span className="custom-file-input" id={"my-dropzone" + this.dropzoneId}></span>

 in func: 
 this.myDropzone = new Dropzone("span#my-dropzone" + this.dropzoneId, options);

Go to dropzone.js and replace if(n.element.dropzone) throw new Error(«Dropzone already attached.»; with if(n.element.dropzone) return this.element.dropzone;

Источник

I have recently received feedback from customers, and sometimes there will be nothing when uploading files. It is normal most of the time.

After the problem was reproduced, f12 opened the background console and found the following prompt:

Uncaught Error: Dropzone already attached.    at new b (dropzone.min.js:1)    at HTMLSpanElement.<anonymous> (dropzone.min.js:2)    at Function.each (jquery.min.js:2)    at m.fn.init.each (jquery.min.js:2)    at m.fn.init.undefined.jQuery.fn.dropzone (dropzone.min.js:2)    at Object.orderRegisterReceivevoucher.init (eval at <anonymous> (jquery.min.js:2), <anonymous>:44:22)    at HTMLDocument.eval (eval at <anonymous> (jquery.min.js:2), <anonymous>:172:31)    at j (jquery.min.js:2)    at Object.add [as done] (jquery.min.js:2)

According to the prompt, the analysis is caused by multiple initializations of Dropzone. Open the original code to check the problem. The interface is dynamically loaded by the bootstrap modal component, and the instance is uploaded and initialized repeatedly after each load.

$(".file_up_load").dropzone({           url: "/amanager/home/uploadFile.htm",//transfer to the file server          addRemoveLinks: true,                  autoProcessQueue: true,          uploadMultiple: true,          parallelUploads: 10,                    dictDefaultMessage: "Please put the image you want to upload into this directory",                    ictResponseError:'File upload failed!',          acceptedFiles: ".jpg,.gif,.png",                    dictInvalidFileType: "You cannot upload this type of file, the file type can only be *.jpg, *.gif, *.png.",                    dictFallbackMessage: "The browser is not supported",                    dictFileTooBig: "The file is too large to upload the largest file supported.",           .....

Adding the following settings according to the online prompts still has no effect:

Dropzone.autoDiscover = false;$('#Modal').on('hidden.bs.modal', function () { applyZone.destroy();});

Although the above code does not solve the problem, most of them can know the way to solve the problem, which is to destroy the object after the window is closed. So there is the following code.

var applyZone = $(".file_up_load").dropzone ....$('#content_body_option').on('click',"button.close", function () {      if(applyZone){        applyZone.destroy();      } });

After the test, it is prompted that the object has no destroy method. Continuing to analyze the code, the jquery object used to create the dropzone was created. Use the native method to create the upload object, the code after transformation is as follows:

Dropzone.autoDiscover = false;    var applyZone = new Dropzone("#file_up_load_temp_register"    ...    $('#content_body_option').on('click',"button.close", function () {      if(applyZone){        applyZone.destroy();      }    });

According to the above modification, the problem is solved.

Источник

«Dropzone already attached.» error. #1889

Dropzone min js 1 uncaught error dropzone already attached

jQuery plug in has issues #65

Solution 1

Solution 2

Solution 3

Related videos on Youtube

Comments

Recents

Related

12 Answers