how to load JSON file using popup into variable?

Question

So, I have created a popup here to load an external JSON file from the system. I want to store that JSON file into one variable in the javascript file. how to achieve this using jquery or javascript?

/* Style this however you like */
#input-file-replacer {
  padding: 3px 5px;
  border: 1px solid #ccc;
  border-radius: 3px;
  background: #ddd;
  color: #333;
  cursor: pointer;
}

<label>
  <input type="file" name="input-name" style="display: none;" />
  <span id="input-file-replacer">Select file</span>
</label>

Note that, despite the title of the duplicate, nothing is uploaded. It reads the data from the `files` collection of the input using a `FileReader`, exactly as you need to — Rory McCrossan, May 04 '20 at 12:24

score 1 · Accepted Answer · answered May 04 '20 at 12:30

1

You need to add a onchange function. Then access the files object inside the function

function uploadFile() {
  let x = document.getElementById("file");
  console.log(x.files)
}

#input-file-replacer {
  padding: 3px 5px;
  border: 1px solid #ccc;
  border-radius: 3px;
  background: #ddd;
  color: #333;
  cursor: pointer;
}

<label>
  <input id ='file' type="file" name="input-name" style="display: none;" onchange="uploadFile()" />
  <span id="input-file-replacer">Select file</span>
</label>

answered May 04 '20 at 12:30

brk

48,835
10
56
78

perfect! accepting your answer :) – Shree Batale May 04 '20 at 12:34
@ShreeBatale happy to help. Do necessary validation like checking if files exist in x – brk May 04 '20 at 12:36
I have one JSON file I want to store that JSON file content in x variable possible? – Shree Batale May 04 '20 at 12:42
You may need `new FormData()` – brk May 04 '20 at 12:47
could you please add that in your code? – Shree Batale May 04 '20 at 12:48
actually I don't know how to do it! – Shree Batale May 04 '20 at 12:55
1

@ShreeBatale you can check this https://www.html5rocks.com/en/tutorials/file/dndfiles/ – brk May 04 '20 at 12:58

how to load JSON file using popup into variable?

1 Answers1