CamanJS not working in CKFinder (stucked in loading image) - javascript

We are integrating CKFinder with the CKEditor installation in PeopleSoft.
We created our own connector in Peoplesoft and almost everything is now working except editing image. It is stuck in the loading image dialog. We already implemented ImageInfo and the response is successfully received. In my observation, the following are the requests made by the browser.
caman.js [GET]
ImageInfo Command Request [GET]
(current URL)?camanproxyURL=(CKFinder Thumbnail Request URL) [GET]
(current URL)?camanproxyURL=(CKFinder ImagePreview Request URL) [GET]
I tried this in CKFinder demo but I don't see # 3 and #4 and the Thumbnail and ImagePreview were directly requested.
I think the problem here is in #3 and #4, the URL used is the current URL which is .../ckeditor/ckfinder/ckfinder.html. I don;t this is what supposed to happen.
How do I fix this issue? Is this something with our setup or configuration?
CKFinder is inside our CKEditor directory.

We're using custom CamanJS with some improvements. One of them was this change. It was due to similar problem with domain name that contain - in it's name. The fix changed a regexp that was used to tell if domain is local or remote (if a domain URL fails this regexp the proxy mechanism is used).
Could you verify that a domain URL that you are using for development passes this regex:
/(?:(?:http|https):\/\/)((?:[\w-]+)\.(?:(?:-|\w|\.)+))/

Related

Firefox not downloading correct file to machine

I have a react application that I built that uses redux, react router v4 and d3 for visualization of data.
My app contains a force directed graph, a table and a histogram. Each one of these views contains clickable nodes, table cell and bars that when clicked, the file should download to user's machine. I recently updated firefox to the latest version 62.0.2 and the download no longer functions as expected, however it still works fine in Chrome.
The files sit on the same domain as the application and I've coded the download to function as so:
let newlink = document.createElement('a');
newlink.setAttribute('download',
'https://www.example.com/docs/xml/file1.xml');
newlink.setAttribute('href', 'https://www.example.com/docs/xml/file1.xml');
newlink.setAttribute('target', '_blank');
document.body.appendChild(newlink);
newlink.click();
What firefox is doing is downloading the index.html file at my app root rather than what is in the url variable (ex. https://www.example.com/docs/xml/file1.xml). The dialog shows that it is in fact trying to save the file with the correct name (Firefox has automatically replaced '/' with underscores to save the file. The domain is correct, but the location does not contain the full URL to the file. Is something happening with the full URL being chopped off somehow?
The type on the dialog box is HTML (which is incorrect, all my files are either xml or txt) and if user selects save or open, it saves index.html or opens up a blank/black webpage. I'm going crazy trying to figure out what is happening here. Please help!
What ended up fixing this in Firefox was unregistering the service worker from the application's domain by navigating to about:serviceworkers (in firefox). I then commented out the register service worker function in my UI code because I'm not using them for this application anyway. For whatever reason the service worker was intercepting the file download and causing the browser to download the index.html file rather than the text file it was supposed to. Once I did these two things, the file was downloaded correctly. If anyone would know why that would be, I'd love a comment.

window.open for local file path

I would like to trigger download with window.open() function in javascript in local.
The path should start with "/".
I provide URL with / to start, however, it seems like window.open() function ignore the first /.
Is there a way to make it read the / , so that i can trigger download?
A URL starting with a / is a relative URL with an absolute path. It ignores the existing path on the URL, and calculates the new one starting from the end of the port (or hostname if there is no port, localhost in this case).
If you want to make a request to a different URL scheme (in this case file: instead of http:) then you need to use an absolute URL (i.e. state the new URL scheme explicitly).
NB: Many browsers will block requests to file: scheme URLs triggered by pages which were not served using the file: scheme for security reasons.
Try use this :
window.open('file:///D:/Examples/file2.extension')
It work for me with a local file
For security reasons browsers block opening local files using window.open().
In order to display local file you must urge user to manually choose file you want them to open. I know that is not the desirable solution but it is how can it work. One of implementation with FileReader is in this answer: How to open a local disk file with JavaScript?

Strange URL in the WordPress theme causing error when the site loads

I am facing a problem i.e., the site is taking more than usual time to load and showing an error when I inspected the page.
I tried searching for the link through the source code of the page, but I wasn’t able to locate where that link is actually present.
I don’t know where from this URL came, but I want to remove it, as it is not letting the page to load properly and fast.
Please tell me how to eliminate this error.
Details -
URL - reportingall
Theme - Newspaper 8.5
Demo Module Installed - Gadgets
CMS - WordPress
I can provide more information, if required.
Thanks and have a nice day.
it was easy to find this error
go to theme panel -> misc -> background -> mobile menu/search background -> then change http to https and save.
img : https://imgur.com/a/pSfPr
Done.
It looks like the page is trying to load image 52.jpg with the HTTP protocol instead of the HTTPS protocol your website is using. It seems your theme is trying to set your header to have a background image of 52.jpg, if you can change the path to be HTTPS instead of HTTP that should correct that issue. I know wordpress has plugins that can achieve this, or you can try to contact the creator of the theme if you don't have access to change the path.
If you're looking to just remove the code, you can try and find:
background-image:url(http://192.168.0.120/wp_011_gadgets/wp-content/uploads/2017/03/52.jpg)
In your theme files and remove that, but if the theme is updated it will likely revert back and need to reapplied to each time you update the theme.
Hope this helps.
There is a CSS rule on your page which as a selector has .td-search-background and which contains a background-image setting whose URL is linked to a server with the IP address 192.168.0.120 . The image is called "52.jpg".
This looks like a local address - maybe even your own computer - which wasn't converted when you moved the WP installation from the test server to the performance server.
A comment above these CSS rules says <!-- Header style compiled by theme --> . So you should either search for settings in your theme where the server address is defined, or you should search for CSS files/settings created by your theme which contain this rule and change the URL there.

How to reload page if html5mode is enabled in angularjs?

I had made a SPA in angularjs, when I run it on browser it showed me '#' in the address bar. So I enabled html5Mode. This successfully removed '#' from the url but when I try to reload the page, it gives 404: page not found error. I tried writing in .htaccess from this url:
htaccess redirect for Angular routes
Nothing change.
I also followed grunt answers but that was also not helpful.
Did you correctly enable html5 mode?
Take a look at the answer to a question regarding html5 mode/hashbang mode.
Did you add <base href="/"> to the head of your html?
You need to setup your server routes to return index file for all angular urls.
Usually you register your api at some special endpoint (as mysite.com/api/v1) and if url is not matching this pattern return index.html file with angular bootstrap logic.
This happens because without html5 mode all requests are sent to root server url (mysite.com/ even if link is mysite.com/#!/profile) but when you enable html5 mode, requests are sent as declared in angular so if you have '/' route with href to profile (/profile) and reload page from there (mysite.com/profile), request will be sent to mysite.com/profile and it will respond with 404 as it is setuped to return index file only for '/' url

Javascript React Single Page Application + Amazon S3: Permalinks issue

I am using an S3 bucket as static web solution to host a single page React application.
The react application works fine when I hit the root domain s3-bucket.amazon.com and the HTML5 history api works fine every time I click on a link the new url looks fine: _http://s3-bucket.amazon.com/entities/entity_id_
The problem happens when I use permalinks to access the application. Let's assume I am typing the same url (_http://s3-bucket.amazon.com/entities/entity_id_) in the browser I will get the following error from Amazon S3:
404 Not Found
Code: NoSuchKey
Message: The specified key does not exist.
Key: users
RequestId: 3A4B65F49D07B42C
HostId: j2KCK4tvw9DVQzOHaViZPwT7+piVFfVT3lRs2pr2knhdKag7mROEfqPRLUHGeD/TZoFJBI4/maA=
Is it possible to make Amazon S3 to work nicely with permalinks and HTML5 history api? Maybe it can act as proxy?
Thank you
Solution using AWS CloudFront:
Step 1: Go to CloudFront
Click on distribution id
Go to the Error page tab
Click on Create Custom Error Response
Step 2: Fill the form as
HTTP Error Code: 404
TTL: 0
Custom Error Response: Yes
Response Page Path: /index.html
HTTP Response Code: 200
source: https://medium.com/#nikhilkapoor17/deployment-of-spa-without-location-strategy-61a190a11dfc
Sadly S3 does not support the wildcard routing required for single page apps (basically you want everything after the host in the url to serve index.html, but preserve the route.
So www.blah.com/hello/world would actually serve www.blah.com/index.html but pass the route to the single page app.
The good news is you can do this with a CDN such as Fastly (Varnish) in front of S3. Setting up a rule such as:
if(req.url.ext == "" ) {
set req.url = "/index.html";
}
This will redirect all non asset requests (anything without a file extension) to index.html on the domain.
I have no experience running SPA on Amazon S3, but this seems to be a problem of url-rewriting.
It is one thing do have the history (html5) api rewrite your url when running your application / site.
But allowing rewritten urls to be accessible when refreshing or cold-surfing to your site definitely needs url-rewriting on a server level.
I'm thinking web.confg (IIS), .htaccess (Apache) or nginx site configuration.
It seems the same question already got asked some time ago: https://serverfault.com/questions/650704/url-rewriting-in-amazon-s3
Specify the same name for the index and error files on "Static website hosting" properties. See linked image 1.
Old question but simplest way would be to use hash routing. So instead of mydomain.com/somepage/subpage it would be mydomain.com/#/somepage/subpage

Categories