Image upload not working in browser

Sep 8, 2022
Reaction score
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.


PS .. apologies .. out of desperation I have both text and image sections in two <script> tags
<!DOCTYPE html>
    <title>Read Text File</title>
  <script src=""></script>
<script src=""></script>

    <input type="file" name="inputfile"

    <pre id="output"></pre>
<p id="output"></p>

<input type = 'file' onchange = 'renderFile()' >
<img src = "" alt='rendered image' id='rendered-image'  >

    <script type="text/javascript">
            .addEventListener('change', function() {
            var fr=new FileReader();

        }) //last tag of function

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





Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question