How to UPLOAD a file into my JS application?

Question

I am working on extjs 4.2 application. Trying to create a menu toolbar where I can add and delete files. For example:

When I press Open, I want to see the file browser window. And when I finish choosing the file and click "open", I will see something like this:

I know that I need to use onItemClick() function to open the browser. But I have no idea how to call that window. Also how can you program so only certain file extensions can be chosen.

I am guessing that once you press "open" on the file browser window, the file tree in the left panel will dynamically add that file. But have no idea how can I connect "open" to my tree.

Just to clarify - this is going to be user based app, it is not going to be a webapp. This will be opened in user's browser and that is it. No need to get some info from server or send something to client.

EDIT: I have been able to solve the part where you click on Open the file browser dialog pops up. Then when I select a file and press "open", it displays a message box with file's name.
Here is the code for that part:

    var item = Ext.create('Ext.form.field.File', {
            buttonOnly: true,
            buttonText: 'Open',
            hideLabel: true,
            listeners: {
                'change': function(fb, v){
                     Ext.Msg.alert('Status', v);  
                }
            }
    });

    var mainmenu = Ext.create('Ext.menu.Menu', {
        width: 200,
        margin: '0 0 10 0',
        items: [item]
    });

Now the problem is that I need to get the FULL PATH of the file. This message only shows file's name. Any help?

Answer 1

Using files on the web can be tricky, so you're going to have to be patient, diligent, and be prepared for some self-learning.

A. If you want to be compatible with all browsers, you need to upload the file to a server, and have the server return info about the file. Or you can try Sencha Desktop Packager, flash, or signed Java Applets.

If you are okay with only modern browsers, you will need to read and learn the HTML5 File API. Here's a start:

https://developer.mozilla.org/en-US/docs/Web/API/FileReader?redirectlocale=en-US&redirectslug=DOM%2FFileReader

B. Start with a filefield button for now, and add it as a menuitem later, just to keep things simple. You will want to listen to the filefield's change event if you want to read the file.

C. To restrict file types (only modern browsers allow this), you'll need to do something like this (audio/* is just an example):

{
  xtype:'filefield',
  listeners:{
    afterrender:function(cmp){
      cmp.fileInputEl.set({
        accept:'audio/*' 
      });
    }
  }
}

D. After you get the file, you will want to add it's info to the tree's TreeStore.