Develop Reference

How to upload and process CSV File using ExtJS Client Side

I am trying to Upload a CSV File containing IP addresses using Ext-js and have it processed and converted into a JSON Object on the client-side before sending it to the server to be added to the repository.
I need to parse the CSV, convert it into a JSON Object and then add the information to a Data Store- but I'm terribly stuck.
Are there any existing libraries that can help achieve this?
I am looking at avoiding jQuery/HTML5. Is there a way we can do it exclusively using Javascript / Extjs?
I tried going through a lot of examples- but most of them use jQuery/HTML5 API/ Papa-Parse or prefer doing it server side.
My 'Upload' Button handler function looks like this:
handler: function () {
var file = Ext.getCmp('form-file-win').getEl().down('input[type=file]').dom.files[0];
var reader = new FileReader();
var importedAddresses=[];
reader.onload = function (oFREvent) {
importedAddresses=oFREvent.target.result;
};
reader.readAsText(file);
this.dataStore.add({
id: '',
name: 'Imported from CSV',
});
win.close();
}

Unfortunately there is no way to access the content of the file on the client side.
You have two options:
You either post the file to the server and process it serves-side and give a json response for your javascript
Or you need to use HTML5 to access a local file. Here is a tutorial on how to do that: local file processing

I have json file on local computer i want to use that file in javascript how can i use that in js

Following is the code snippet which i am trying
var json = require('dictonery.json'); //(with path)
console.log(json);

$.getJSON is asynchronous. See http://api.jquery.com/jQuery.getJSON/
You should do
$.getJSON("test.json", function(json) {
console.log(json);
// this will show the info it in firebug console
});

OK, so from your comments I assume you have the following scenario: You have a server somewhere running your code and you have a local machine where the JSON file is stored. That won't work, if the local machine is not running a web server allowing you to load the JSON to the machine running the code. You could do this in that case e.g. by using PHP's file() function or via an Ajax call. I'd rather recommend to upload it first, so all files are in the same file system.
If you create the JS from a PHP enabled file you could do the following:
var json = '<?php require('dictonery.json') ?>'; //(with path)
console.log(json);
var jsonObj = JSON.parse(json);
console.log(jsonObj);
The require loads the file holding your JSON data (given that it is accessible) and puts it into the js file so that it ends up in a string variable. The JSON.parse creates a Javascript object from this string, so that you can actually use the data.

upload file via ajax with jquery easy ui

I'm trying to give users the possibility to import data from a file that is located on their computer by using jQuery EasyUI form widget:
<form id="my_form" method="POST">
<input type="file" name="my_file" id="my_file" />
</form>
var file_name = $('#my_file').val();
if(file_name)
{
$('#my_form').form('submit', {
url: [url_to_call],
onSubmit: function(param){
param.file_path = file_name;
}
});
}
Then when the user browse on his/her computer for the file, I wanna send the path to a jQuery ajax query to perform some upload action. The problem I have is that filename returns something like this:
C:\fakepath\[name_of_file]
Because of the fakepath string, I am not getting the real path to where the file is located on the user's computer. Does anybody know how I can fix this issue please?
Thank you

Tried this plugin http://malsup.com/jquery/form/#getting-started
this plugin provide a method called AjaxSubmit() which work fine for upload the image. I have used it in 2011.
it's have some issue in IE (old version like 6,7). You need to write some hacks. on the backend Firefox and IE upload the correct file-stream format like Data/Image but in Chrome (Webkit) you will got Octet Stream. You need to parse the file format on server to check that file is not wrong.

I have no idea what your form() function does, as no such method exists in jQuery, but the usual way of uploading a file to the server would be something like this :
$('#my_file').on('change', function() {
$.ajax({
url : [url_to_call],
data : new FormData($('#my_form').get(0)),
processData: false,
contenttype: false
}).done(function(param) {
param.file_path = file_name;
});
});

Forcing Backbone to save an attribute as a file

Is there a way to use Model.set and Model.save in a way that will force Backbone to send the data to the server as a file (as if you were submitting a form with an <input type="file"> tag?

The short answer is no. The long answer is, sort of.
This doesn't really have anything to do with Backbone and instead is about being able to AJAX a file in the browser. The solution is to use the File API from HTML 5. Below is an example of how you would do that with a Backbone model.
Let's assume we have a User model and we want to save an avatar file on that model.
// Backbone Model JS
User = Backbone.Model.extend({
readAvatar : function (file, callback) {
var reader = new FileReader(); // File API object for reading a file locally
reader.onload = (function (theFile, self) {
return function (e) {
// Set the file data correctly on the Backbone model
self.set({avatar_file_name : theFile.name, avatar_data : fileEvent.target.result});
// Handle anything else you want to do after parsing the file and setting up the model.
callback();
};
})(file, this);
reader.readAsDataURL(file); // Reads file into memory Base64 encoded
}
});
// Somewhere in your view JS
this.$("input[type='file']").change(function (event) {
var file = e.originalEvent.target.files[0];
userModel.readAvatar(file, userModel.save);
});
// HTML
<form><input type="file" name="avatar"/></form>
Now on your back end you need to handle the file coming through as Base64 encoded data.
A couple of warnings:
If you need extensive browser support then this solution probably won't work for you.
Base64 encoding a file is going to increase the amount of data sent over the wire by about 30%.

how to export csv file with filename

I want to export the exist data into csv file. I try to use this code:
var uriContent = "data:text/csv;charset=utf-8," + encodeURIComponent(data);
var myWindow = window.open(uriContent);
myWindow.focus();
it works but I can design filename. I can only get the dialog with name like "MVeAnkW8.csv.part" which I don't know where the name come from.
How can I assign filename in the first dialog? Thanks in advance.
update:
I am now using rails. Actually I have a method in server side names export_to_csv. In end of this method, I use code like that:
send_data(csv_string,
:type => 'text/csv; charset=utf-8;',
:filename => "myfile.csv")
It works and I can specify the file name.
For now, I want to use ajax to get more csv files(that is the reason why I want to use javascript, because a normal http request can only get one file to be downloaded).
I use js code like that:
$.post("export_to_csv",
function(data) {
var uriContent = "data:text/csv;charset=utf-8," + encodeURIComponent(data);
var myWindow = window.open(uriContent);
myWindow.focus();});
It get the data from server side and I try to transfer it into csv. I can get a file but can't specify the file name.

As I know, you can specify the filename only in chrome 14+.
Take a look at this question: Is there any way to specify a suggested filename when using data: URI?
Update!
If you want to download multiple csv files "at once", you can zip them together, or save each file on the server separately (each file now has a url that points to it - if you place them inside the 'www' folder).
Then send the file names and their path/url to the client via ajax (use a json encoded list for example).
In the ajax callback function: take the list of the files and open each file-url in a separate popup.