- Joined
- Sep 8, 2022
- Messages
- 1
- Reaction score
- 0
Hi All
New to these forums and not a Javascript expert, in fact I only do hobbyist coding for my hobbies namely electronics, IOT and DIY.
I wonder if some kind soul could please help me.
I've been battling for two long days now trying to get a local image uploaded onto a page in my broswer locally.
The Javascript portion works in jsfiddle but not in my browser and I'd like to know why and how to fix the issue please.
The 'little' code project I've just started needs to upload a text file, parse it somehow (Some fancy regex filtering or sorting - (I used jquery for something similar a few years back but I noticed the forum id 'dead' :-() , convert it to CSV and perhaps a dynamic table and finally be able to save and/.or print it.
The code forms part of grabbing files from an old dos program I used to use for cutting wood.
Anyways aside from all the above please see my attached code.
The help I need is to to get both upload types working and displayed on the same page
The text file uploaded and display is working.
the problem is the IMAGE UPLOAD which is not working.
Thanking you in advance.
Den
PS .. apologies .. out of desperation I have both text and image sections in two <script> tags
New to these forums and not a Javascript expert, in fact I only do hobbyist coding for my hobbies namely electronics, IOT and DIY.
I wonder if some kind soul could please help me.
I've been battling for two long days now trying to get a local image uploaded onto a page in my broswer locally.
The Javascript portion works in jsfiddle but not in my browser and I'd like to know why and how to fix the issue please.
The 'little' code project I've just started needs to upload a text file, parse it somehow (Some fancy regex filtering or sorting - (I used jquery for something similar a few years back but I noticed the forum id 'dead' :-() , convert it to CSV and perhaps a dynamic table and finally be able to save and/.or print it.
The code forms part of grabbing files from an old dos program I used to use for cutting wood.
Anyways aside from all the above please see my attached code.
The help I need is to to get both upload types working and displayed on the same page
The text file uploaded and display is working.
the problem is the IMAGE UPLOAD which is not working.
Thanking you in advance.
Den
PS .. apologies .. out of desperation I have both text and image sections in two <script> tags
JavaScript:
<!DOCTYPE html>
<html>
<head>
<title>Read Text File</title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
</head>
<body>
<input type="file" name="inputfile"
id="inputfile">
<br>
<pre id="output"></pre>
<p id="output"></p>
<input type = 'file' onchange = 'renderFile()' >
<br>
<br>
<img src = "" alt='rendered image' id='rendered-image' >
<script type="text/javascript">
document.getElementById('inputfile')
.addEventListener('change', function() {
var fr=new FileReader();
fr.onload=function(){
document.getElementById('output')
.textContent=fr.result;
}
fr.readAsText(this.files[0]);
}) //last tag of function
</script>
<script type="text/javascript">
const renderFile = () => {
const render = document.querySelector('img')
const file = document.querySelector('input[type=file]').files[0]
const reader = new FileReader();
reader.addEventListener('load' , ()=> {
render.src = reader.result;
}, false)
if(file){
reader.readAsDataURL(file);
}
}
</script>
</body>
</html>