We Keep Coding

Hearer document.addEventListener (function () {function as in the example

I'm having a little problem that I do not know how to solve, I'm trying to run an example that is in ngcordova site but without success.
When I use the plugin $ cordovaInAppBrowser.open ({...
it usually works but to place the event listener
document.addEventListener (function () {... it does not open the link
in cordovaInAppBrowser.open $ ({...
I need to use the event listener to use the functions
necessary application, I can not understand what is
going on I am using the example without touching on
anything
Can someone help me ?
Here is the sample code
module.controller('ThisCtrl', function($cordovaInAppBrowser) {
var options = {
location: 'yes',
clearcache: 'yes',
toolbar: 'no'
};
document.addEventListener(function () {
$cordovaInAppBrowser.open('http://ngcordova.com', '_blank', options)
.then(function(event) {
// success
})
.catch(function(event) {
// error
});
$cordovaInAppBrowser.close();
}, false);
$rootScope.$on('$cordovaInAppBrowser:loadstart', function(e, event){
});
$rootScope.$on('$cordovaInAppBrowser:loadstop', function(e, event){
// insert CSS via code / file
$cordovaInAppBrowser.insertCSS({
code: 'body {background-color:blue;}'
});
// insert Javascript via code / file
$cordovaInAppBrowser.executeScript({
file: 'script.js'
});
});
$rootScope.$on('$cordovaInAppBrowser:loaderror', function(e, event){
});
$rootScope.$on('$cordovaInAppBrowser:exit', function(e, event){
});
});
Only need to open an external page but document.addEventListener listener (function () {not let me open and I need him to be present as in the sample code to work correctly.

The only solution I found was this direct opening the window and making the necessary changes directly to the external page, thank the help of all.
Here's the code I used
var options = {
       location: 'yes'
       clearcache 'yes'
       toolbar: 'no'
    };
   
$ Scope.ircadastro = function () {
$ CordovaInAppBrowser.open ('url', '_blank', options)
    }

Dropzone JS Global Events

I might have this wrong but Dropzone JS seems to do things in a very odd way. http://www.dropzonejs.com/#events
This is the recommended method of adding an event
Dropzone.options.myAwesomeDropzone = {
init: function() {
this.on("addedfile", function(file) { alert("Added file."); });
}
};
This assumes you know what myAwesomeDropzone is. But if you create them programatically then you may not know what myAwesomeDropzone is. It could be anything, e.g. if you have three different Dropzones on the page based on some ID then the identifier won't be myAwesomeDropzone or even guessable.
It would be handy to be able to do
$(".dropzone").on("addedfile", function(file) {
alert("hello");
});
But it does not work. I just want to be able to attach a global event to all my dropzones.

If you have several dropzones in the same page, and you need for each one to have a different configuration, you have to initialize each one separately.
As I see you are using jQuery know that you can also initialize the dropzone elements using the Dropzone jQuery plugin already included in dropzone.
As example imagine that each dropzone accepts a different file type:
Dropzone.autoDiscover = false;
$("#dropzone1").dropzone({
url: 'urlForDropzone1.php',
acceptedFiles: 'application/pdf',
init: function(){
this.on("addedfile", function(file) {
alert("Added" + file.name + " on Dropzone 1.");
}),
this.on("success", function(file) {
alert(file.name " Uploaded from Dropzone 1")
})
}
});
$("#dropzone2").dropzone({
url: 'urlForDropzone2.php',
acceptedFiles: 'image/*,.jpeg,.jpg,.png,.gif',
init: function(){
this.on("addedfile", function(file) {
alert("Added" + file.name + " on Dropzone 2.");
}),
this.on("success", function(file) {
alert(file.name " Uploaded from Dropzone 2")
})
}
});
Notice that first you need to disable the autodiscover feature, then initialize each dropzone separately, the url are optional, don't need to include them if you already have them in the html.

You can append dropzone very similar as in your 2nd snippet. When you attach the configuration directly when initializing the dropzone.
new Dropzone(".dropzone", {
url: 'someUrl',
addedfile: function () {
alert('Hallo');
}
});

The below works, my issue was that I had dropzone.js included twice which made Dropzone.autoDiscover = false; be ignored.
Dropzone.autoDiscover = false;
$(".dropzone").on("addedfile", function(file) {
alert("hello");
});

jQuery File Upload hooked to button

I am attempting to use the jQuery File Upload Plugin here
The behavior I want is similar to the home page that loads - i.e - the ability to select multiple files - when selected I don't need the button to upload files individually (just remove with the cancel button individually) and remove all with the cancel button along the top bar
I am developing my site in c# mvc and the file gets uploaded to a ECM solution via CMIS Browser Bindings so I dont actually hit an MVC controller method. As I am using Browser Bindings I need to upload each file individually to the CMIS Endpoint. The code works fine doing an auto data submit for each file
So the working code I have is:
$('#uploadFile').fileupload({
replaceFileInput: false,
singleFileUploads: true,
add: function (e, data) {
$.each(data.files, function (index, file) {
data.url = 'mycmis_url';
data.type = 'POST';
data.submit();
});
},
done: function (e, data) {
alert("Done");
}
});
If I do have 3 files selected to upload I will get 3 'Done' alerts but the 3 files all upload successfully. However as mentioned the behavior I want is one Uppload All button that would trigger the upload for each of my selected files. I have the code below:
$('#uploadFile').fileupload({
replaceFileInput: false,
singleFileUploads: true,
autoUpload: false,
add: function (e, data) {
$.each(data.files, function (index, file) {
data.url = 'mycmis_url';
data.type = 'POST';
});
$("#uploadAllFilesBtn").unbind('click').on('click', function () { data.submit(); });
},
done: function (e, data) {
alert("Done");
}
});
So I have set the autoUpload property to false but if I select two files and then click my Upload All Files button as my uploadAllFiles button is outside my each loop if my first selected file is called foo.txt and my 2nd selected file is bar.txt it will only upload bar.txt.
Has anyone got any idea how I could have a button called upload all that would trigger a data.submit for each individual file?

Incorporating code from your later question:
$('#uploadFile').fileupload({
replaceFileInput: false,
singleFileUploads: true,
add: function(event, data) {
data.url = 'myUrl';
data.type = 'POST';
data.context = $('<tr>'
+ '<td><strong>Selected File : </strong>' + data.files[0].name + '</td>'
+ '<td> </td>'
+ '<td><button type="button" class="removeBtn btn btn-default">'
+ '<span class="glyphicon glyphicon-remove-circle"></span>'
+ 'Remove File</button></td>'
+ '</tr>')
.appendTo('#files')
.data('data', data);
}
});
$('#files').on('click', '.removeBtn', function() {
$(this).closest('tr').remove();
});
$('#uploadAllFiles').click(function() {
var jqXHRs = [];
$('#files').find('tr').each(function() {
jqXHRs.push($(this).data('data').submit());
});
$.when.apply($, jqXHRs).done(function() {
alert('done');
});
});
Note:
Since you have singleFileUploads set to true, the data.files array will always contain exactly one file.
The data is attached to the <tr> element using jQuery's .data() function.
For the "Remove" buttons, the code is using event delegation, which was suggested by #Ekansh's answer to your other question.

Open File Selection dojox/Uploader programmatically

I need to select a file to upload with dojox/Uploader by clicking on a div not related to the widget.
I've tried using on.emit, but nothing happens (also click(), onclick() etc... on domNodes..)
This is my code:
var myUploader = new dojox.form.Uploader({
id : 'myUploader',
url : baseUrl + '/upload/form',
style : {
'overflow': 'hidden',
'position': 'relative',
'opacity' : 0
}
},"uploaderHolder");
myUploader.startup();
var importButtonNode = dom.byId("importDivButton");
on(importButtonNode,"click",function(evt) {
on.emit(myUploader.domNode, "click", {
bubbles: true,
cancelable: false
});
The widget must be hidden, so I can't press widget select button. I need open select file dialog by click other div so... how can I open the file browser programmatically to select a file?

Well, I find out a solution. I take a widgets inner node to call click, and attach a listener to the Uploader change event and complete event...
First, attach click event to a node.
var importButtonNode = dom.byId("myImportDiv");
on(importButtonNode,"click",function(evt) {
myUploader.domNode.childNodes[0].click();
});
Attach to Uploader change and complete events a handler
myUploader.on("change",function(evt){
if(evt[0].type != FileTypes.XSLX_FILE_TYPE){
alert("Error file type must be XLSX");
} else {
var formData = new Object();
formData.idProject = project.id;
myUploader.upload(formData);
}
});
myUploader.on("complete",function(evt){
alert("File Uploaded");
// do things
});
In my case I need send formdata without a form... so use de upload method. Also the file must be XLSX.
I hope this helps.
Regards

TinyMCE 4 with elFinder

Is somebody already tried to integrate elFinder into new (4b1) version of TinyMCE?
It looks like previous implementation isn't working.
Please post some snippets, thanks a lot.

Ok. I found the solution:
Create folder in plugins named elfinder.
Download latest elFinder and put into this folder plugins/elfinder.
Add plugin 'elfinder' to the list of plugins (tinymce.init).
Rename js/elfinder.min.js to js/plugin.min.js
Create file plugin.min.js in root folder of plugin (elfinder/plugin.min.js)
Insert next text inside and save:
tinymce.PluginManager.add("elfinder", function (editor, url) {
editor.settings.file_browser_callback = function (id, value, type,
win) {
$('<div />').dialogelfinder({
url: url + '/php/connector.php',
commandsOptions: {
getfile: {
oncomplete: 'destroy'
}
},
getFileCallback: function (url)
{
var fieldElm = win.document.getElementById(id);
fieldElm.value = editor.convertURL(url, null, true);
if ("fireEvent"in fieldElm) {
fieldElm.fireEvent("onchange")
} else {
var evt = document.createEvent("HTMLEvents");
evt.initEvent("change", false, true);
fieldElm.dispatchEvent(evt)
}
}
});
};
}, ["elfinder/js"]);

I updated the Wiki, should work now when following the steps: https://github.com/Studio-42/elFinder/wiki/Integration-with-TinyMCE-4.x
Primary changes are that TinyMCE doesn't use the InlinePopup plugin any more, the callback is changed and instead of file_browser_callback : 'elFinderBrowser' you have to remove the quotes:
In the TinyMCE init:
file_browser_callback : elFinderBrowser
Add the elFinderBrowser callback to your javascript:
function elFinderBrowser (field_name, url, type, win) {
tinymce.activeEditor.windowManager.open({
file: '/elfinder/elfinder.html',// use an absolute path!
title: 'elFinder 2.0',
width: 900,
height: 450,
resizable: 'yes'
}, {
setUrl: function (url) {
win.document.getElementById(field_name).value = url;
}
});
return false;
}
And finally modify/copy elfinder.html file to use the callback:
<!-- Include jQuery, jQuery UI, elFinder (REQUIRED) -->
<script type="text/javascript">
var FileBrowserDialogue = {
init: function() {
// Here goes your code for setting your custom things onLoad.
},
mySubmit: function (URL) {
// pass selected file path to TinyMCE
top.tinymce.activeEditor.windowManager.getParams().setUrl(URL);
// close popup window
top.tinymce.activeEditor.windowManager.close();
}
}
$().ready(function() {
var elf = $('#elfinder').elfinder({
// set your elFinder options here
url: 'php/connector.php', // connector URL
getFileCallback: function(file) { // editor callback
FileBrowserDialogue.mySubmit(file.url); // pass selected file path to TinyMCE
}
}).elfinder('instance');
});
</script>