0

Is it possible to use javascript File API to read a file object of unknown id?

I use a custom file upload form in which the code doesn't have an input element. It uses plupload.js API and I can't determine how to access to the contents of file object.

For example if the code had something like the line 1, I could access the contents of file object using the code of line 2

  1. input type="file" id="data"
  2. var finput = document.getElementById("data"); var f = finput.files[0];

I tried something like document.files[0] but it doesn't work. Do you know something similar?

GitaarLAB
  • 14,536
  • 11
  • 60
  • 80
redline
  • 3
  • 1
  • Finaly i found a solution here http://stackoverflow.com/questions/24366312/plupload-get-uploader-object-v2-1-2-for-file-reader – redline Dec 06 '14 at 11:16

1 Answers1

0

Instead of document.files[0], try document.querySelectorAll('input[type="file"]')[0].

function demo(){
  var inpts=document.querySelectorAll('input[type="file"]');
  alert(inpts[0].className);
}
<input type="file" class="file_input_a"><br>
<input type="file" class="file_input_b"><br>
<input type="file" class="file_input_b"><br>
<button onclick="demo()">Demo</button>

The above example echo's the classname of file-input 0 (to simply show we have a reference to it).
From here on you want to grab (for example) first file (from the first found input-element): 

var f = inpts[0].files[0];

PS: there is a lot of good related info in my answer linked here.

Community
  • 1
  • 1
GitaarLAB
  • 14,536
  • 11
  • 60
  • 80
  • Nice answer! but it doesn't work for my purpose. For example it alert me a blank line. I should look into the plupload.js API and search how to access the file objects – redline Dec 06 '14 at 07:17
  • *what* alerts you a blank line? What browser are you using? On my pc it alerts 'file_input_a'. – GitaarLAB Dec 06 '14 at 13:34
  • this alert(inpts[0].className). I am using Firefox. Basically i believe that alert a blank line because plupload API doesn't create an input element. But general, your code solves my general question. Now in my problem i found a solution as i have written in comment of my first post. – redline Dec 06 '14 at 13:44
  • well, note.. I added a class on the input element in HTML code, just to quickly *show* we had a hold of the correct element (so one wouldn't need to select a file etc). Now, if the input-element created by plupload does not have a class set.. then the line is going to be blank. Actually I believe alert would have returned 'undefined' (or triggered an error if there was no `inpts[0]` to call 'className' on) if it had *not* gotten hold of an element.. Thus I think the reason `alert(inpts[0].className)` gave you a blank line is that it actually worked: the string for class was `''` (empty).. – GitaarLAB Dec 06 '14 at 13:53
  • aha you are right , i agree that the blank line means that the class is empty. I am wondering how from that point someone could use FILE API to read the contents. – redline Dec 06 '14 at 20:58
  • I'd recommend the [synchronous file reader API](http://www.html5rocks.com/en/tutorials/file/filesystem-sync/) first. Although the synchronous API can only be used within a Web Worker context (whereas the [asynchronous API](http://www.html5rocks.com/en/tutorials/file/dndfiles/) can be used in and out of a Worker) it is vastly more simple to start with. Once you have got that working, then port to the asynchronous (if you still want/need that). Note however, that because of the current lack of fixed specification for HTML5, this is currently challenging to support cross-browser. – GitaarLAB Dec 06 '14 at 22:37