Grid with File Download Link?

[shaoen01]

Hi,

I am currently using grid with row editor plugin to help update rows to my MySQL database. I would like to add this new feature of uploading files to each row. Has anyone done this before? I am thinking maybe adding a button to open a new window to upload attachments like how we normally do on forums, etc?

Also, how do i make the file appear as a link on my grid so that when someone clicks on that link, the file prompts you a download window?

Any suggestions will be great!

[fschaeffer]

Define a renderer in your column model, and then build the link in that render-function.

E.g.

Ext.define('BII.view.reports.DocumentGrid', {
  extend: 'Ext.grid.Panel',
  alias: 'widget.documentGrid',
  
  initComponent: function () {
    var conf = {
      title: 'Files',
      store: 'Documents',
      forceFit: true
    };
    Ext.apply(this, conf);
    this.columns = this.buildColumns();
    this.callParent(arguments);    
  },
  
  buildColumns: function () {
    return [
      {
        header: 'Type',
        dataIndex: 'extension',
        renderer: this.renderExtension,
        width: 20
      }, 
      {
        header: 'File',
        dataIndex: 'filename',
        flex: 1
      }, 
      {
        header: 'last Change',
        dataIndex: 'lastChange',
        width: 120
      }, 
      {
        header: 'Size',
        dataIndex: 'filesize',
        align: 'right',
        renderer: Ext.util.Format.fileSize,
        width: 100
      }
    ];
  },
  
  renderExtension: function (val, obj, record) {
    return '<a href="data/mod/berichte/getDocument?data=' + record.data.fullpath + '" target="_blank" /><img src="/resources/icons/fatcow/16/page_white_' + val + '.png" /></a>';
  }
});

[shaoen01]

Thanks for the code. Does this work even if i store the file in my database as blob data type?

[fschaeffer]

Hi, it is all a matter of your backend.

You can link to a URL of your choice, so if you link to a URL which extracts the file from DB and then sends the data via Header information you will be able to get your file from DB ....

In my example I do exactly the same (I'm reading my file from disk and then send the data via PHP-script to the browser).

PS: please mark this thread as answered

[shaoen01]

Hi,

Yes, you are right! One last thing, is there any file upload tool i can use? So i can put it as part of my form to upload files to my database before clicking on save button to do that? Thanks

[fschaeffer]

What do you mean by tool? There is an example in the examples folder for a file upload via ExtJS (including nice styling of form element) which opens the regular file upload dialogue.

But the file will only be transferred AFTER you click the upload button.

There might be flash uploader which will upload your files in a more convenient way but I don't know of any for ExtJS.

[shaoen01]

I might have cause some confusion. By tool i meant plugin like the roweditor, etc. But i will take a look at the example, i didn't notice it was there until you mentioned it. Thanks again.