Retrieving files from uploader on client-side

Webix JS
1

Hi all,

I’m trying to let users upload a file/files that will then be scanned for data to be used within the local instance. The catch is that I’m trying to do this entirely locally so that the program is entirely self-contained (ie no server involved).

I tried using the view:“uploader” but haven’t been able to figure out how to retrieve the file objects from the uploader view. I’m basically trying to do the examples found here http://www.html5rocks.com/en/tutorials/file/dndfiles/ except within Webix. Is it possible to get files from the Webix uploader without bouncing .send() or ajax.post off of a server?
Thanks.

2

Hi,

onBeforeFileAdd and onAfterFileAdd events takes object with file info as a parameter:

$$("uploader").attachEvent("onAfterFileAdd",function(data){
    var file = data.file;
    // your code 
});
3

I actually tried doing that but couldn’t get it to work. The function wasn’t even being called. I had something like this:

  webix.ready(function(){
     uploadUI = webix.ui({
        container: "webix_uploader",
        
        view:"form", id:"upload_form",
        elements:[
           { view:"uploader", upload:"uploadFxn",
              id:"myUploader", name:"myUploader",
              value:"Add .txt",
              link:"doclist",
              accept:"text/plain",
              autosend:true, multiple:false
           },
           { view:"list", id:"doclist", type:"uploader",
              autoheight:true, borderless:true
           },
        ]
     })
  });
  
  $$("myUploader").attachEvent("onAfterFileAdd",function(data){
     webix.message("hi");
     var file = data.file;

     //code with a FileReader
  });
4

Please move $$(“myUploader”).attachEvent(…) into webix.ready handler (after uploader init)

5

Sorry for the late follow up, but thanks! That mostly solved my problem.

6

I can implement the above and it runs correctly, but the data object from the uploader doesn’t have a file path. How does one read the file from the uploader into a JavaScript text or object?

7

Hi @spongybob1958 ,

Due to the general security reasons, JavaScript has no access to the file system and the real path to the file is not available in the loaded object, unfortunately.
The same behaviour is valid for native <input type="file">, which is used in Webix uploader.
But if you need to read a file or perform any operation on it on the client-side, please use the FileReader API.
As an example, please check the following snippet with image/text preview: https://snippet.webix.com/vhop5uxg