dojox.form.Uploader never receives onComplete event, and behaves strangely - javascript

I am using dojo 1.7.2 I have bee trying to get the file uploader to work with a REST service in PHP.
Here is my function:
dojo.connect(dijit.byId("CNCFileUploader"), "onComplete", function(dataArray){
alert("onComplete Fired!");
dojo.forEach(dojo.isArray(dataArray) ? dataArray : [dataArray], function(resp){
console.log("display:", resp.file, resp.duplicates);
});
});
This is my markup:
<div data-dojo-type="dijit.Dialog" id="addCncIdsFileDialg" >
<form method="post" data-dojo-type="dijit.form.Form" id="addCncIdsFileFrm" enctype="multipart/form-data" action="CartService.php/cart/156568/cncidfiles">
<fieldset>
<legend>Upload File(s) with CNC_IDs</legend>
<div align="center">
<input type="file" multiple="true" name="CNCFileUploader" id="CNCFileUploader" data-dojo-type="dojox.form.Uploader" uploadOnSelect="false" /> <br/>
<button data-dojo-type="dijit.form.Button" type="submit" data-dojo-props="onClick:function(){dijit.byId('addCncIdsFileDialg').hide();}" id="cncIdsFSubmitBttn">OK</button>
<button data-dojo-type="dijit.form.Button" type="button" data-dojo-props="onClick:function(){dijit.byId('addCncIdsFileDialg').hide();}" id="cncIdsFCancelBttn" >Cancel</button>
</div>
<div id="CNC_IDfiles" dojoType="dojox.form.uploader.FileList" uploaderId="CNCFileUploader"></div>
</fieldset>
I never see the alert. For IE9 I see that the file is uploaded and processed. Interestingly while I select a single file, the logs show a second file with a null name and error=4. Also while the onComplete never happens, IE9 prompts me if I want to save cncidfiles from local host. The upload will only work the first time after that it does nothing and never again after that.
When I changed the multiple flag to false, the uploader stopped working entirely. With the following written to the JavaScript console:
TypeError: Unable to get value of the property 'value': object is null or undefined
TypeError: Unable to get value of the property 'value': object is null or undefined
A second problem is that when I use Google Chrome, the file is sent every time, but what I see on the server is very different from what dojo has documented in their Uploadfile.php.
I believe that dojox.form.Uploader is severely broken in 1.7.2 in several significant ways!
Out of frustration, I tried using dojo.io.iframe.send but while Chrome works fine, IE9 still acts like it wants to download cncidfiles and also only works the first time.

Ahuh... Poor uploader widget... :)
Well, check out http://clubajax.org/the-new-dojo-html5-multi-file-uploader/ and see if there's a comment here (on html5 uploader authors post).
Your question does not state how you do this, but you need to extend your uploader either of the plugins, IFrame / HTML5 or Flash or the onComplete is not an API hook.. In other words, its not defined in dojox/form/Uploader. You should use a sniff method, determining if it is IE or 'other'. For IE extend it with Flash and any other, use HTML5 (which has IFrame as fallback)
e.g.;
// this must be BeFore dojo.ready (and before parser runs)!
if(dojo.isIE) dojo.require("dojox.form.uploader.Flash");
else dojo.require("dojox.form.uploader.HTML5");

Related

Get data from file input in jQuery "get(0).files" is undefined

I have a file input in asp.net view page and I would like to retrieve the data of the file in jQuery ajax call on button onClick event.
HTML
<table>
<td style="text-align:left">
<input type="file" id="AttachmenteUploadFile" name="AttachmenteUploadFile" />
<input type="button" id="btnUploadSubmit" value="Attach Document" />
</td>
</table>
I tried:
var fileInfo = $("#AttachmenteUploadFile").get(0).files; //error : undefined
//$("#AttachmenteUploadFile")[0].files[0]; //error : undefined or null reference
//$("#AttachmenteUploadFile").prop('files');
None of the above is not working. I am getting 'undefined'. Please check the attached image. But i can get the object of input file with $("#AttachmenteUploadFile")[0]
any idea why i am not able to fetch the file data? Thanks for any Help.
Input File Browser Debugging
i found the issue that, i have IE version 11.0 but the Mode is set to 7. When i changed to Mode higher than 10 it was working and i am able to get the file information. Please find the attached image hot set the mode version.
Change IE Mode Version

Retrieve variable name from an HTML site

I am trying to retrieve simple javascript variable (which is written to a File Systems Object) from a website which is served by an apache host on my ubuntu laptop.
So I have the function that writes the variable set up as follows:
<script type ="text/javascript">
function WriteToFile(passForm) {
set fso = CreateObject("Scripting.FileSystemObject");
set s = fso.CreateTextFile("/home/lex/Downloads/goal.txt", true);
s.writeline(document.passForm);
s.Close();
}
</script>
and the section that takes the user input from the html website is
<div id="bot-right">
<form onsubmit="WriteToFile(this['goal'].value)">
<a align = "left"> <b><Strong>Enter a Goal name</Strong></b></a><br>
<input type="text" name="goal"> <br>
<input type="submit" value="Send Zeus">
<br>
</form>
</div>
For some reason, when I type in variable names to the form on the website, the file goal.txt gets created in the directory, /home/lex/Downloads/, but nothing gets written to it.
I also noticed that when I delete the goal.txt file and rewrite the variable from the html website, the file doesn't always get created.
I am not a JavaScript person and I am at a loss as to what I may need to fix this.
My intention is to get the variable written to the text file and have a processing c++ file process the variable.
Would someone be kind enough to lend an insight?
Thanks!
one way to do it is just calling the function without parameters and just getting the input value like this:
adding and id or a class to your input to get that specific value:
document.getElementById('goal').value
document.getElementByClass('goal').value
Or getting the value by name:
document.querySelector('[name="goal"]').value;
EDIT1
You could add a console.log to check if the value is beign passed correctly like this:
var inputValue = document.querySelector('[name="goal"]').value;
console.log(inputValue);
And if the value is being passed then the problem is your writeline or in the creation of the document
EDIT2
I just tested it and retrieving the value works just fine, so the problem must be in your document writing method, please check this documentation it can help you and i think is a better solution:
http://www.html5rocks.com/en/tutorials/file/filesystem/

Find script that changed the value attribute of a <input /> tag

<form id="search" action="/search" method="get" autocomplete="off">
<div>
<input type="button" name="test_button" value="test" />
</div>
</form>
<script>
document.getElementById("test_button").value = "changed_test"
</script>
Just as the HTML code above shows, I have defined a button with name test_button and value test and changing its value with the code in the script tag.
Now I am debugging a large webpage which is using a mechanism like this using Firebug and Firefox in Linux.
I want to know how I can find the script that changes the value attribute of the <input ... />, but the web page is too large, various <script> and anonymous functions which are auto-executed made it nearly impossible to find the specific script manually.
Since I am in Linux, I cannot use any Microsoft tools to search the whole web page. I only have Firebug and Chrome. Can Firebug realize that? Does anyone have a good idea of how to find the specific <script> that changed the value?
Add some code like this to the document, right after the form with the button:
<script>
var node = document.getElementById("test_button");
Object.defineProperty(node, 'value', {
set: function() { throw new Error('button value modified'); }
});
</script>
This will throw an error when anything tries to modify the button's value.
Expand the error and click the last line number shown. This will take you straight to the line that set the value of the button.
Here's a demo: http://jsfiddle.net/XSJZN/
Tested in Chrome 17.

Uncaught Reference Error: function is not defined

I'm working on an app for webOS that will take a megaupload link(assuming its a video), parse it into a direct link and stream it to a ffplay port for webos called TouchPlay.
I'm working on a basic prototype that will just take the end code on a megaupload link and return a direct link.
Now that I have laid out the basic parts of my application, on to my question. I want to take data in a form in an html page and feed it into a function in an external js script.
Here's the html portion
<html>
<head>
<script LANGUAGE="JavaScript" src="source/main.js"></script>
</head>
<body>
<form NAME="myform" ACTION="" METHOD="GET">
Enter the MegaUpload Code, ex. megaupload.com/?d=glgrn8f1 -> glgrn8f1: <BR>
<INPUT TYPE="text" NAME="inputbox" VALUE="">
<INPUT TYPE="button" NAME="button" Value="Click" onClick="javascript:codeIn(this.form);">
</form>
</body>
</html>
And in my main.js file is in a subdirectory called source and it contains function codeIn(code){ plus the rest of the functions.
Yet when I enter some test data in my web page and hit submit, I get an error in the chrome dev console saying Uncaught Reference Error: codeIn is not defined
I have a very limited experience with html and javascript, but I cant seem to figure this out, I imagine its something really simple that I'm missing.
EDIT: Here's main.js, and yes, I have checked for typos. Just ask if you need to see the contents of any of these functions, but I didn't think they were neccesary.
function codeIn(code){
...
}
function getInfo(url){
...
}
function waiting(timer){
...
}
Ive looked through all these suggestions and it all seems to point to a syntax error, yet when I try to put all the js functions into the head of the html, it works. So thats what I'm doing. I don't change a single thing when I reference it from source/main.js, but whatever.
From the look of it, I think you then need to double check the location of main.js. Verify whether your HTML file is in a location from where main.js can be accessed as source/main.js, rather than something like ../source/main.js (in case your HTML file is in a folder parallel/sibling to the source folder)
The RefereceError in general related to the scope of function that is present and the function call that is being made. It might the source path of the js, html/xhtml/jsp or function scope with in the js file. Hope this helps. Thanks.

to send a text file to server using javascript

I need to send a text file to server and get it saved. how can i do it using javascript???
There are all sorts of security issues surrounding this. Would you be happy to visit a website that would upload a file from your machine to the server?
For a generic website, where users are likely to have their permissions set to deny this sort of access it isn't possible.
If by chance, you are looking to do this for an application where you have control over the security settings for its users, and that you can guarantee its Windows and IE, then it is possible by reading the file and passing the details by posting to the server. See the following link : http://www.javascripter.net/faq/reading2.htm
However when you move away from IE or Windows, then you are going to struggle.
using ajax of course.
have a file on the server, PHP or ASP - depending on what your internet server is.
this file will accept the text file (data and name), and should also check for size and if this file already exists or not, and if all is ok- it will save it, and return a string "OK"
on the client, javascript side, just send the information to the server using ajax, or HTTPREQUST object - there's plentty of documentation for that around. and if you get back a response of "OK" then you know that it sent well.
even better: don't use HTTPREQUEST, but do dynmaic script tag insertion - where the source attribute of the script you're appending is that file on the server like:
var a = document.createElement('script');
a.type = 'text/javascript';
a.src = "http://server/serverFile.PHP?filename=XXX&data=LONG STRING OF DATA REPRESTING THE DATA TO BE SAVED PROBABLY LESS THAN 2K IN SIZE AND ALSO YOU SHOULD ESCAPE OR ATLEAST URIENCODE IT";
document.body.appendChild(a);
and on the server file, serverFILE.PHP:
<?php
// some code to save the request variable [data].
// if all is ok:
alert("ok")
// or:
result = "ok"
?>
get it?
note: you'll probably have a limit of less than 2K on the file size.
Javascript is a front-end language. You may use php or any server side language.
You can create an Ajax equiv function make an iframe with width and height=0px then make it the target of the form with the file upload input and process it with the action PHP
<form action="upload.php" target="target" method="post"
name="uploadform" id="uploadform" enctype="multipart/form-data">
<label for="input_file_upload">Upload:</label>
<input onchange="document.uploadform.submit();" size="80"
type="file" name="file_upload[]" id="file_upload"
multiple="multiple" />
<input type="hidden" name="fileUpload" value="upload" />
<input type="button" value="Upload" />
</form>
<iframe id="target" name="target" style="width: 0px; height: 0px;">
</iframe>

Categories