Image upload not working in browser

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
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>
 
Joined
Mar 14, 2024
Messages
1
Reaction score
0
If you are experiencing any problems with IT solutions for yourself or your business, perhaps you should try using outsourcing services, for example, this company will help you save significantly both in time and money, follow the link https://en.wikipedia.org/wiki/Internet_of_things and find out more information about all the benefits that you will definitely like it.
 
Joined
Nov 23, 2023
Messages
51
Reaction score
2
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
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>
When working locally (without a server), you cannot directly upload files using JavaScript due to security restrictions. The browser cannot access your file system for security reasons.
 

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

Members online

Forum statistics

Threads
473,763
Messages
2,569,560
Members
45,035
Latest member
HoTaKeDai

Latest Threads

Top