We Keep Coding

Dropzone.js removedfile event callback - parent dropzone

I have a dropzone in my project and I need to delete files from a folder when clicked on the remove button. I create the dropzones with this:
$('.dropzone').dropzone(
{
init: function ()
{
this.on("removedfile", function (file)
{
console.log($(file.previewTemplate));
console.log(file.previewTemplate.children[7].value);
//$.post("delete-file.php?id=" + file.serverId); // Send the file id along
});
}
});
My dropzone HTML is:
<div class="dropzone" style="width: 500px; height: 500px;" data-uploadPath="the/path/here/" data-multipleUpload="true"></div>
Now, the file parameter contains the previewTemplate of the file. I want to get the/path/here/ by the parents, but if I use:
file.previewTemplate.parentNode
It returns undefined, why doesn't parentNode work?

If you override removedFile function, then need to manually remove preview of image. Dropzone will not automatically remove file preview.
removedfile: function (file) {
file.previewElement.remove();
}

Alright, I faced a similar problem, and based on the comments on your question, I figured out the solution.
The arguments are of no use, but the context 'this' is.
this.element returns the respective dropzone element. In my case, I needed to find the enclosing form element. Hence, all I needed to do was
var $form = $(this.element).closest('form');

browse image not cropping properly

I have created an application using cropper.js for cropping an images. The application is working and the image is cropping, which can be seen in the preview.
After the first image is cropped, if you load a second image I am not able to crop. Also, when I double click on the image and then click again to drag, some unexpected movement of the image is happening.
Can anyone please tell me some solution for this
Plunker
script
var $image = $('.img-container > img'),
options = {
modal: true,
guides: true,
autoCrop: false,
dragCrop: true,
movable: true,
preview: '.preview',
crop: function(data) {
}
};

I'm a bit confused about the problem you're seeing, but this is what I see:
The second time I load an image into your Plunker the crop region disappears, but I can still click and drag a crop region.
The reason for this is the crop box element is display:none. This is because your old cropper has been hidden, and you need to reset() and clear() it before it can be used with the new image. You've already got the following:
$image.one('built.cropper', function () {
URL.revokeObjectURL(blobURL); // Revoke when load complete
}).cropper('reset', true).cropper('replace', blobURL);
but your missing clear()
$image.one('built.cropper', function () {
URL.revokeObjectURL(blobURL); // Revoke when load complete
}).cropper('reset', true).cropper('clear').cropper('replace', blobURL);
Plunker (since you asked so politely)

How to disable clickable the form with Dropzone.js?

I'm using Dropzone.js to upload files to the server. I setting up my Dropzone maxFiles parameter to 10 and I was tried this:
$('.dropzone').dropzone({
maxFiles: 10,
init: function() {
this.on('maxfilesreached', function() {
$('.dropzone').unbind('click');
});
}
});
...but not working. What is the solution to remove clickable from .dropzone or any other way to prevent user to add more files?

Why do not you just use CSS to disable the click event.
When max files is reached, Dropzone will automatically add a class of dz-max-files-reached.
Use css to disable click on dropzone:
.dz-max-files-reached {
pointer-events: none;
cursor: default;
}

This works PERFECTLY!!! and works on 4.0.1
//disable the click of your clickable area
$(".dz-hidden-input").prop("disabled",true);
//enalbe the click of your clickable area
$(".dz-hidden-input").prop("disabled",false);

myDropzone.on('maxfilesreached', function() {
myDropzone.removeEventListeners();
});
myDropzone.on('removedfile', function (file) {
myDropzone.setupEventListeners();
});
Don't forget init _updateMaxFilesReachedClass if you have files from your server.
myDropzone._updateMaxFilesReachedClass()

If clickable option is set to true, the dropzone element itself will be clickable, if false nothing will be clickable.
You can also pass an HTML element, a CSS selector (for multiple elements) or an array of those. In that case, all of those elements will trigger an upload when clicked.
var myDropzone = new Dropzone("div.dropzone", { url: "/file/post", clickable: false });

There is an option field on the Dropzone object called clickable that defaults to true.
Depending on your scenario you can either set this to false when you register your Dropzone instance or you can update the value at runtime as needed.

The easiest way is: myDropzone.disable();

Here we go, updated based on comments below.
How to disable the dropzone "click to open file dialog box" event when maxFiles is reached:
$('.dropzone').dropzone({
maxFiles: 10,
init: function() {
this.on('maxfilesreached', function() {
$('.dropzone').removeClass('dz-clickable'); // remove cursor
$('.dropzone')[0].removeEventListener('click', this.listeners[1].events.click);
});
}
I don't know how reliable the "1" in this.listeners[1] is, but that's where the click event function lives in my current dropzone configuration.

This is how I achieved this:
$('.dz-message').html('<span class="text-center"><span class="font-lg visible-xs-block visible-sm-block visible-lg-block"><span class="font-lg"><i class="fa fa-caret-right text-danger"></i><i>Maximum uploads have been reached</i></span></span></span>');
$('.dropzone').removeClass('dz-clickable');
$('.dropzone')[0].removeEventListener('click', myDropzone.listeners[1].events.click);
$('.dropzone')[0].removeEventListener('drop', myDropzone.listeners[0].events.drop);
$('.dropzone')[0].removeEventListener('dragstart', myDropzone.listeners[0].events.dragstart);
$('.dropzone')[0].removeEventListener('dragenter', myDropzone.listeners[0].events.dragenter);
$('.dropzone')[0].removeEventListener('dragover', myDropzone.listeners[0].events.dragover);
$('.dropzone')[0].removeEventListener('dragleave', myDropzone.listeners[0].events.dragleave);
$('.dropzone')[0].removeEventListener('dragend', myDropzone.listeners[0].events.dragend);

The Dropzone object has clickable field. That default value is true.
Depending on your scenario you can either set this to false.
$('.dropzone').dropzone({
maxFiles: 10,
clickable: false,
init: function() {
}
});

#XuDing's Answer works like a charm, but I had an edge case where I wanted to keep remove links working so adding an extended solution for that.
Add below CSS classes
.dz-max-files-reached {
pointer-events: none;
cursor: default;
}
.dz-remove {
pointer-events: all; cursor: default;
}

How to display cancel button for failed uploads in fineuploader?

I am using fineuploader. Some upload may fail as user try to upload duplicate file.
I see a red color and the error message from server is shown.
I am not seeing any cancel OR Remove button that would allow the user to start fresh again by selecting a new file.
I was expecting fineuploader to show cancel button on failed files but it is not.
I can add onError callback then find the right row and show the cancel or other button by adding Remove button. That sound messy solution.
That cancel button would remove that file and let user select another file.
Can I add this capability by setting options in the settings?
var fileUploader = new qq.FineUploader({
element: $('#manual-fine-uploader')[0],
request: {
endpoint: 'upload/UploadFiles',
},
multiple: true,
autoUpload: false,
validation: {},
text: {uploadButton: '<i class="icon-plus icon-white"></i> Select File'},
callbacks: {
onSubmit: function (id, file) {//my custom code },
onCancel: function(id, file){ if(filesCount>=1) filesCount--;},
onComplete: function (id, fileName, responseJSON) {filesCount--;}
},
failedUploadTextDisplay: {
mode: 'custom',
maxChars: 40,
responseProperty: 'error',
enableTooltip: true
}
});
Thanks

Fine Uploader only displays a cancel button while a file is uploading (as well before uploads have started if you have set the autoUpload option to false). Showing a cancel button after the upload has completed seems like it would be a bit confusing to users, but I can see why you might want to display a "remove" button.
You can easily do this by adding the button to the file portion of your template. For example, your template might look similar to this:
<div class="qq-uploader-selector qq-uploader">
...
<ul class="qq-upload-list-selector qq-upload-list">
<li>
...
<button class="remove-button-selector" style="display:none">Remove</button>
</li>
</ul>
</div>
Then, add a click handler to purge the file from Fine Uploader's internals & the UI:
$('#manual-fine-uploader').on("click", ".remove-button-selector", function() {
var fileId = fileUploader.getId(this);
fileUploader.cancel(fileId);
});
Finally, in your onComplete handler, show the button if the upload has failed:
onComplete: function(id, name, response, xhr) {
var fileItemEl = fileUploader.getItemByFileId(id);
if (!response.success) {
$(fileItemEl).find(".remove-button-selector").show();
}
}
Additionally, since you are already using jQuery in your project, I strongly suggest you make use of the Fine Uploader jQuery plug-in. It will make your life a bit easier.

How to Fix my jQuery code in IE?? Works in Firefox

I am using jQuery to show/hide a div container (#pluginOptionsContainer), and load a page (./plugin_options.php) inside it with the required POST vars sent.
What POST data is sent is based on the value of a select list (#pluginDD) and the click of a button (#pluginOptionsBtn)...
It works fine in Firefox, but doesn't work in IE.. The '$("#pluginOptionsContainer").load()' request never seems to finish in IE - I only see the loading message forever...
bind(), empty() and append() all seem to work fine in IE.. But not load()..
Here is my code:
// wait for the DOM to be loaded
$(document).ready(function() {
// hide the plugin options
$('#pluginOptionsContainer').hide();
// This is the hack for IE
if ($.browser.msie) {
$("#pluginDD").click(function() {
this.blur();
this.focus();
});
}
// set the main function
$(function() {
// the button shows hides the plugin options page (and its container)
$("#pluginOptionsBtn") .click(function() {
// show the container of the plugin options page
$('#pluginOptionsContainer').empty().append('<div style="text-align:center;width:99%;">Loading...</div>');
$('#pluginOptionsContainer').toggle();
});
// set the loading message if user changes selection with either the dropdown or button
$("#pluginDD,#pluginOptionsBtn").bind('change', function() {
$('#pluginOptionsContainer').empty().append('<div style="text-align:center;width:99%;">Loading...</div>');
});
// then update the page when the plugin is changed when EITHER the plugin button or dropdown or clicked or changed
$("#pluginDD,#pluginOptionsBtn").bind('change click', function() {
// set form fields as vars in js
var pid = <?=$pid;?>;
var cid = <?=$contentid;?>;
var pDD = $("#pluginDD").val();
// add post vars (must use JSON) to be sent into the js var 'dataString'
var dataString = {plugin_options: true, pageid: pid, contentid: cid, pluginDD: pDD };
// include the plugin option page inside the container, with the required values already added into the query string
$("#pluginOptionsContainer").load("/admin/inc/edit/content/plugin_options.php#pluginTop", dataString);
// add this to stop page refresh
return false;
}); // end submit function
}); // end main function
}); // on DOM load
Any help would be GREATLY appreciated! I hate IE!

IE sometimes caches responses. You can check by watching the requests IE makes to the server. Fiddler2 is a tool that's good for watching http requests.
If you notice that you hit submit and don't see any http requests being made, IE is caching the result.
If that's the case, you can add a random number to the url to cache bust it:
$("#pluginOptionsContainer").load("url.php?random=" + Math.random()*99999, dataString);

IE is sometimes pickier then FF when it comes to duplicate element ids.
Check if every ID you use is used only once and is not created anew during the ajax call.

If caching is the issue, then try setting cache = false in jquery's ajax setup...
$.ajaxSetup ({
cache: false,
});