d3.js JSON read with file selection dialog box - javascript

I can read file in the same folder than the script js, but not in another folder.
HTML part:
<!DOCTYPE html>
<meta charset="utf-8">
<title>Test</title>
<button class="mybutton" id="fileSelect">Select a file</button>
<script src="https://d3js.org/d3.v3.min.js"></script>
or
<script src="https://d3js.org/d3.v4.min.js"></script>
<script type="text/javascript" src="my_script.js"></script>
</html>
D3.JS part:
var element = document.createElement('div');
element.innerHTML = '<input type="file" accept=".json">';
var fileInput = element.firstChild;
var fileSelect = document.getElementById("fileSelect");
fileInput.addEventListener('change', function() { // wait for file selection
var file = fileInput.files[0];
var file_name = file.name;
// load the data
d3.json(file_name, function(error, graph) {
do_things;
}
});
fileSelect.addEventListener("click", function () { // wait for click on "select a file" button
fileInput.click();
});
Where is my error?
Thank you in advance

Related

Upload files from Local Folder using Dynamic WebTwain Cab file

I am very new to Dynamic WebTwain therefore apologies in advance If I am asking something to basic.
I currently have scanning functionality available in my Dynamic WebTwain but I need to implement Uploading functionality as well. For that I need to use ActiveX Object and DynamicTwain Cab Files. I am reading the documentation of WebTwain but there they are not using ActiveX or Cab files.
Currently, I am using below method for uploading,
DWObject.LoadImageEx("",1);
However, I do not want to upload the images in designated image viewer of Dynamosoft. I want to upload images in a custom Image viewer. For that, I am assuming that I will need to get the object of selected image for it to load in the custom image viewer. How can I do that?
Looking for guidance.
The LoadImageEx method is used to load local images to the Dynamic Web TWAIN image viewer, not for uploading images. To load images to a custom viewer, you just need to use the input element and FileReader.
For example:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<input type="file" name="document" id="document" accept="image/*">
<div id='customviewer'></div>
<script>
var input = document.querySelector('input[type=file]');
input.onchange = function () {
var file = input.files[0];
var fileReader = new FileReader();
fileReader.onload = function (e) {
var dataURL = e.target.result, img = new Image();
img.src = dataURL;
$("#customviewer").append(img);
}
fileReader.readAsDataURL(file);
}
</script>
</body>
</html>
Using LoadImageEx:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://unpkg.com/dwt#17.1.1/dist/dynamsoft.webtwain.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<input class="button" type="button" value="Load Images" onclick="loadFile()" />
<div id='customviewer'></div>
<script type="text/javascript">
var element = document.createElement('div');
var dwtObj = null;
Dynamsoft.DWT.CreateDWTObjectEx({
WebTwainId: '1'
},
function (obj) {
dwtObj = obj;
dwtObj.Viewer.bind(element);
},
function (err) {
console.log(err);
}
);
function loadFile() {
if (dwtObj) {
dwtObj.LoadImageEx('', 5,
function () {
dwtObj.ConvertToBlob(
[dwtObj.CurrentImageIndexInBuffer],
Dynamsoft.DWT.EnumDWT_ImageType.IT_PNG,
function (result, indices, type) {
var urlCreator = window.URL || window.webkitURL;
var dataURL = urlCreator.createObjectURL(result);
var img = new Image();
img.src = dataURL;
$("#customviewer").append(img);
},
function (errorCode, errorString) {
}
);
},
function (errCode, error) {
}
);
}
}
</script>
</body>
</html>

Javascript FileReader how can I access reader.onload?

I am currently learning Javascript. I'm working on a program with FileReader.
How can I access variable file for variable perf?
My code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style/style.css">
<title>FileReader</title>
</head>
<body>
<h1>FileReader</h1>
<input type='file' accept='text/plain' onchange='openFile(event)'><br>
Input: <input type="text" id="qi" value="">
<br></br>
<button onclick="check()" class="button buttonB">Check</button>
<p id="ans"></p>
<p id=".same"></p>
<script src="main.js"></script>
</body>
</html>
function check(){
var text = document.getElementById("qi").value;
console.log(`Text: ${text}`);
var perf; //The value should be `file`
if (text === perf){
console.log("Same");
document.getElementById(".same").innerHTML = "Same";
} else{
console.log("Not Same!!!")
document.getElementById(".same").innerHTML = "Not Same!!!";
}
}
function openFile(event) {
var input = event.target;
var reader = new FileReader();
reader.onload = function(){
var file = reader.result;
console.log(file);
document.getElementById("ans").innerHTML = file;
};
reader.readAsText(input.files[0]);
};
Method 1 : Compare the innerHTML you saved
var perf = document.getElementById("ans").innerHTML;
Method 2 : Save the variable in a global scope
Just save the variable file in the global scope :
Replace
var file = reader.result;
By
window.file = reader.result;
And
if (text === perf){
By
if (text === window.file){

clone a image and then rename it using javascript

I want to rename my image captured using camera at client side using javascript. I know it is not directly possible due to security reasons.
I already did it in server side but I need to rename my image before uploading to server. Can I make a copy of image and then rename it? If I can, how would I do it?
This is my javascript file
var oFile = new File([""],"");
var clonedImage = new Image();
//cloning function
function cloneImage ()
{
alert("cloning1");
clonedImage.name = oFile.name;
document.getElementById("image_file").appendChild( clonedImage);
alert("cloning2");
alert("success" +clonedImage.name );
}
function fileSelected()
{
// get selected file element
oFile = document.getElementById('image_file').files[0];
// filter for image files
var rFilter = /^(image\/bmp|image\/gif|image\/jpeg|image\/png|image\/tiff)$/i;
if (! rFilter.test(oFile.type)) {
alert("Not a proper file format");
return;
}
cloneImage();
alert("cloning");
var oReader = new FileReader();
oReader.readAsDataURL(oFile);
alert("success = "+oFile.name);
alert("success = "+oFile.type);
}
function startUploading()
{
var formdata = new FormData(document.getElementById("upload_form"));
var imageName = oFile.name;
formdata.append("image1",oFile);
var request = new XMLHttpRequest();
request.open('POST', 'http://10.182.xx.xx/upload.php',true);
alert("start uploading");
alert("success ="+oFile.name);
request.send(formdata);
alert("finished");
}
This is my html file
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<link href="file:///android_asset/main.css" rel="stylesheet" type="text/css" />
<script src="file:///android_asset/script.js" type ="text/javascript"> </script>
</head>
<body>
<form id="upload_form" enctype="multipart/form-data" method="POST" action="upload.php">
<div>
<div><label for="image_file">Please select image file</label></div>
<div><input type="file" name="image_file" id="image_file" onchange="fileSelected()" /></div>
</div>
<div>
<input type="button" name="image1" id="image1" value="Upload" onclick="startUploading()"/>
</div>
</form>
</body>
</html>

How do you read a local file on your PC and update it constantly in javascript?

So, I've made a java program that runs through a list of IPs, pings them, and updates a file on the devices status. I want to know how to open the file into a webpage and update it, so a user can open the webpage and just see a list of data from the file, they don't have to select the file or refresh the page.
Is this feasible to do with javascript/html?
This is the code I'm working with so far:
<html>
<head>
<title>Import Data</title>
<script>
var openFile = function() {
var input = event.target;
var reader = new FileReader();
reader.onload = function() {
var text = reader.result;
var node = document.getElementById('output');
node.innerText = text;
console.log(reader.result.substring(0,200));
};
reader.readAsText(input.files[0]);
setTimeout(openFile(),1000);
};
</script>
</head>
<body>
<input type='file' accept='text/plain' onchange='openFile()'><br>
<div id='output'>
</body>
</html>
But I can't seem to hunt down where to hardcode the path to the file in. When I use this manual selection method, it'll update once, whether the file increases in elements or decreases.
EDIT:
I've narrowed it down to where the file needs to be uploaded:
<html>
<head>
<title></title>
<script>
function uploadFile() {
var reader = new FileReader();
reader.onload = function(event) {
var contents = event.target.result;
console.log("File contents: " + contents);
};
reader.onerror = function(event) {
console.error("File could not be read! Code: " + event.target.error.code);
};
var fileInputElement = document.getElementById("FileName");
reader.readAsText(fileInputElement.files[0]);
console.log(fileInputElement.files[0]);
}
</script>
</head>
<body>
<input type='file' accept='text/plain' value='RESULTS.txt' id='FileName' onchange='uploadFile()' style="display:none;">
</body>
</html>
If I try to type just a file path in a string, it complains it's not type 'blob'. When I do this, it requires the user to enter a file name, but obviously it can't be seen. How can I make that 'file' variable a static variable so it always opens a that file without prompting the user?
Doing some more research, it's security reasons as to why you can't access a file from the local computer.
So, in lieu of all that, I made some code that will constantly load the selected file so you can see whenever it changes:
<html>
<head>
<title>Import Data</title>
<script>
var input;
var openFile = function() {
var reader = new FileReader(event);
reader.onload = function() {
var text = reader.result;
var node = document.getElementById('output');
node.innerText = text;
console.log(reader.result.substring(0,200));
};
reader.readAsText(input.files[0]);
setTimeout(openFile,1000);
};
</script>
</head>
<body>
<input type='file' accept='text/plain' onchange='input = event.target; openFile(event);'><br>
<div id='output'>
</body>
</html>

HTML5 Reading File

I am trying to develop an application where it allows the user to choose a file and then read it and display the text on the screen.
My code can be found here: http://jsfiddle.net/5sy076n5/1/.
<html>
<head>
<title>FileReader Example</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
function testRead() {
var fileSelector = document.createElement('input');
fileSelector.setAttribute('type', 'file');
fileSelector.click();
}
</script>
</head>
<body>
<h1>Example</h1>
<p>Read <a onClick="testRead();">File</a></p>
</body>
</html>
You may notice that I don't have an input tag inside the body. This is because I want the user to click on the tag rather than the text.
My problem is what I am suppose to do after fileSector.click();? How can I get what file was chosen?
You have already created the input element on runtime and you have the reference of it fileSelector
You can simply use this variable to FileReader API
function testRead() {
var fileSelector = document.createElement('input');
fileSelector.setAttribute('type', 'file');
fileSelector.click();
fileSelector.addEventListener('change', function () {
var file = fileSelector.files[0];
var reader = new FileReader();
reader.onload = function (e) {
var text = reader.result;
console.log(text); // Select *.txt file and see console
}
reader.readAsText(file);
});
}
DEMO

Categories

Resources