onChange method on input type file is never called

Ask the community
,
1

Can someone please guide me on my the onChange method on my html input file never called. Below is my code.

HTML code :

2

This is not Velo code. Where did you put this code?

3

Try this one… (one of my own) :wink:

 <head> 
    <title>File upload event</title> 
  </head> 
  <body id="body" style = "text-align:center;"> 
    <input type="file", name="fileSelector1", id="fileSelector", onchange="xxx()", multiple><br>     
    <script type="text/javascript"> 
    	var output=[]
      document.getElementById("fileSelector").onchange=async function xxx(ev){
        var files=ev.target.files
        var reader = new FileReader();
				var dataLength = files.length
       
        for(var i=0;i<dataLength;i++){
          output.push(
            {
              "fileName":		files[i].name,
              "fileType":		files[i].type,
              "fileType2":	files[i].type2,
              "fileSize":		files[i].size,
              "fileDate":		files[i].lastModifiedDate,
              "fileWidth": 	files[i].width,
              "fileHeight":	files[i].height,
              "fileIndex": 	files.length-i,
              "fileStream": files[i].src,
              "fileStream": files[i].src,
              //"language":		files[i].language,
              //"timeStamp":	files[i].timeStamp,
              //"platform":		files[i].platform
            }
          )
          readImageFile(ev.target.files[i], i, dataLength);
          
        }        
      }
            
      function readImageFile(file, index, dataLength) {
        var reader = new FileReader();
        reader.onload = function(e) {
            var img = new Image();      
            img.src = e.target.result;

            img.onload = function () {
                output[index].fileWidth=this.width
                output[index].fileHeight=this.height
                output[index].fileStream=this.src
                output[index].fileType2=this.localName            
                //console.log(output[index]) 
                if(index>=dataLength-1){console.log(output)}
            }
        };
        reader.readAsDataURL(file);
      }
      
      

        function GFG_Fun() {
        	var down = document.getElementById('GFG_DOWN'); 
          var img = document.createElement('img');
          img.src = output[index];
          document.getElementById('body').appendChild(img);   
        } 
    </script> 
  </body> 
</html>
4

Thanks @russian-dima as always :).

5

Sorry, i think i mixed it up!

This was for IMAGES! But you need for PDF!
Maybe you can MODIFY it for your own needs!

At least you surely will learn something from it.

Work on it!
I also needed some time to generate it.
maybe 2-3-days of coding and some testings and inspections, you will be able to understand it and also to modify it.

I hope you use JS-FIDDLE ! (Just a TIP ! )

6

You are generating a FILE-SELECTOR ? (BLOB) ?
I am sure J.D. has a better option, he could provide us :wink:

7

I am almost sure, that SK is trying to generate a FILE-SELECTOR, to be able to pick-up his PDF-FILE.

A pure JS-Version (BUFFER), without htl-component would be nicer.

8

Seems to be connected to this post here…
https://community.wix.com/velo/forum/coding-with-velo/how-to-convert-arraybuffer-to-buffer-and-arraybutton-to-uint8-array-in-javascript-please-help?origin=notification

9

yes am using a file selector.

10

Back to your CODE…

<html>
  <head>
    <script type="text/javascript">    
    var openFile = function(event) {
      //console.log (event);
      console.log (event.type);
      console.log (event.timeStamp);
      console.log (event.isTrusted);
      //console.log (event.currentTarget);
      console.log ("Accept: ", event.currentTarget.accept);
      console.log ("Size: ", event.currentTarget.size);
      console.log ("Height: ", event.currentTarget.height);
      console.log ("Width: ", event.currentTarget.width);
      console.log ("Type: ", event.currentTarget.type);
      console.log ("Value: ", event.currentTarget.value);
      console.log ("Length: ", event.currentTarget.length);
      console.log ("ID: ", event.currentTarget.id);
  };
  </script>
</head>
<body>

Now try to push all that found data to your wix-site.

Search for more provided data-options from RESULTS…by activating…

//console.log (event.currentTarget);

Work faster and more comfortable on JS-Fiddle…

2252×723 46.5 KB