Manually Trigger Upload within fineUploaderDnd - javascript

I have a problem. I have autoUpload set to false within $('element').fineUploaderDnd();
I can drag and drop files just fine. However, I can't seem to figure out how to manually trigger the upload. I have tried both of the following:
var uploader = $('#droppable').fineUploaderDnd(/*{ ... }*/);
uploader.fineUploaderDnd('uploadStoredFiles'); //Doesnt work
uploader.fineUploaderDnd('addFiles', handleUploads.fineUploaderFiles); //Also doesnt work
Note that handleUploads.fineUploaderFiles is an array of the 'File' objects the plugin returns to me .on('processingDroppedFilesComplete')
They both give me errors saying they don't support that. I've also tried various methods of using both the Dnd thing for drag/drop and the normal jquery fineUploader for 'addFiles' but that also doesn't seem to work.
What am I missing?

These lines aren't going to work:
uploader.fineUploaderDnd('uploadStoredFiles'); //Doesnt work
uploader.fineUploaderDnd('addFiles', handleUploads.fineUploaderFiles); //Also doesnt work
Because you can only call the uploadStoredFiles and addFiles methods on instances of FineUploader. It appears you are calling these methods on instances of the DnD module.
There are no such options in the standalone Fine Uploader DnD module. The standalone drag-and-drop module doesn't upload anything. It is meant to be used alongside FineUploaderBasic mode instance (note that you can use it outside of Fine Uploader entirely if you want to). This module is provided for FineUploaderBasic users who want to integrate drag & drop support easily into their app. If you are using FineUploader mode, drag & drop is already integrated for you, however.
To achieve this in basic mode
First, add an instance of FineUploader:
var uploader = $("#uploader").fineUploader({ uploaderType: 'basic' /*, ... */ })
Next, add an upload button:
var uploadButton = $("#upload-button").on('click', function () {
$("#uploader").fineUploader('uploadStoredFiles');
});
Then, instantiate your drag and drop module (note that this is separate from FineUploader's instance!):
var dnd = $('#droppable').fineUploaderDnd({
/* custom options */
}).on('processingDroppedFilesComplete', function (event, files) {
uploader('addFiles', files); //this submits the dropped files to Fine Uploader
});
For reference, please see the following:
Difference between FineUploaderBasic & FineUploader mode
Documentation on the standalone DnD module
API for FineUploaderBasic mode

Related

Meteor JS Cannot read property of undefiend

I'm trying to add new library to Meteor project but without successes. For example, I've found a library for Excel export and added it with
meteor add rpgeeganage:excel-builder
and used it in js like here (action on button click)
Template.exportButton.events({
"click #exportButton": function () {
var workSheet = ExcelBuilder.createWorkbook('./', 'sample.xlsx');
}
});
but in brower console I'm getting
Cannot read property 'createWorkbook' of undefined
I have the same problem with other, similar libraries. How to make Meteor work with those libraries?

Using gulp-modernizr how do I specify feature options

My custom Moderniser build includes the following options which I am trying to inject into the gulp-modernizr tool as follows:
gulp.task('modernizr', function() {
allUISrcPlusSassSrc
.pipe(modernizr({
options: [
'backdropfilter',
'backgroundsize',
'bgpositionxy',
'bgrepeatspace_bgrepeatround',
'bgsizecover',
'borderradius',
'cssanimations',
'cssfilters',
'csspointerevents',
'csspseudoanimations',
'csspseudotransitions',
'cssremunit',
'csstransforms',
'csstransitions',
'customevent',
'devicemotion_deviceorientation',
'eventlistener',
'flexbox',
'fontface',
'json',
'nthchild',
'opacity',
'overflowscrolling',
'rgba',
'svg',
'svgasimg',
'svgfilters',
'touchevents',
'xhrresponsetypejson',
'domprefixes',
'setclasses',
'shiv'
]
}))
.pipe(gulp.dest("./output/js/vendor/"))
});
But running this leads to Building your customized Modernizr{ [Error: Error: ENOENT: no such file or directory, open '/Users/davesag/src/test-project/node_modules/modernizr/lib/../src/backgroundsize.js'
Looking in ./node_modules/modernizr/src I can't see any files that match these options. Am I just misunderstanding something? These feature names came straight from my custom-built modernizr file as downloaded previously from the moderniser website includes the following options which I am trying to inject into the gulp-modernizr.
Leaving out the options it builds okay but without the options I'm not getting any feature-classes injected into the HTML element of my page. The supposed auto-detect stuff does not seem to be working.
I checked the Customizr page as per the docs and it seems what I am doing is right. But clearly that's not the case.
How should I be doing this?
options refers to the options that are on the left hand side of the Modernizr builder page. These are typically APIs and convenience functions like Modernizr.mq, Modernizr.atRule, etc.
You want to use the tests option
#Patrick "it doesn't by default. you need to add options: ["setclasses"]"
Actually it's options: ["setClasses"]

Add properties to context in cordova plugin for Application Insights

I use cordova plugin with Application Insight named cordova-plugin-ms-appinsights (https://github.com/MSOpenTech/cordova-plugin-ms-appinsights/blob/master/README.md) and I tried to add my properties to context, that through each request application will send additional info, for example code name of my application.
I tried as below:
appInsights.context.application.codename = "code name app";
appInsights.trackEvent("my event");
and this did not work.
Can I add additional info to context?
There are 2 issues:
1) Cordova plugin seems to use an old version of the JS SDK. You can try to update it manually after it pulls down the old one (take the most recent one from https://github.com/Microsoft/ApplicationInsights-JS/blob/master/dist/ai.0.js)
2) The feature that adds data to ALL telemetry items is not released yet. It was implemented recently - see JS SDK commit on github. You can either wait a bit until it's released or get the latest from master and compile it yourself (and take the result from /JavaScript/min/ai.min.js)
A hacky alternative may be to create a wrapper on top of SDK methods like trackEvent() which adds the data you need (I'm sorry for giving you the JS SDK code equivalent as I haven't used cordova plugin myself):
// this is you implementation of custom data to be attached
// to all telemetry items.
// It needs to return JSON - as it's expected format for custom properties.
// In this specific case you'll create a custom property 'hey' with value 'yo'
var getMyDataJson = function() {
return { hey: "yo"};
}
// this is your wrapper, you'll call it instead of appInsights.trackEvent()
var myTrackEvent = function(data) {
var toBeAttachedToAllItems = getMyDataJson();
appInsights.trackEvent(data, toBeAttachedToAllItems);
}
<...>
// somewhere later you track your telemetry
// this will call your getMyDataJson() function which'll attach
// custom data to your event.
myTrackEvent("tracked!")

Moving created files with JXA

I'm new to JXA scripting, but I'm attempting to troubleshoot some older scripts currently in place here at work. They loop through an InDesign document and create several PDFs based on it. Previously, they would be stored in a folder called "~/PDFExports". However, this doesn't work with 10.10.
If I change the code to just place the PDFs in "~/", it works fine. From there, I'd like to move the files to "~/PDFExports", but I can't seem to find an answer on how to do that. I've seen things about making calls to ObjC, or to call Application('Finder'), but neither work - they both return undefined.
Am I just missing something basic here, or is it really this hard to simply move a file with JXA?
EDIT: Some syntax for how I'm creating the folder in question and how I'm attempting to work with Finder.
//This is called in the Main function of the script, on first run.
var exportFolder = new Folder(exportPath);
if(!exportFolder.exists) {
exportFolder.create();
}
//This is called right after the PDF is created. file is a reference to the
actual PDF file, and destination is a file path string.
function MoveFile(file,destination){
var Finder = Application("Finder");
Application('Finder').move(sourceFile, { to: destinationFolder });
alert("File moved");
}
Adobe apps have long included their own embedded JS interpreter, JS API, and .jsx filename extension. It has nothing to do with JXA, and is not compatible with it.
InDesign's JSX documentation:
http://www.adobe.com/devnet/indesign/documentation.html#idscripting
(BTW, I'd also strongly advise against using JXA for Adobe app automation as it has a lot of missing/broken features and application compatibility problems, and really isn't fit for production work.)
Here's the link to Adobe's InDesign Scripting forum, which is the best place to get help with JSX:
https://forums.adobe.com/community/indesign/indesign_scripting
You could use Cocoa to create the folder
var exportFolder = $.NSHomeDirectory().stringByAppendingPathComponent("PDFExports")
var fileManager = $.NSFileManager.defaultManager
var folderExists = fileManager.fileExistsAtPath(exportFolder)
if (!folderExists) {
fileManager.createDirectoryAtPathWithIntermediateDirectoriesAttributesError(exportFolder, false, $(), $())
}
and to move a file
var success = fileManager.moveItemAtPathToPathError(sourceFile, destinationLocation, $());
if (success) alert("File moved");
Consider that destinationLocation must be the full path including the file name
and both sourceFile and destinationLocation must be NSString objects like exportFolder
Could it be that the folder is missing ? Could be your reference to the folder object not valid ? Any syntax to show ?
I will share some of what I learned about JXA move and duplicate methods. I am not a professional programmer just an attorney that is passionate about automation. My comments come from much trial and error, reading whatever I could find online, and A LOT of struggle. The move method does not work well with Finder. Use the System Events move method instead. The duplicate method in Finder works just fine. The duplicate method does not work well in system events. This is a modified snippet from a script I wrote showing move() using System Events.
(() => {
const strPathTargetFile = '/Users/bretfarve/Documents/MyFolderA/myFile.txt';
const strPathFolder = '/Users/bretfarve/Documents/MyFolderB/';
/* System Events Objects */
const SysEvents = Application('System Events');
const objPathFolder = SysEvents.aliases[strPathFolder];
SysEvents.move(SysEvents.aliases.byName(strPathTargetFile), {to: objPathFolder});
})();

Is there any standard practice when it comes to adding plugin into ExtJs 4.1 apps

I am going to add a plugin to my ExtJs 4.1 application. Currently I have added the code for plugin into one of the file where I am making use of the plugin and everything is working fine.
Alternatively I can put the plugin code in a JS file and then can make reference of the file in my application.
But I was wondering is there way to include the plugin without making explicit reference? Just like we load Controllers, store etc in ExtJs 4.1
There is no standard practice, but in my opinion it makes the most sense to define a namespace for plugins (e.g., App.plugin.MyPlugin) and load them either explicitly as needed, or along with your other required files if you're using the Ext.Loader.
Here is an example...
Ext.define("App.plugin.MyPlugin", {
/** Any explicit class properties and methods for functionality go here.
Eg. extending, aliasing, defining initComponent to add events, and
any other class-specific methods. */
},
function(){
Ext.ns("App.plugin");
App.plugin.MyPlugin = {}; // this is a global
var MyPlugin = App.plugin.MyPlugin;
/** You can modify the prototype here */
this.prototype.dateFormat = Ext.Date.dateFormat;
/** If you need to add functionality from some other class,
or Ext class, you can marge them here. In this example,
I am adding in the methods from Ext.util.Format */
Ext.apply(MyPlugin, Ext.util.Format);
/** Define methods which can be invoked from the global */
Ext.apply(MyPlugin, {
exampleRenderer: function(val){
return MyPlugin.ucfirst(val); // available via Ext.util.Format
}
});
});
Now you can instantiate the plugin class, but also access the global methods. For example, you can leverage the exampleRenderer in a gridcolumn renderer via App.plugin.MyPlugin.exampleRenderer.
To automatically load your plugin, you must define the path for the namespace in your `Loader' configuration. e.g.,
Ext.Loader.setConfig({
enabled: true,
paths : {
'App.plugin': '/js/app/plugin/' // or however your folder structure is
}
});
/** then require it.. */
Ext.require([
'App.plugin.MyPlugin'
]);
You likely do not want to combine the two principals into one class, but I just wanted to show a couple different means to achieve your goal.

Categories

Resources