how to use jquery file upload with ember browserify - javascript

I'm trying to use jquery file upload with ember-cli using the npm package
https://www.npmjs.com/package/blueimp-file-upload
and ember browserify.
I installed ember-browserify and blueimp-file-upload:
$ npm install --save-dev ember-browserify
$ npm install --save-dev blueimp-file-upload
Importing fileupload like so:
import fileupload from 'npm:blueimp-file-upload';
Gave me this error:
Cannot find module 'jquery' from '/Users/tony/src/myapp/node_modules/blueimp-file-upload/js/vendor’
So I installed jquery via npm as well:
$ npm install --save-dev jquery
Now I just get this error when trying to use fileupload:
$(...).fileupload is not a function
Is there a better way to use jquery-fileupload with ember-cli?

First, there is a few plugins for ember that provide you with a ready-to-use solution. If I remember right, one of them utilizes blueimp file upload. You may use one of them or look how they use underlying jquery plugins.
You may also try to install jquery-ui-widget and blueimp-file-upload via bower.
And finally, you may write your own file uploader without using 3rd-party jquery plugins.

Related

r.js with old build system (bower) error with bootstrap

I am trying to move away from bower (since Reactjs is discontinued for it, maybe also other components)
Used bower-away to make package.json
Seem to went further, however bootstrap.js while ”traced” or how it is called by r.js produces error
Command run
r.js -o $(BUILD_TMP_DIR)/static/js/build.js
r.js error: line 778 unexpected token
However this is just normal bootstrap.js file
npm install bootstrap --save
I looked also at the bootstrap.js and it looks like a normal JS file
Is there a way to fix it? Maybe not even use r.js to produce build.js?
what are my options?
Update 1
I am new to Frontend, this also seems like older/legacy code.
Yes, project I think uses requirejs
https://github.com/marcinguy/betterscan-ce/blob/master/quantifiedcode/frontend/src/js/config.js
The code is open source I try to fix:
https://github.com/marcinguy/betterscan-ce/tree/master/quantifiedcode/frontend
You need to just run make to build it
https://github.com/marcinguy/betterscan-ce/blob/master/quantifiedcode/frontend/Makefile
I modified it with bower-away to use only package.json. Changed Makefile and src/js/config.js to work with node_modules instead of bower_components
r.js worked for reactjs and prism, but errors on bootstrap
installed
npm install reactjs --save
npm install prism --save
etc
Here is bower.json
https://github.com/marcinguy/betterscan-ce/blob/master/quantifiedcode/frontend/bower.json
Maybe I should try different npm install bootstrap? but which?
I have node 14

Customizing bower packages

I am using several open source js libraries in my project. I recently moved to use bower for all the front-end dependencies. I liked how I can just provide a github url instead of a proper package name.
I have customized few libraries. So to manage them using bower, I created a single private repository called myLibs in an organization account on Github.
I am creating branches for each customized library. For example, customized angular-bootstrap library will be in angular-bootstrap branch and customized angular-material library will be in angular-material branch.
Now I am creating tags for each release in each library. The naming convention that I am using is branch-name/x.y.z For example, I have angular-bootstrap/1.0.0 and angular-material/1.1.1 tags.
This was good till I had to install these libraries using bower. To install the custom libraries I called the following command (It's a dummy url, don't try it)
bower install --save-exact library-patch=https://github.com/test_org/myLibs.git#branch-name/1.0.0
The library gets installed and I can see it in bower_components too, but in my bower.json the dependency entry turns up like this -
"library-patch":"https://github.com/test_org/myLibs.git#undefined"
This is not what I wanted. I wanted to have the proper tag name to be saved. I don't want to manually make changes in the bower.json file every time I want to add a custom library.
My first thought was that the naming convention of the tags will be a problem. So I changed it to branch-name-x.y.z from branch-name/x.y.z which allowed me to have the exact version in the bower.json to install it properly, but when trying to install the libraries using the terminal, instead of using bower.json, I am getting the#undefined` tag in the end of the dependencies.
Here's the log I am getting while installing the library from terminal.
bower install --save-exact library-patch=https://github.com/test_org/myLibs.git#branch-name-1.0.0
bower not-cached https://github.com/test_org/myLibs.git#branch-name-1.0.0
bower resolve https://github.com/test_org/myLibs.git#branch-name-1.0.0
bower download https://github.com/test_org/myLibs/archive/branch-name-1.0.0.tar.gz
bower retry Download of https://github.com/test_org/myLibs/archive/branch-name-1.0.0.tar.gz failed with EHTTP, trying with git..
bower checkout library-patch#branch-name-1.0.0
bower resolved https://github.com/test_org/myLibs.git#branch-name-1.0.0
bower install library-patch#branch-name-1.0.0
library-patch#branch-name-1.0.0 bower_components/library-patch
└── angular#1.4.8
Why am I getting undefined in the release/tag name? Am I making any mistake while naming the tags? Is there any way I can install those custom libs from terminal and save the exact tag in bower.json?
The solution for the problem was to use --save instead of --save-exact. I have no explanation for the same right now, but I'll update the answer as soon as I can.
As far as I can tell, it's because the package was getting installed from github directly, instead of from bower registry.

how to use a bower package in nodejs?

I installed bower from NPM and then i installed a bower package Crypto-js.
Is it possible to use this package in my node js code by simply writing require
Like this
var crypt= require('./package path/md5');
var hash= crypt.MD5('Message');
console.log(hash.toString(crypt.enc.Base64));
Here my point is not about only this library, i want to ask if this is the way to use bower package in nodejs or is there any other way to use bower package in nodejs?
bower is for front-end and it is not exported for node.js
you should use npm package https://www.npmjs.com/package/crypto-js instead
There are two things
bower is package for web build by twitter
and as you already aware that nodejs is server side
So you can't use bower in nodejs server-side application.
And even if you use bower in front end, it's done by using script tags.
for more refer this blog

How do I use lodash, and JS modules in general

I just installed Node and I want to use the lodash library. I made a new JS file in my desktop and I started the file with
var _ = require('lodash');
However, I get
Error: Cannot find module 'lodash'
How do I use the lodash library? All I can find online says to use the import statement I already used.
You need to install lodash with npm:
npm install lodash
That will install lodash into a subdirectory of your current directory called node_modules. Node.js knows to look there when you use require('lodash').
Usually you'll have a package.json file that tracks your dependencies so that you can just do npm install to install all dependencies for a project. If you want to add lodash to package.json then you can use npm install --save lodash.
If you don't have a package.json for your project yet, I would recommend running npm init to create one.

How to use installed package on node.js?

I'm using FoundationPress theme for WordPress and installed it using Node.js. Now I want to install Perfect Scrollbar and I did so using npm install perfect-scrollbar but I don't know how to use it. I can now see it under node_modules. I don't know where to import the css and the js file.
I import .scss using the foundation.scss file. I'm adding the js by adding a .js file to js/custom and then running grunt build.
Do I also put it there or there's a nicer way to use the installed package? I've also run grunt build but didn't see the script running in my theme.
I'm using Git Bash command line to do all this. Not sure if that helps. I have only started using Node.js

Categories

Resources