load a csv file into d3 without sending to server - javascript

is there anyway to load csv data into d3.csv without sending it to server? I'm trying to use a dataURI but it's not working...
I have a form that a user can choose a csv file from their computer.
<input type='file' onchange="readURL(this);"/>
This leads to the readURL function which creates a dataURI from that file.
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#file_url')
.attr('data-file-url', f.target.result);
};
reader.readAsDataURL(input.files[0]);
}
}
Then I have a script to steal that dataURI from the #file_url div and enter it into d3.csv:
var address = $('#file_url').attr('data-file-url');
d3.csv(address,function(csv){
do stuff with that csv
}
Problem is I'm getting a cross-origin error.

You can use File API, but is not supported a close browsers especially IE. For more check this

Related

HTML Input file upload saved as very long url without PHP, AJAX, or jQuery

I have a website where you can upload files and it will be saved in a database, but is there a way where the url doesn't have to be 1 million characters long? Here's the code for uploading
function readImg(input, eltID) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
document.getElementById(eltID).style.backgroundImage = 'url('+e.target.result+')';
};
reader.readAsDataURL(input.files[0]);
}
}
Which generates this:
Any solution?
I'm also not using any form. Using input type=file
You have to store the image data somewhere.
At the moment you appear to be choosing to store it in a data: scheme URL.
You can't reduce the size of that without making the total amount of image data smaller (e.g. by degrading the quality).
If you want a short URL, then make the URL be a reference to the image (e.g. store the file on a file system and put a static HTTP server in front of it, then the URL will be based on the filename you save the image as).
Where is the "upload" part?
Anyhow on the client side you can use createObjectURL
function readImg(input, eltID) {
if (input.files && input.files[0]) {
var url = URL.createObjectURL(input.files[0])
document.getElementById(eltID).style.backgroundImage = 'url('+url+')'
}
}

Using only pure javascript how to get file name, format and content of a browsed file

I need to get the name, format and content of a browsed file only, multiple files not required. Even I cant use any HTML5 API/jQuery. Could you please guide me, using only pure JavaScript how do I solve this.
Here is the fiddle:
[https://jsfiddle.net/summtz8m/][1]
After getting all I need to click ImportASN1 button to POST data in REST service.
Here is my HTML
<button class="ebBtn" id="importButt" name="importButt"><span>Import ASN1</span></button><input type="file" id="myfile" name="myfile"><p id="contents"></p>
Here is my JS
var file = document.getElemtById("myfile").files[0];
console.log(file);
if (file) {
// create reader
var reader = new FileReader();
reader.readAsText(file);
reader.onload = function(e) {
// browser completed reading file - display it
console.log(e.target.result);
};
}
Your current code runs on page load. But at that time the file input is not filled out yet! Instead, listen to the click event on the button, or the change event on the file input.
In addition, there is a typo: document.getElemtById should be document.getElementById. Use the developer console in your browser (F12 → Console in many browsers) to find these errors.
The file name will then be present in the file.name property.
<script>
document.getElementById("myfile").addEventListener('change', function(ev) {
var file = ev.target.files[0];
var reader = new FileReader();
reader.readAsText(file);
reader.onload = function(e) {
console.log(file.name, e.target.result);
};
});
</script>

HTML5 - Create dynamically an image from a local path?

Is it possible to create an HTML image, if I have only a path to a local file? I tried to use a filereader, but the mere path does not work. how can I solve the issue?
JS
var reader = new FileReader();
reader.onload = {
$('#myImg').attr('src', e.target.result);
};
reader.readAsDataURL("file:///C:/Users/me/AppData/Local/Temp/msohtmlclip1/01/clip_image002.jpg ");
This is a simple tool I have made for reading files in JavaScript:
Fiddle
The JavaScript code is:
var reader = new FileReader();
reader.onerror = function(ev) {
$('#output').html('=== Error reading file ===');
}
reader.onload = function(ev) {
$('#output').html(ev.target.result);
};
reader.readAsDataURL(e.target.files[0]);
When you select an image file it will present you with a base64 dataURI of the image.
I recommend not trying to select a file that's not an image, I don't know what'll happen.
something like this?
var x=document.createElement("img");
x.src="C:\data\images\test.jpg";
x.style.height="50px";
document.getElementById('whereimgoing').appendChild(x);
Also I should add that if this is on a website then it will depend highly on browser security
var reader = new FileReader();
reader.onload = function(e) {
$('#myImg').attr('src', reader.result);
};
reader.readAsDataURL("file:///C:/Your/path/msohtmlclip1/01/clip_image002.jpg");
Should be fine, if access to local files is granted (check your browser settings or try if it works when deployed on a server (either localhost or www.yourserver.com).. Local files can always cause some troubles as browser behave differently. Also try to not use the temp folder.

javascript: get base64 of input field (type=file) in IE9

I need to upload an image, something like this
<form>
<input type="file">
</form>
However, I want to crop/resize the file before uploading. The cropping and resize is no problem, but how do I get the base64 from the input file element? In IE10 and the other browsers I can it like this:
if (this.files.length === 0) {
return;
}
var file = this.files[0];
if (file.type.match(/image.*/)) {
var reader = new FileReader();
reader.onload = function (event) {
cropAndResize(event.target.result);
};
reader.readAsDataURL(file);
}
However, in IE9 this.files is undefined. How can I access the base64 of the uploaded image (without a round trip to the backend of course!) in IE9 ?
Here is a jsfiddle
IE9 does not support the FileReader API and therefore cannot do what you want using pure JavaScript. If you want IE9 support, then you'd need to use something like this Flash solution in order to achieve the same result.

How to display the content of a local file in browser using java script ( code to be compatible for all browsers)?

I am planning to create a application on my local . I need a javascript code that to render the content from whichever file I am selecting from my system using html file-upload input box. Referred to the below link but
http://www.alecjacobson.com/weblog/?p=1645 where the code is not compatible for other browsers,
Thanks in Advance
For security reasons you can't open a file from the browser. What you can actually do is upload it to the server and then write it back to the page.
To upload the file I suggest you uploadify or jquery upload.
You are welcome.
If you don't care about the cross-browsing support then:
<input id="file" type="file" multiple="" onchange="startRead()">
<pre><code id="output"></code></pre>
function startRead() {
//obtain input element through DOM
var file = document.getElementById('file').files[0];
if (file) {
getAsText(file);
}
}
function getAsText(readFile) {
var reader;
try {
reader = new FileReader();
} catch (e) {
document.getElementById('output').innerHTML = "Error: seems File API is not supported on your browser";
return;
}
// Read file into memory as UTF-8
reader.readAsText(readFile, "UTF-8");
// handle success and errors
reader.onload = loaded;
reader.onerror = errorHandler;
}
function loaded(evt) {
// Obtain the read file data
var fileString = evt.target.result;
document.getElementById('output').innerHTML = fileString;
}
function errorHandler(evt) {
if (evt.target.error.code == evt.target.error.NOT_READABLE_ERR) {
// The file could not be read
document.getElementById('output').innerHTML = "Error reading file..."
}
}
We are developing kinds of web-based GUI editor. This issue have been the problem for long time.
As I know, the method in the site you mentioned is the only way. We are using HTML5 File System.
Before this, We've considered using kinds of Flash module, local web server, dropbox, ...

Categories