clone a image and then rename it using javascript - 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>

Related

How can I output multiple lines of a text file in HTML using JS?

This is only the section of the code that I can't solve. The idea is that I open the text file, which I can do, and then I output each line in the div with the id cont. when I open the text file nothing gets output. I don't know why.
<head>
<title>Read Text File</title>
</head>
<body>
<input type="file" name="file" id="file" />
<br>
<div id ="cont"></div>
<script>
document.getElementById('file').onchange = function()
{
var file = this.files[0];
var reader = new FileReader();
reader.onload = function(progressEvent)
{
var fileContentArray = this.result.split(/\r\n|\n/);
for(var line = 0; line < lines.length-1; line++)
{
document.getElementById("cont").innerHTML = lines[line];
}
}
reader.readAsText(file);
}
</script>
</body>
</html>

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>

How to get image name and size for the uploaded image

I am using this code for making my things workaround. By using the below code I'm trying to get the image name and its the size in bytes/Mbps.
'use strict';
const myImages = [];
function addImage(imageBlob) {
myImages.push(imageBlob);
}
function redrawImages() {
const divForImages = document.getElementById('myImages');
divForImages.innerHTML = '';
myImages.forEach((imageBlob) => {
const img = document.createElement('img');
img.src = URL.createObjectURL(imageBlob);
divForImages.appendChild(img);
});
}
function addImageAndRedraw() {
const fileInput = document.getElementById('fileInput');
if (fileInput.files.length === 1) {
addImage(fileInput.files[0]);
redrawImages();
} else {
alert('No file selected. Select a file and try again.');
}
}
const button = document.getElementById('button');
button.addEventListener('click', addImageAndRedraw);
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>My images</h1>
<input id="fileInput" type="file" accept="image/*" multiple="false" value="Select image">
<input id="button" type="button" value="Add image and redraw">
<hr>
<div id="myImages"></div>
<script src="album.js"></script>
</body>
</html>
I have tried to use img.name but it's deprecated.
How to do it? Any help would be highly appreatiated
imageBlob is not a blob. It's a File, which has a name property. The name doesn't get transferred to the img DOMElement.

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){

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>

Categories

Resources