How to get file upload into a datagrid cell

[nervo]

Hello,

I'm looking for a way to get a file upload cell for each row in a editor datagrid. I've tried some solutions :

1) In the renderer :


renderer: function(data){
return '<div id=\"form_div\">'
+ '<form class=\"x-form\" method=\"post\">'
+ '<div class=\"x-form-ct\">'
+ '<div class=\"x-form-item\">'
+ '<div class=\"x-form-element\">'
+ '<input type=\"file\" name=\"contract\" id=\"field_upload_\" autocomplete=\"off\" size=\"20\" class=\"x-form-file x-form-field\" />'
+ '</div>'
+ '</div>'
+ '</div>'
+ '</form>'
+ '</div>';
}

Just copy/pasted html from another form. I can not handle file submission this way, as the renderer can only return html, no way to create form, or fields dynamically, nor add handlers to submit.

2) In the editor:


editor: new Ext.grid.GridEditor(new Ext.form.TextField({
id: 'field_upload',
inputType: 'file',
name: 'contract'
}))

This way seems better, but i receive a "Security error" code: "1000" in firebug. This is - i think - due to the GridEditor object which try to set a value to the file input, which is strictly forbidden, or something like that.

Well, so i decided to write a new inherited class of TextField, called UploadField, with inputType property pre-defined to 'file', and to catch all value related methods, to nullify them. Here it is :



UploadField = function(config){
UploadField.superclass.constructor.call(this, config);
};

Ext.extend(UploadField, Ext.form.TextField,{
inputType: 'file',
processValue : function(value){
return value;
},
validateValue : function(value){
return true;
},
setRawValue : function(v){},
setValue : function(v){}
});

But no success...

I have also think about a way to insert directly a form in a cell..

Do you, men, think i am in the good direction (renderer/editor/form in a cell) ? Do you see another way(s) ?

[jumpo]

I have same issue..

[r2k]

This way seems better, but i receive a "Security error" code: "1000" in firebug. This is - i think - due to the GridEditor object which try to set a value to the file input, which is strictly forbidden, or something like that.



security error: i think that could be a security restriction from Mozilla, i had read sometime ago somewhere (i suppose that was mozdev ... not sure) that exists a javacscript (mozilla-only) instruction to request privilieges to run some code in javascript that could be dangerous ... you can check it in mozdev ...

[vaduros]

Same issue with me. I think we all here need an extension of the editor fields that allows file upload.

I have an application where user can change pictures within an editor grid, so an editor upload field would be the only solution for me.

Any hints from the Ext support team? Is this something that's avialable in 2.0?

[jsakalos]

Sorry guys,

I don't have an easy answer. You may consider creating a dummy form, assigning input to it dynamically (perhaps from renderer) and to create a button to submit the form.

This is just an idea; never tried.

Cheers,

[jumpo]

Currently I use dialog form to do upload for selected row. Just a temporary solution, even u can edit all file field, but upload still an issue for grid.

[dirving]

jsakalos is on the right path... The way I've handled this is to create a hidden iframe containing the form, rendering a "Browse" button in the grid and when clicked, it triggers the real browse buttons click() event (which surprisingly works). At that point you could either auto-submit the form when the user has chosen a file or add another button/link/whatever that triggers the form submission.

[vaduros]

Would you mind sharing some code for educational purposes...;)...

[dirving]

... but only because you asked so nicely ;)

A couple of things before you see the code:

1. It's pretty hacky.. The fact that IE & Safari both let you call the click event handler from another function is something that may disappear in the future

2. This works pretty easily with IE & Safari but if you look at the code you'll see that FF is handled differently. This is because you can't call the click event on a file input element. To get around this, I've added a stylized button that replaces the file input.. The only piece of the code that I haven't included is what will happen when a save button is clicked. For Safari and IE, you just need to submit the forms that are contained in the iframes.. If it's firefox, you just need to walk the grid, find your file elements, and then use cloneNode to move them to an iframe'ed form which you can then submit. (I've attached the browse button that I used for this test code)

3. This isn't (obviously) the full code that I use.. I unfortunately can't give it out since it belongs to the company that I work for.

In any event, I'm open to questions/comments if you guys have no clue about what I just said (and I wouldn't blame you if you didn't.. I tend to ramble)

Enjoy!

[r2k]

See i fthis solves the security problems .....



UniversalFileRead

* window.open of file:// URLs.
* Making the browser upload files from the user's hard drive using <input type="file">.

:-?:-?:-?
http://www.mozilla.org/projects/security/components/signed-scripts.html#privs-list

[venturi]

Hey all,

I was running into this error myself and pulling my hair out trying to fix the issue as uploading images is a key part of the application I'm writing. And googling the error itself from the FF error console brought me to this page: http://blog.deconcept.com/swfobject/forum/discussion/368/security-error-code-1000-nserrordomsecurityerr/

Seems that Firebug itself was causing the problem. As soon as I disabled firebug my "input file" the error went away and the field displays.

edit: update, appears firebug may *not* necessarily be a problem here. I am also a bloomin' . In my effort to be completely thorough I was using setValue on the input file fields - which you just can't do at all, not even in static HTML. In any case, after removing the setValue statements I turned firebug back on and it is working just fine. go figger

[ferr]

See i fthis solves the security problems .....


:-?:-?:-?
http://www.mozilla.org/projects/security/components/signed-scripts.html#privs-list

Seemed like a promising solution, but when adding that to my code base I get a new error:

uncaught exception: A script from "http://localhost:007" was denied UniversalFileRead privileges.

[jsakalos]

One of my friends used signed scripts for firefox to access some local files and ports from javascript and the whole signed scripts solutions are quite complex - for sure beyond the scope of this forum.

Signed scripts are quite difficult to create, you need to distribute certificates to clients if you want them to run there and they work only in Firefox/Seamonkey.

If you really want to go this direction pm me I'll contact you directly with that friend of mine.