Store file content in a table(html table tr td) jquery - javascript

I wanted to insert multiple files in database by uploading/adding the each file content to a table then after adding all files to the table i add the tables' value including the file content in a form data which i pass to ajax. I tried
var file = $('#file')[0].files[0];
//var file = document.getElementById('file').files[0];
var name = file.name;
var size = file.size;
var type = file.type;
var blob = new Blob([file], {
type: "application/octet-binary"
});
var filecontent = blob;
Here i used the value of filecontent to be passed to ajax but in php the condition if(!empty($_FILES) remaind false)
and on console.log filecontent looks like [object Blob] i want to do to achieve my primary goal which is to store to database i already asked a question about it. I can be found here this is the problem why i asked the first one.
My question is How to store file content to a variable in this case store the value of $('#file')[0].files[0] to file.
UPDATE
When i used the value of var file = $('#file')[0].files[0]; i still get the same error
UPDATE
Is it possible to store the input:file into table td or input or any other element and reuse that file if needed

To store content of a file into a variable you first need to read them , so you will have to use a FileReader.
For example readAsText() method Syntax:
instanceOfFileReader.readAsText(blob[, encoding]);
The readAsText method is used to read the contents of the specified
Blob or File. When the read operation is complete, the readyState is
changed to DONE, the loadend is triggered, and the result attribute
contains the contents of the file as a text string.
Hence you can store the result to your variable.

Related

readFileSync is returning empty string

Reading a file using readFileSync is returning an empty string.
I am reading contents of a file using link which is retrieved from the database. It is working.
But I am unable to read the file using link which is stored in a variable.
My code is given below:
var result1={};
var filename="/home/rgukt/Project 2.0/CCMS/Admin/Challenges/"+(req.body.challenge_name)+"/"+(req.user.username)+"_expected_output"+(result[i].test_case_id)+".txt" ;
result1.output = fs.readFileSync(result[i].output,'utf8'); // working
result1.expected_output = fs.readFileSync(filename,'utf8'); // not working

How to get the File Type of a File in Sharepoint

I'm trying to load in documents from the Documents library in SharePoint and I want to be able to filter them by file type (Word Doc, Excel Sheet, etc.) from my application. I've figured out how to get the icon for the file type using mapToIcon, but I can't seem to find anywhere how to get the file type.
Is there any function or API call to get the file type of a file? I would prefer to not have to hard code each type based on file extension but I may need to do that.
Here is a bit of my code for reference
// data returned from an ajax call to get all documents
var results = data.d.results;
for(var i = 0; i < results.length; i++){
// get the name of the document
var name = results[i].Name;
// retrieve the icon for the file type through an ajax call
var icon;
$.ajax({
url: siteUrl + "/_api/web/maptoicon(filename='" + name + "',progid='',size=0)"
/*headers*/,
success: function(data){
// get the icon
icon = data.d.MapToIcon;
},
});
}
File_x0020_Type property of SP.ListItem resource could be utilized for that purpose.
In case if your query (seems to be your scenario) returns files SP.FileCollection resource, file type could be retrieved like this:
/_api/web/getfolderbyserverrelativeurl('<folder url>')/Files?$select=ListItemAllFields/File_x0020_Type&$expand=ListItemAllFields
In case if your query returns list items SP.ListItemCollection resource, file type could be retrieved like this:
/_api/web/lists/getbytitle('<list title>')/items?$select=File_x0020_Type

Getting the size of an uploaded file React JS

How would I go about finding the size of an uploaded file in React JS?
Let's say, your jsx is like <input type="file" onChange={this.fileChangedHandler}/>
Now, in your fileChangedHandler, you'll have to do something like below:
fileChangedHandler = (event) => {
let file_size = event.target.files[0].size;
//or if you like to have name and type
let file_name = event.target.files[0].name;
let file_type = event.target.files[0].type;
//do whatever operation you want to do here
};
You will first need to grab the input type file upload like
var uploadDocuments = document.getElementById('file-0'); //grab html file-upload element
and can get the file size using .size attribute.
uploadDocuments.files[0].size //this gives the size of uploaded file
React.js is just used for your view. You can use normal javascript for everything else.
If you wanted to find a file's size at some url with jquery:
var req = $.ajax({
type: "HEAD",
url: 'some/url/here',
success: function () {
console.log(req.getResponseHeader("Content-Length")); //Filesize
}
});
In the success callback you could save the size into React's state using setState(), then display the size in a div within your render method.
You are also not limited to using jquery for the HEAD request. SuperAgent is another popular one.

Read CSV from server and put contents into drop down list in html or javascript

I have a csv file sitting on my server (using Apache 2) which I would like to "read" when a webpage loads. After reading the contents (two columns that are comma separated), I want to have one column be the display contents of a drop down list and the other column be the "data" contents. For instance, if I had a csv where the first row was [1,"me"], I would want the "me to be displayed to the user and the 1 to be the data that I could understand (selected value).
I know very little on javascripting and html (still learning), so any simple help would be much appreciated. To recap:
How do I read CSV file off my server (currently doing localhost)?
How do I parse this CSV file and add each row as an entry of a dropdown list?
Thanks!
How do I read CSV file off my server (currently doing localhost)?
First, you'll need to fetch the data from the CSV file so you can work with it as a native JavaScript object. Using jQuery's $.get() method, you can make an asynchronous request to the server and wait for the response. It would look something like this:
$.get(csv_path, function(data) {
var csv_string = data;
//Do stuff with the CSV data ...
});
How do I parse this CSV file and add each row as an entry of a dropdown list?
This can be accomplished with a for loop and some jQuery:
(function() {
var csv_path = "data/sample.csv",
var renderCSVDropdown = function(csv) {
var dropdown = $('select#my-dropdown');
for(var i = 0; i < csv.length; i++) {
var record = csv[i];
var entry = $('<option>').attr('value', record.someProperty);
dropdown.append(entry);
}
};
$.get(csv_path, function(data) {
var csv = CSVToArray(data);
renderCSVDropdown(csv);
});
}());
Note that this code calls a CSVToArray method, which you must also define in your code. An implementation can be found here, thanks to Ben Nadel: Javascript code to parse CSV data

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.

Categories

Resources