fileuloadfield, upload file to store without server side

Hi, friends!

I have a form where one of fields is FileUploadField and GridPanel with records.

The task is to use the file uploading field to upload a file to the record in store using only javascript, without upload to server side. After multiple changes (uploads any files to store records), the modified records will be sent to server side, where files will be recorded to database table on blob formats.

In my opinion, the file may be converting to base64 format and stored in grid store. How can i do this? I navnt any workable examples.

May be you have any variations to resolve my task?

@fabricio.murta pls help

Tnx.

Hello @e1ement, and welcome to Ext.NET forums!

I am afraid we don't have any cooked example on the exact task you want, and not that native feature from Ext.NET or its underlying framework (Ext JS).

Yet, I believe you can easily accomplish this task with the FileUploadField component. You can either bind a "send to grid" button to serve as a "upload" button (to assign the file to the grid), or bind the field's change event.

Then just access the field's internal input type=file HTML element and extract the file contents and add the file to the grid. MDN has good documentation on the file input element (and File API) you should understand in order to attain your objective.

The "supported" way to get the internal file input field from the Ext.NET component would be the extractFileInput() method. The drawback of this approach would be the input field is reset once you call this method (as for emulating a file upload success -- which may just be the desired behavior in your case).

If you just want to hit the file data while not touching the field, you can get the internal file input field (beware, dragons ahead!) via the undocumented, unsupported (may break at any time between upgrades without any warning) fileInputEl.dom reference.

As an example of getting the field from actual code, in the example Form > FileUploadField > Basic, you can get the input field via either:

App.BasicField.fileInputEl.dom (unsupported)

App.BasicField.extractFileInput() (supported, resets the field on call)

Now, as far converting the file contents, it is beyond the scope of Ext.NET. The documentation provided above should help you with that (MDN docs).

You can probably store the file as-is (binary and all) in a field as long as you don't specify an explicit type for the store's model field. Which would imply no conversion is made. You shouldn't though try to show this field contents in a grid cell though. To submit the grid, you may need to ensure it is stringified. I believe it would be.

Well, hope this helps!

@fabricio.murta

it's working, thx

i stored encoded file in store record

Glad it helped, thanks for the feedback!