I am working on some POC or code where in I am trying to integrate Pl upload to my react application.
I found very good example -
This one is very good, wrapper for listening all the events from Pl upload library.
https://github.com/lemonCMS/react-plupload
I could integrate it fine, however I noticed linking of Pl upload happened in the index.html file (Which is not ideal way.).
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/plupload/3.1.2/plupload.full.min.js' async></script>
Need some input, how can I link same library coping inside my project directory.
So here basically I am expecting window.plupload should be initialized fine on load.
Another example I really liked is, as this will maintain state in the redux store and I hope I can navigate accross application with upload stays in progress.
https://www.npmjs.com/package/redux-plupload
However for second example as well, need some input about linking.
Also, please suggest if i am missing anything.
Thank you all.
I have figured out, I had to install, below package.
https://www.npmjs.com/package/plupload
This is not latest version, but will solve my purpose.
Thank you!
Related
Hi I am stuck at adding animated background to React app which is also interactive.
I've looked through few similar problems and this page https://reactjs.org/docs/integrating-with-other-libraries.html but I can't find solution to my problem.
Script is written in Java and translated to JavaScript and I've bough it. There are documentation but it not mentions React. The author of the script says he doesn't know React and cannot help me. It is working fine in normal website but I would like to adopt it to React.
The code in HTML looks like:
<script src="js/libs/jsband-min.js" type="text/javascript"></script>
<script src="js/anim-min.js" type="text/javascript"></script>
<div id="DV_ID">
<script type="text/javascript">
var anim = new Anim("DIV_ID", {
//some settings
MOUSE_IMPACT_FACTOR: 50
ETC...
}
</script>
</div>
React is just a library to generate the view (content) of a website. You should be able to use that library you want in React, but your question needs more focus/information I think. Though I'll try my best to help.
It sounds like a requirement is loading those 2 scripts. Did you already make sure to load them into your react app, and verify via the network tools both are being loaded? If the answer to that is no, this article may be of help:
https://medium.com/better-programming/4-ways-of-adding-external-js-files-in-reactjs-823f85de3668
Once you made sure both scripts are loaded by your react app, you should ask whoever made the library you are using how it works/selects the element to inject the background. As a wild guess, I'm guessing that DIV_ID is the ID of the element to inject the background with. Did you already make sure that element exists at the time the code runs? You can verify this by debugging the code, and running document.getElementById with that ID in the console and verifying it exists. If not, this could be another reason.
The last thing that could likely be, is the element may exist, but it may not have dimensions. You could probably figure this out with the DOM inspector.
Overall, I'd recommend you read the posting guidelines before your next question, since this question lacks a lot of the thing people need to help you:
https://stackoverflow.com/help/how-to-ask
We are migrating our project from Ang JS to React JS and we already have onload.js file which is written Jquery. Can I use the same onload file in ReactJS too. This file has user privilege information.
Before starting to work on it, I would like to know whether i need to start rewriting the code in newer syntax without jquery or should I use the same file.
You cannot use jQuery in React. React itself is already manipulating the DOM, and throwing jQuery on that will confuse it, possibly causing unwanted effects.
So yes, you need to rewrite your code. You probably don't want to be sending sensitive information to the client's browser anyways though?
What is the best practice to export or preview page content onClick as pdf/xls in the browser?
From my inexperienced understanding, I have to create an action/function that generates a static page content to pdf. Please correct me if I'm wrong and help me with implementation.
Assuming this is not the File-> Print page function, if you are talking about actually generating a file, there are a couple of libraries out there to do that. That problem is not specific to React.
A good JavaScript library to generate pdfs is pdfmake. I have used it in a project, although I used it in a backend Nodejs server. It may also work in the frontend directly. I suggest you try leaving the pdf generation to the backend though, then you need only download the file after making a request with some data from the frontend.
Hi guys im just setting up a new project for some work im doing trying to get something working quickly to keep momentum up. However i seem to be having a problem with getting Angular Material to load properly. Im using Node and bower to get my modules which seems to be loading them fine.
However when ever im loading up the page my console reports that its hitting an unreachable code after a return statement like the title suggests. this is actually being hit in the angular material js file that is being imported by bower.
I have no idea why this is happening and any help to progress past this point would be brilliant thank you.
EDIT
I possibly have found a fix to the issue I was having. The backend of the web application I was using was controlled by Django and there was a conflict between Angular js and Django in that they were using the same tags to show values for variables. This was stopping Angular Material from instantiating properly. I still get the unreachable code warning but now Material is working as I expect it to.
I hope this helps some people debug the problems they are having when seeing this issue.
Include the minified version of the library. Automatic Semicolon Insertion is different depending on your browser, if the library code has a return statement broken across two lines, it might end up with a semicolon where one shouldn't be. Using the minified version fixes this because the statement won't be broken across lines.
Include this:
<script src="bower_components/angular-material/angular-material.min.js"></script>
Instead of this:
<script src="bower_components/angular-material/angular-material.js"></script>
Is there some way to run UI-Router without running bower/npm, etc?
https://github.com/angular-ui/ui-router
I tried linking to it (just like to angular), but that didn't work. Tried saving it locally in a .js file and referencing it. That didn't work either. Am I missing something or am I just trying to do something impossible?
edit: Alternatively, is there anywhere to test this? Like plunkr or something?
Here's the source for what I think is the latest. I think you should just be able to link to it in a <script /> tag in your index.html:
http://angular-ui.github.io/ui-router/release/angular-ui-router.js
Or copy that to a text file and run it completely locally, since I think you're just trying to test it out. If it didn't work, maybe make sure you have all of its dependencies, if any.
Of course it looks like it's a package in plunkr, so you should be able to try it there. I added it and the latest angular for you (haven't tested it though):
http://plnkr.co/edit/jdX6pRn6noHh1JoP5CH6?p=catalogue
You can write Angular UI routing code into your Notepad++ editor, But you require a normal web server to run it properly.
You can try the Google Chrome Plugin to execute all AngularJS related codes.
Kindly Run all the applications using a local server. There is no need for Tomcat server. You can easily download a Google Chrome Plugin "Web server for Chrome". here- Web Server for Google Chrome
Also the Angular UI routing Snippet is available at: https://github.com/TheAjinkya/AngularSnippets/tree/master/Angular%20UI-Router