Angular 2 uploading image - javascript

After 5hrs of struggle I decide it to ask question to see if someone can help me. I use Angular 2 for front end of application and now I have a problem to upload image on my server. Problem is after uploading because my page is reloading again. I use angular2-image-upload. In app.module i add this:
#NgModule({
imports: [
...,
ImageUploadModule.forRoot(),
...
]
})
In html file I have this:
<image-upload
[max]="100"
[url]="'http://myurl'"
[buttonCaption]="'Select Images!'"
[dropBoxMessage]="'Drop your images here!'"
></image-upload>
And everything is ok, image was upload, but in console I got this information
[WDS] App updated. Recompiling..
and page is reloading.
Can anyone knows why this happening?
Thanks in advance

Probably the reason is, Angular listens all the changes event and refresh. Your image are being uploaded inside the directory where Angular listen changes. For example, if you upload your image and move image inside Angular > src > assets (dir). It will detect changes and reloads whole application.
Consider uploading images outside the src directory. You can also read about how Angular detects changes.
Angular Change Detection - How Does It Really Work?
I know the question is asked a year ago but still if someone gets the same issue this might help.

Issue is while image uploading , because it should not reload the page after image uploading and you are getting this message
[WDS] App updated. Recompiling..
because it reloads the whole app from beginning.
So first step is to check preserve log in console , so it will not refresh the console on page reload , it will show you the error.

Related

How to stop page from redirecting to the previous visited page?

The issue i have is that when i click on any page in my menu, it loads and then goes back to the previous page i visited. I contacted my hosting provider and they said there must be some code somewhere inside the website or database. But i know for sure i didnt put any code in there. Does anyone know where i could find this code or where the problem could be?
I already tried changing the permalinks and all, but this didnt work.
I expect the page to just normally load into my browser window without redirecting to the previous page.
URL is: http://www.vandeheg.nl/
From what I can see this is a problem with the JavaScript on the site, as with JS disabled I can access all the pages without issue.
I'd recommend trying with all plugins deactivated, and then if that doesn't solve the issue have a look through your theme code for anything like window.location that might imply a forced JS redirect.

How to reload base64 animated GIF?

I use base64 animated GIF on my web page, when I try to reload page GIF still show last frame. How can I reload GIF from its beginning?
I tried use JS to clear innerHTML and then assign it back to my base64 GIF, but nothing happened.
I am also using C# and CefSharp (tried use Refresh() and chromeBrowser.GetBrowser().Reload()), would be great to get any tips how to make GIF play from its beginnig.
I use base64 because I cannot store image on users hard drive or Web, but I need to put this image into HTML, which can be loaded by CefSharp using C#. If there are any other ways to use animated image in HTML without storing it on HDD or web, please give me some tips too.
Update:
I decided to leave base64 because big size of my gifs (>25 Mb) cause lags and problems with reload.
I use CEFSharp v55-pre01 and found new problem.
What do I have:
Main menu
Form 1 (with cefsharp browser, which loads gif by code automatically)
Form 2 (with cefsharp browser, loads same gif)
From main menu I call Form 1, when Form 1 initialize, Form 1 create hidden Form 2.
First form initialize Cef
if (!Cef.IsInitialized)
{
Cef.Initialize(settings);
}
Each form in constructor initialize own browser
chromeBrowser = new ChromiumWebBrowser("");
Controls.Add(chromeBrowser);
Problem appear in situation, when I close second form (no mater is 2nd form shown or not) and dispose both forms and call Cef.Shutdown(). When I try open back first form from menu my app crashes.
Error appear at second form constructor on line chromeBrowser = new ChromiumWebBrowser(""); with such text:
An unhandled exception of type 'System.AccessViolationException'
occurred in CefSharp.Core.dll
Additional information: Attempted to read or write protected memory.
This is often an indication that other memory is corrupt.

jQuery - How to get Print Screen image

I am trying to make a jQuery code to save a screenshot in my web page. I found a lot of plugins that take screenshot of pages.
But this is what I want:
1- The user takes a Print Screen of a issue in the desktop(not in the browser)
2- The user clicks on a Button 'save' in my web page
3- jQuery gets that image and saves into a folder
All the ways I found was to take a WebPage Screenshot.
Is there a way to get the Image that the user toke?
I don't know it may help you,http://codepen.io/reynard2007/pen/xfwoK , i remember long a go i see one codepen is doing the function you want,that is pasting the image in to a canvas

Angularjs page refresh data issue loading from JSON file

I followed a tutorial that showed how to use angularjs and load json data based on menu slug and show it in the page. The demo is here: https://dl.dropboxusercontent.com/u/28763/angular-tutorial/index.html#/page/home
When I refresh the homepage (https://dl.dropboxusercontent.com/u/28763/angular-tutorial/index.html#/page/home), I get a js error in firebug that notes:
$digest already in progress
or
$rootScope.pages is undefined
This usually happens the time after the initial pages.json load. So if I update the pages.json file, I can hit refresh and see the new data, but if I refresh again I get the error. If you click a menu item, About for example, you will see the About page. Click home and it is there. Refresh the browser and get an error.
Also the page shows where the content should render:
{{page.title}}
{{page.content}}
...rather than the title and content. I am super new to AngularJS and am not finding a reason why this isn't working here consistently.
I have the .otherwise({redirectTo: '/home'}); in there, and it does redirect there, however, the data doesn't always do the same...
If this is due to the pages.json file loading quick enough, how do I go about making sure the file is completely loaded before moving on? Or might there be another reason someone sees?
EDIT:
Here is a Plunker of my setup: http://plnkr.co/edit/8QpsLHhPA58uZnbAHgck?p=preview

How to make Chrome DevTools reload only selected resource?

Is there a way to force reloading only specific resource-files from DevTools?
I'm developing site with ExtJS MVC, that results to almost 100 JS files. Mostly I'm debugging the controller by filling an form -> sending form -> detecting an bug in controller -> fixing it -> reloading whole site -> filling the form again -> another bug -> reload...
It would be very helpful to reload only the controller-part of the code, so that the JS-files contructing the forms would not be affected, thus increasing load times and dropping need to fill the form on every iteration.
So, is it possible? Or could the browser even work this way?
u can use Local Modifications in Source panel (right click in panel) to change or debug Your code, or You can open specific js file in new windwow and than reload it, but I don`t think You can apply reloaded file to site without reloading it itself.

Categories