I have created a directive for handling binary file uploading. Here's a plunker using it:
http://plnkr.co/edit/9qcKW5A6yq1hS8OuWTNK?p=preview
The idea is that the model is initialized by the controller with (initially) just the current filename - not the current data.
If the user clicks on the link, the data will be downloaded to his machine.
If the user clicks on the '-' button, both the filedata and the filename parts of the model will be set to undefined.
If the user clicks on '+' and selects his own file, the model gets a new filename, as well as the data (in base64) of the file in question. Now if you do this, and look at your browser's console, you will find that in both Chrome and Firefox, there's a very weird error reported (from the bowels of Angular) about accessing things we are not allowed to. Firefox even says something specifically about security.
To stop the error from being reported, instead of assigning
model.filedata = values;
try
model.filedata = '';
...and indeed, the error goes away. This is very weird - it appears the browser is keeping some kind of state about the string of base64 data contained in 'values', and has an issue with Angular touching it in its internal watchers.
Is this a bug on my side, a bug on the Angular side, or a bug on the browser side?
Any help most appreciated.
On line 15 of your script.js it says:
' type="file" data-ng-model="model.filedata" />' +
ng-model establishes a two-way data binding between scope.model.filedata and the "value" of the input element. When you update model.filedata with ...
model.filedata = values;
... Angular tries to update the "value" of the input element and this fails.
I don't see why you need this ng-model on your input element. By removing it, your code works.
It is no bug.
The issue is that you bind a model to the file input. (data-ng-model="model.filedata")
This means that angular will try to update the value of the file input once you change the filedata.
And no browser allows to programmatically set the value of file inputs for security reasons.
(otherwise i could set the path to a local file on your system with passwords and force an upload to my server)
Just remove the binding and it works as expected (demo)
(and most likely you meant to bind it to the model.filename and not the model.filedata, although it would produce the same exception..)
Related
I want to validate file. While file is invalid, i want to refresh my page and inform user that he did not upload proper file. So i have this in my
views/campaign.py
try:
wb = load_workbook(mp_file)
except BadZipfile:
return redirect('campaign_add', client_id)
The only way i know how to do it is add another attribute to client class which will be
is_error(models.BooleanField())
And then change views/campaign to
try:
client.is_error = False
wb = load_workbook(mp_file)
client.save()
except BadZipfile:
client.is_error = True
client.save()
return redirect('campaign_add', client)
And with another attribute i can add in my campaign.html file some kind of if is.error is true i'm adding some kind of windows with information about bad file after reloading page. But is there any way to do it without adding another attribute?
Ok, let's imagine that the answer is a little bit complicated than you've expected.
Modern UI's are not reloading pages just to inform about some errors with user input or upload.
So what is the best user experience here?
User is uploading some file(s) from the page.
You are sending a file via JavaScript to the dedicated API endpoint for this uploading. Let's say /workbook/uploads/. You need to create a handler for this endpoint (view)
Endpoint returns 200 OK with the empty body on success or an error, let's say 400 Bad Request with detailed JSON in the body to show to the user what's wrong.
You're parsing responses in JavaScript and show the user what's wrong
No refreshes are needed. 🙌
But the particular answer will need more code from your implementation. (view, urls, template)
I have a page using angularjs, everything looks good except one thing: after user clicked submit button and the server side validation failed, the user input will be gone, but when I checked the html tags, the value="xxx" attribute saved the lost value, how can I get and render it to my page?
Thanks a lot!
Not sure about your exact scenario, but what you can do is to make the copy of original model object and bind it to form
$scope.editItem = angular.copy(originalItem);
Bind editItem to the form.
If the server validation fails just call the above statement again and the editItem would be restored to original value.
CefSharp: 1.25.0 (based on Chromium 25.0.1364.152)
Angular: 1.3.0-beta16
UIRouter: 0.2.10
I'm developing a stand-alone C# application that uses CefSharp Chromium + Angular + UIRouter as the stack upon which the GUI will be relying on.
I hit it off by trying to make the above stack load the sample-code provided here:
http://scotch.io/tutorials/javascript/angular-routing-using-ui-router
For the sake of elegance the HTML + Javascript-libs of the GUI, get cobundled in a single resource file inside the .Net executable of the application.
This resource is then passed programmatically during application-init to the Chromium control (by means of .LoadHtml) to be loaded directly into the browser, aka the HTML is not loaded from a separate .html file residing in the hard-drive or on a remote HTTP server. If the HTML gets loaded from the later ("standard") venues then everything works flawlessly.
I noticed that when loading the HTML directly as a string, as described above, the url of the resulting static web page (aka window.location) is set to 'about:blank'. It appears that angular has some sort of pet peeve with such a url, especially when it comes to using routing:
First of all, the invocation of:
history.pushState(null, "", url);
inside
self.url = function(url, replace) { ... }
throws an exception ala
Error: SecurityError: DOM Exception 18
Error: An attempt was made to break through the security policy of the user agent.
at Browser.self.url (about:blank:8004:21)
at about:blank:10049:24
at Scope.$eval (about:blank:11472:28)
at Scope.$digest (about:blank:11381:31)
at Scope.$apply (about:blank:11493:24)
at about:blank:6818:15
at Object.invoke (about:blank:7814:19)
at doBootstrap (about:blank:6817:16)
at bootstrap (about:blank:6827:14)
at angularInit (about:blank:6796:7)
the url that is passed to .pushState is:
about:blank#/home
which appears to be the result of concatenating 'about:blank' with the default state '/home'.
Secondly, even if the above problem is solved there appears to be a major issue inside:
$rootScope.$watch(function $locationWatch() { ... })
which causes the following error:
Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
the reason is that when 'window.location' is set to 'about:blank' then
$browser.url()
always returns
about:blank
while
$location.absUrl()
returns
about:blank#/home
causing $watch to fire non-stop.
Is there any proper way to handle this shortcoming of angular when its dealing with web pages loaded directly into the browser in the manner described here?
If there is no workaround for this issue then I'm afraid that I will have to resort to loading the HTML directly from a file in the hard drive, which apart from being slower (can't cache the string to memory for subsequent usages), it's also a noticable deviation from the goal of developing a stand-alone-exe. :(
Thanks in advance and I apologize if this issue has been addressed elsewhere.
By default Firefox allows loading of external files within html file that loaded from "file:///...". but Chrome does not. in CefSharp(Chrome) you can do it in this way:
// Allow angular routing and load external files
BrowserSettings setting = new BrowserSettings();
setting.FileAccessFromFileUrls = CefState.Enabled;
browser.BrowserSettings = setting;
this.Controls.Add(browser);
Most browsers don't allow to do AJAX on the file-system. But Chromium can be tweaked to do so:
browser = new ChromiumWebBrowser(path);
browser.BrowserSettings = new BrowserSettings();
browser.BrowserSettings.FileAccessFromFileUrlsAllowed = true;
I have a form and I need to put the data of that form in collection, using coffeescript
I am currently doing these in my client coffeescript file:
#Question = new Meteor.Collection('questions')
Template.question.events
'submit #question-form' : (event) ->
QuestionData = $('#question-form').serializeJSON()
Question. insert QuestionData
I am not sure whether these data is being inserted or not. Please give me some useful ideas
Thank You in advance !!!
Tools you can use:
1) You can add a line to javascript:
debugger
your client browser will stop when it reaches that line. Sometimes you have to be in an inspect element screen already before it triggers. I do this often in Chrome and Firefox. Firefox has a debugger tab; chrome, a sources tab.
2) You can use mini-mongo in the client to check for the new record. In the console (you can get to the console as a tab as described above) type
Question.find().fetch()
You can also write
id = Question.insert QuestionData
console.log 'Question.findOne("' + id + '")
which should give an easy to copy and paste.
In a separate terminal/dos prompt fire up the mongo console using.
meteor mongo
then to list all the questions in the mongo console type
db.questions.find().pretty()
I am doing a HTML5 app. Everything works well. The client suddenly requested that he needs to change error messages and text labels as he wish after completing the code, but without touching the HTML5. So I got two solutions in to my mind.
1 Use javascript variables
// Error Messages
var msg_authentication_failed = "The username or password is invalid. Please try again";
and use this variable as I wanted.
2 Use XML file (Or JSON)
<?xml version="1.0" encoding="ISO-8859-1"?>
<ErrorMessages>
<AuthenticationFail>The username or password is invalid. Please try again</AuthenticationFail>
</ErrorMessages>
Load XML file and set values using it's tag names.
However I feel that the 2nd solution is easy to maintain by the client but performance wise it's not good.
Is there any other possible way to get done this kind of requirement? Appreciate your suggestions.
I'm running a jQuery Mobile project which supports around 6 languages (from Europe) and what I did was simply maintaining the labels in a JSON string.
using the event pagebeforeshow I update the labels when showing form element's labels. If it is an error message, I wrote a custom function that can access the string based on the labelID.
More than XML, JSON is extremely easy to handle. I would suggest you to go ahead with it.