I am using Dropzone js for file uploads. This works fine for all events but i do not know how to detect an event when user starts dragging a file but does not drop it over to the dropzone (or let's say he decides to cancel the drop operation)
JSP
<div class="FilesDropzone dz-clickable" id="mydropzone" style="width:97%;height:50px;"><span>Drop files here!</span>//area for further processing</div>
Javascript
var myFilesDropzone = new Dropzone("div#mydropzone", { url:addedFilesResourceURL});
myFilesDropzone .on("dragover", function(event){
var dropzoneFilesHolder = document.getElementById('mydropzone');
dropzoneFilesHolder.setAttribute('style', 'height:150px;border:3px dashed #2AAAE6;');
});
myFilesDropzone .on("drop", function(event){
//display the dropped file });
Currently a blue border area is displayed that shows users where to drop the file. So if user decides to cancel drop i want to hide that area. But i do not know which event exactly is it.
I tried with dragleave but figure out that it was not the correct event. Any ideas?
Related
Hello everyone i am using dropzone.js to upload pictures to the server with php, but i kind of having problem with it.
I was wondering if there is anyway to disable the dropzone.js auto upload to the server on drag and drop image or on click and select image and use a clickable submit button to manually submit the image to the server
Please any advice or help perhaps a simple code will be appreciated.
Edited
I still haven't got an answer to my questions.
Seriously i feel like this people building this stuff doesn't got it right because the stuff is useless in someways, are they trying to tell me that when a user uploads its profile picture and the dropzone will be stuck there looking at them and them looking at it without a submit button or a confirmation message that the picture has been uploaded then they should continue? seriously?
You can define button in your HTML Form such as
<button id="submit-all">Submit all files</button>
and then add this script
Dropzone.options.myDropzone = {
// Prevents Dropzone from uploading dropped files immediately
autoProcessQueue: false,
acceptedFiles: ".png,.jpg,.gif,.bmp,.jpeg",
maxFilesize: 1,
parallelUploads: 10,
addRemoveLinks: true,
init: function() {
var submitButton = document.querySelector("#submit-all")
myDropzone = this; // closure
submitButton.addEventListener("click", function() {
myDropzone.processQueue();
// autoProcessQueue: true// Tell Dropzone to process all queued files.
});
// You might want to show the submit button only when
// files are dropped here:
this.on("addedfile", function() {
// Show submit button here and/or inform user to click it.
});
}
};
Hope this solves the problem.refrence https://github.com/enyo/dropzone/wiki/Upload-all-files-with-a-button
I am making a custom plugin for the editor provided by Google Closure. The plugin makes it able to add a button.
I am having problems by setting an onclick on the button, the other values are nicely set.
button.innerHTML = event.label;
button.className = event.initialClass;
var extraClasses = event.extraClasses;
if (extraClasses)
{
button.className += ' ' + extraClasses
}
button.onclick = function() { event.onclick };
Does anyone know what I am doing wrong and how I can fix this?
After creating a button it is added to the editors SeamlessField. A second problem that I currently have is that after creating the button, my pointer is inside the button and I can't seem to get it out of there.
I've got the follow piece of code for handling this at the moment. The var button is the created button. button contains: <button class="orange">test</button>
// We want to insert the button in place of the user's selection.
// So we restore it first, and then use it for insertion.
this.restoreOriginalSelection();
var range = this.fieldObject.getRange();
button = range.replaceContentsWithNode(button);
// Done making changes, notify the editor.
this.fieldObject.dispatchChange();
// Put the user's selection right after the newly inserted button.
goog.editor.range.placeCursorNextTo(button, false);
// Dispatch selection change event because we just moved the selection.
this.fieldObject.dispatchSelectionChangeEvent();
Any ideas about how I could fix this second problem aswell?
For the first, it does not look like you have begun using Google Closure event code. Wiring up the button to the 'click' event in Google Closure would be as follows:
goog.events.listen(button, goog.events.EventType.CLICK, event.onclick)
You should also be investigating the goog.dom and goog.dom.classes namespaces if you'd like to use Google Closure's wrappers around standard CSS class and text DOM manipulation.
For the second, were you testing in Chrome? If so, you might have ran into a range issue in Webkit, documented within the Closure code itself:
https://code.google.com/p/closure-library/source/browse/closure/goog/editor/range.js#174
I have gotten around this in the past by inserting an empty <span> element as a sibling after the offending element (the button, in your case), and placing the cursor next to the <span> instead. However, there's nothing stopping the user from moving the cursor back inside your button. You'll have to add more logic to prevent a user from placing the cursor within the button's text.
We're using Filepicker.io in our application and it works really well. I need 2 options for this plugin that I can't find in their docs.
1) Disable - We only want a user to upload a single image per interaction. If Filepicker has already processed a file in the current interaction I'd like to disable the plugin until they submit the form, or remove the current image.
2) Destroy - Filepicker provides a way to programmatically convert a standard input field to a Filepicker.io widget: constructWidget. I don't find a destroyWidget function in the docs. Does anyone know if this is an option?
This is the code we're currently using:
<input id="upload-image-input" value="Upload an image." data-fp-
services="COMPUTER,URL,FLICKR,FACEBOOK,INSTAGRAM,DROPBOX,PICASA">
var element = document.getElementById('upload-image-input')
view = this;
// make sure filepicker isn't already displaying
if (element.style.display !== 'none') {
element.type="filepicker-dragdrop";
element.onchange = function(e){
var text = view.set(e.fpfile.url),
};
filepicker.constructWidget(element);
}
I'd also like to know if there's an event which gets triggered when a file is removed using the drag and drop widget's "X" button.
We don't currently have support for these features directly in the SDK, but there are ways to produce this behavior. For instance, you can add a custom class to the element and then use that to add event listeners, remove it from the dom, or disable it.
On the calling page, I bind my fancyBox using an href, like so:
<a id="myId" href="myContent.cfm">Click me</a>
<script>
$(document).ready(function(){
$('a#myId').fancybox({
// my initialization params
});
});
</script>
In myContent.cfm, a default "filter" is built, which has add and delete buttons. Something like this:
<div id="fd_0" class="eachFilter blank">
<select name="filterBy" class="fl filterBy">
<option selected="selected">-- Add a Filter --</option>
<!--- add more options --->
</select>
<button type="button" class="addFilter default" title="Add a filter to the current filter set.">+</button>
<button type="button" class="deleteThisFilter default" title="Delete this filter from the current filter set.">-</button>
</div>
When the addFilter button is clicked, a new "default" filter is added to the dom after the filter that was clicked, using consecutive ids. Conversely, clicking the deleteFilter button causes that filter to be deleted and all remaining filters to have their ids renumbered; with the exception that there must be one filter remaining. My original code used .live() to attach event handlers to the newly created elements, like so:
$('.addFilter).live('click', function(){
// get number of existing filters
// create new blank filter
// add to the dom after the filter whose button was just clicked
});
$('.deleteThisFilter).live('click', function(){
// if there is more than one existing filter, use .remove() to remove the parent .eachFilter div
// renumber the existing filter ids consecutively
});
After the user has created all the "filters" they need, they may either "apply" them, which closes the fancybox and reloads a grid with the new, filtered parameters, or simply cancel and close the fancybox.
This all works fine the first time, and on reopening the fancybox, the initial blank filter's add button works as expected. However, after adding a second filter, any filter that was added to the dom has multiple event handlers added to the addFilter and deleteFilter buttons. If I added one filter the first time, then return to the fancybox the second time, then add a filter by clicking on the default filter's add button, then click on the newly created filters add button, two more filters are added. If I close, reopen the fancybox a second time, add a filter, and click on that filters add button, three more filters are added.
So here's what I've tried so far:
1) Changing the .live() calls to
$(document).on('click', 'addFilter', function(){ // add my filter code});
2) Putting the code to create the filters into a function, which at the end uses .bind() to add the event handlers to the newly created filters; followed by using
$('.addFilter').unbind('click', fnCreateMyFilter())
on closing the fancybox.
3) Using .live() ONLY on the newly created filter elements, and a regular click handler on the default element
4) Upgrading jQuery to 1.8.3 from our current version
5) Calling .remove() on all elements inside the fancybox .onClosed function (although I was under the impression that closing fancybox does actually remove the elements from the dom).
Any thoughts?
As always, it's the most obvious thing which isn't readily apparent. Moving the .js code out of the popup into its own file fixed the problem, which is something that I had intended to do after getting all the code to work.
I was using a combination of Fancybox2 http://fancyapps.com/fancybox/ and Noty popups http://needim.github.com/noty/ and having a similar problem.
I loaded a product edit form into a fancybox via ajax using class='fancybox.ajax' in the href link.
Everything saved fine when I clicked my save button until I reloaded another (or the same) product in fancybox.
I was using this code to trigger my save buttons:
$(document).on("click",".save_product_button",function(){
... post to ajax file to save info
});
Using that triggered multiple noty popups and saves (once for each time I'd loaded a fancybox since refreshing), because the save button was already loaded in the document model that many times. (I guess??)
But when I changed my on() to the save button's immediate parent, all my problems went away.
$("#productBox").on("click",".save_product_button",function(){
... post to ajax file to save info
});
Everything saved once from then on.
Plus, that should make the code a tad quicker.
Hope this helps someone not waste half a day like I just did.
I have a Google earth plugin istance with data loaded from a kml file.
The kml contains polygons, when clicking on the polygon the baloon with the contenent of the tag is opened.
How can I attach an handler to the opening of the baloon, this handler will then create a custom baloon and stop the default event.
I think it should be something like this, I just don't know what event to listen for!
google.earth.addEventListener("SOMETHING", 'click', function(event) {
//Code to create custom baloon
});
You are listening for 'click', what you need to know is what to listen for click from.
In this case I guess you want to listen for clicks on any polygons.
To do this set up a generic listener for all clicks, then test if the click is on a polygon, if so then cancel the default behaviour and display a custom balloon.
e.g.
google.earth.addEventListener(ge.getWindow(), 'click', function(e) {
if (e.getTarget().getType() == 'KmlPlacemark' &&
e.getTarget().getGeometry().getType() == 'KmlPolygon') {
// Prevent the default balloon from appearing.
e.preventDefault();
// create a custom balloon attached to the target
var balloon = ge.createHtmlStringBalloon('');
balloon.setFeature(e.getTarget());
balloon.setContentString("custom baloon!");
ge.setBalloon(balloon);
}
});