0

I am trying to build a page that would just do three things:

  • Make the user choose a file (a .json file to be specific)
  • Simply Read the file's contents and store them in a variable. (do not store anywhere)
  • Process the contents' variable further using Javascript. (I'll be using JS to convert the file into XML. I have the conversion code ready & working, it just needs the json string, which would be fetched from the file contents' variable. After converting to XML, I'll export the XML file so the user would download it, and import it in my MS Excel Sheet, which has XML mappings to populate data. [I am yet to figure the export option])

So far I have acquired some code-snippets to use in some parts of my code:

To access the php variable (containing contents) in JS :

<?php
$somevar = 'Hi Thunkable!';
?>

<script>
var msg = <?php echo $somevar; ?>;
.... process the variable further
</script>

Input-type: file form for the upload button as I have the JS code in the current file, how do I make the form NOT send data to another php file?

<form enctype="multipart/form-data" action="__URL__" method="POST">
    Send this file: <input name="userfile" type="file" />
    <input type="submit" value="Send File" />
</form>

The only part remains for me is as I said above, instead of sending the uploaded file data to another PHP file, store it in a variable. I found out that $txt = file_get_contents($_FILES['userfile']['tmp_name']); could get the contents from a file.

Summing up, I am just trying to keep all my code in one HTML file, which includes uploading the file, reading it's contents and storing in a var., and processing the contents further. Is something like this possible to do? I am a beginner in PHP/HTML/JS so I couldn't think of anything to search beforehand regarding my question...

Sonal
  • 137
  • 2
  • 13
  • HTML is a static resource language. You need php ( or other server side scripting language) to read the uploaded file. Overall what you are asking is a bit confusing. Studying some tutorials on how html forms and file uploads work would probably be a good idea – charlietfl Nov 25 '21 at 20:32
  • It might also help if you provided a more detailed explanation of your use case and what exactly it is you want to do with the json in the file. If you only want to use it in the page itself while that page exists then that is a completely different process – charlietfl Nov 25 '21 at 20:35
  • Okay, but do I need multiple files to just process contents of a file? HTML at start to select the file, then it'd go to PHP to get contents, and then to another HTML for further processes? Can we do something so only 1 HTML file does the whole job? Thanks! – Sonal Nov 25 '21 at 20:36
  • *"to another HTML for further processes"* really doesn't make sense. Move up a level and explain what the higher level use case actually is here – charlietfl Nov 25 '21 at 20:37
  • Hi @charlietfl - Just edited my original post and added details of what I plan to do with the JSON in javascript. Kindly check and guide - Thanks! – Sonal Nov 25 '21 at 20:39
  • Ok but that is still lacking in detail as far as what the xml is for and how it will get used. This will take more than a one sentence explanation to make the full expected work flow clear and concise. Right off the bat I am wondering why you even need xml – charlietfl Nov 25 '21 at 20:40
  • @charlietfl - Now I have added my whole purpose of JSON-XML in the updated original post. Kindly check – Sonal Nov 25 '21 at 20:43
  • If I was doing this I would just convert the JSON to CSV which can be opened in excel. This can all be done right in browser. How did you come up with needing xml? Also what is the importance of the textarea display? Still really not enough known about this whole process as there are numerous ways to approach it depending on conditions and specifics, need for storing data etc – charlietfl Nov 25 '21 at 20:49

1 Answers1

2

You can use object FileReader for read files from the input type file

here is the example:

(function(){
    
    function onChange(event) {
        var reader = new FileReader();
        reader.onload = (event)=>{
          alert(event.target.result);
          let data = JSON.parse(event.target.result);
          //process the data here
          console.log(data);
        }
        reader.readAsText(event.target.files[0]);
    }
 
    document.getElementById('file').addEventListener('change', onChange);

}());
<input id="file" type="file" accept="application/JSON" />
Hery Kurniawan
  • 344
  • 2
  • 8