Develop Reference

Easiest way to load and read a local text file with javascript?

I have a .csv file that I wish to load that contains information that the .HTML page will format itself with. I'm not sure how to do this however,
Here's a simple image of the files: http://i.imgur.com/GHfrgff.png
I have looked into HTML5's FileReader and it seems like it will get the job done but it seems to require usage of input forms. I just want to load the file and be able to access the text inside and manipulate it as I see fit.
This post mentions AJAX, however the thing is that this webpage will only ever be deployed locally, so it's a bit iffy.
How is this usually done?

Since your web page and data file are in the same directory you can use AJAX to read the data file. However I note from the icons in your image that you are using Chrome. By default Chrome prevents just that feature and reports an access violation. To allow the data file to be read you must have invoked Chrome with a command line option --allow-file-access-from-files.
An alternative, which may work for you, is to use drag the file and drop into onto your web page. Refer to your preferred DOM reference for "drag and drop files".

You can totally make an ajax request to a local file, and get its content back.
If you are using jQuery, take a look at the $.get() function that will return the content of your file in a variable. You just to pass the path of your file in parameter, as you would do for querying a "normal" URL.

You cannot make cross domain ajax requests for security purposes. That's the whole point of having apis. However you can make an api out of the $.get request URL.
The solution is to use YQL (Yahoo Query Language) which is a pretty nifty tool for making api calls out of virtually any website. So then you can easily read the contents of the file and use it.
You might want to look at the official documentation and the YQL Console
I also wrote a blog post specifially for using YQL for cross domain ajax requests. Hope it helps

You can try AJAX (if you do not need asynchronous processing set "async" to false. This version below ran in any browser I tried when employed via a local web server (the address contains "localhost") and the text file was indeed in the UTF-8-format. If you want to start the page via the file system (the address starts with "file"), then Chrome (and likely Safari, too, but not Firefox) generates the "Origin null is not allowed by Access-Control-Allow-Origin."-error mentioned above. See the discussion here.
$.ajax({
async: false,
type: "GET",
url: "./testcsv.csv",
dataType: "text",
contentType: "application/x-www-form-urlencoded;charset=UTF-8",
success: function (data) {
//parse the file content here
}
});
The idea to use script-files which contain the settings as variables mentioned by Phrogz might be a viable option in your scenario, though. I was using files in the "Ini"-format to be changed by users.

fileupload accept header

I have an ExtJs form with an upload field. When I sumbit the form, the Accept-header is wrong. The response is JSON yet the sent Accept-header is:
Accept:text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
My educated guess is that it's the browsers default value.
In Chrome this results in a warning: Resource interpreted as Document but transferred with MIME type application/json.
In FireFox this results in a file download.
Conclusion: I have to change/set the Accept-header to application/json
Sencha's documentation sais it has a headers parameter, but I've tested and for fileupload it does not work. A comment said it's not supported. (found same result in another thread)
Any suggestions to get rid of the file download/ set the right Accept-header... It doesn't have to be a ExtJs sollution. If you can give me a plain javaScript solution for setting the accept header on a file upload form, I can probably mold it into the sencha framework.
UPDATE:
The ExtJS form submit:
form.submit({
url: API_URLS.addDocument,
waitMsg: 'Uploading your document...',
headers: {
"Accept": 'application/json' //doesn't work
},
success: function() {
...
},
failure: function(){
...
}
});
Behind the scenes it creates an ordinary form similar to this:
<form action="API_URLS.addDocument" enctype="multipart/form-data" method="post">
<input type="file"/>
</form>
which can be submitted through javaScript (submit())

The Accept header is just asking the server to respond with data of a given type. The * in the default header means "or anything else" (although the q value puts a lower priority then that).
If the response is JSON and you want JSON, then you don't need to touch the Accept header at all.
The problem is that, if I'm reading between the lines correctly, you are trying to perform an Ajax file upload using an iframe, and Firefox doesn't try to render JSON files as documents.
There are two ways around this.
Present the response as HTML instead of JSON and then extract the data from it using DOM
Use XMLHttpRequest 2 and the File API to upload the files instead of an iframe. (Note: This uses new APIs that have limited browser support).

How can I emulate a form submission with a javascript File object?

So I have a file object created from a drag and drop into an area from desktop. Now things all dandy, until I have to upload it via Ajax to a Django backend. I would like to utilize the nice Django utils such as request.FILES, etc.
Right now, I'm messing with some existing code here:
xhr.open("post", s.post, true);
// Set appropriate headers
xhr.setRequestHeader("content-type", "multipart/form-data");
xhr.setRequestHeader("x-file-name", file.fileName);
xhr.setRequestHeader("x-file-size", file.fileSize);
xhr.setRequestHeader("x-file-type", file.
xhr.send(file);
Try as I might, it doesn't seem to be emulate a form with a file input submission. Is there something that I am missing?
Thanks!

You need to create a "FormData" object and then append the file to that as a parameter.
var fd = new FormData();
fd.append("theFile", yourFileObject);
//
// ... set up the xhr ...
//
xhr.send(fd);
Obviously this only works in HTML5 environments, but if you're messing with the File stuff that's probably something you're dealing with.

Unfortunately, you cannot upload a file using the XmlHttpRequest object because it is not supported.
There have been hacky workarounds (like using an iFrame) and recently there is a new File api (https://developer.mozilla.org/en/using_files_from_web_applications) for HTML 5 for browsers that support it.
If you search a little more on stackoverflow, you can find examples on how to do the workarounds.

How to upload a file using an HTTP "PUT" using JQuery?

I would like to upload a file using JQuery-File-Upload, but using HTTP "PUT" instead of multipart-forms. According to their site:
- Multipart and file contents stream uploads:
Files can be uploaded as standard "multipart/form-data" or file contents stream (HTTP PUT file upload).
but I cannot find anywhere in their documentation as to how to do this. Can anyone help?

According to : https://github.com/blueimp/jQuery-File-Upload/wiki/Options
method
The method of the HTTP request used to
send the file(s) to the server. Can be
POST (multipart/formdata file upload)
or PUT (streaming file upload).
Accepts a String or a function
returning a String.
You should use :
$('#file_upload').fileUpload({
namespace: 'file_upload_1',
url: '/path/to/upload/handler.json',
method: 'PUT'
});

I love REST too but you might want to make sure you unit test well on the browsers you need to support.
http://api.jquery.com/jQuery.ajax/
The type of request to make ("POST" or "GET"), default is "GET". Note: Other HTTP request methods, such as PUT and DELETE, can also be used here, but they may not supported by older browsers.
See this answer
How do I PUT data to Rails using JQuery

Using XMLHttpRequest.send() in JavaScript

How do I use XMLHttpRequest.send()?
My code in JavaScript is as follows:
str_xml+="<xml_to_be_submitted><request_xml><client_id>"+document.frmCallEntryAdd.cboCLIENT.options[document.frmCallEntryAdd.cboCLIENT.selectedIndex].value+"</client_id></request_xml></xml_to_be_submitted>";
var obj_http=new ActiveXObject("Microsoft.XMLHTTP");
var str_url="ClientModuleFetch.aspx";
var str_http_method="post";
obj_http.open(str_http_method,str_url,false);
obj_http.SetRequestHeader("Content-Type","application/x-www-form-urlencoded");
obj_http.send(str_xml);
var str_reply=obj_http.ResponseText;
var xmlResponse = str_reply;
var objXmlDOM=new ActiveXObject("Microsoft.XMLDOM");
Can any body tell me what I am doing wrong?

For one, your method will only work in IE (I hope this isn't for a public website). A second error I can spot is that you've spelled SetRequestHeader with a capital S. It's supposed to be setRequestHeader.
Could you post exactly what error message (with the line number) you're getting, if any?

Your posted data is not application/x-www-form-urlencoded, which looks like this a=b&c=f.
Your posted data is either application/xml or text/xml which is generally not used with XMLHttpRequest unless you are manually constructing SOAP packets.
It is my guess that you are calling a script enabled service endpoint that can accept url encoded parameters so perhaps the manually constructed XML is not the appropriate data to post.
If not, you will need to explore the special corner of hades that is reserved for those who insist on calling SOAP from JavaScript. I do not envy you. ;-)
The return, on the other hand, possibly is XML that you will need to parse. I would suggest using a more cross browser compatible method for both XMLHttpRequest construction as well as XML parsing as your code seems to be IE centric.
Also, as noted elsewhere, you have a typo r.e. SetRequestHeaders should be setRequestHeaders.