[CLOSED] Add field to Multiupload Grid

1 Attachment(s)

ok thanks! Got it! Sorry for the confusion.
Another question regarding MultiUpload is how I can add another field in the grid where its values come from a ComboBox.

Attachment 24811

ComboBox code:

Code:

<ext:ComboBox ID="ComboBox12" runat="server" Editable="false" DisplayField="type" QueryMode="Local" ForceSelection="true" TriggerAction="All" Text="Type" EmptyText="Select a type..."> <Store> <ext:Store ID="DDTypesStore" runat="server"> <Model> <ext:Model ID="Model3" runat="server"> <Fields> <ext:ModelField Name="type" /> </Fields> </ext:Model> </Model> </ext:Store> </Store> <DirectEvents> <Change OnEvent="ComboBox_Change"> <ExtraParams> <ext:Parameter Name="type" Value="newValue" Mode="Raw" /> </ExtraParams> </Change> </DirectEvents> <ListConfig> <ItemTpl ID="ItemTpl1" runat="server"> <Html> <div class="list-item"> {type} </div> </Html> </ItemTpl> </ListConfig> </ext:ComboBox>

Hello @atroul!

As we are touching a new subject (despite under the same component), I deliberately moved your post to a new thread. Let's keep different subjects in different threads for future reference, right? Hope you don't mind!

About adding the other field, you can just add it to the model and column to fit the field, but I don't really get what you mean with

Quote:

add another field where its values come from a ComboBox

You want to change that combo box and its value show in the whole grid? I don't really see much point on that.

By the sample code+screenshot you provided, seems what you want is to specify the file type in the combo box and allow only that type of file to be selected? That would be a problem, say, you add files of a given type, then switch, then add other file types, then try to upload all files.

The grid in the example is just an ordinary grid panel, and it uses multiupload's events to fill the grid's records as the files are added.

1 Attachment(s)

Hello Fabricio and thanks for the fast replies.
What I want is:
When you upload some files you use the combobox to select their type (type1, type2, ..., typeN).
I want to put that value in the grid also. As you can see in the screenshot all the fields are ok except the type field.

Attachment 24813

I tried to modify this function with no luck:

Code:

var fileSelected = function (item, file) { this.up('grid').store.add({ id: file.id, name: file.name, type: file.type, //<-------------------- size: file.size, status: 'Pending', progress: 0 }); };

Hello @atroul!

In the same example we are using as base for this thread, you can see how they use the updateRecord() function to set up the contents of the grid as the upload status changes.

You don't need the ExtraParams on your combobox event, cause it passes the selected value once you select something on the combobox by default.

You don't need the event to be server-side (direct event) as you probably already have the information you need in the combo box (the description string and ID of the file type), so you should be using a <Listener> block instead of a <DirectEvent> one in your combo box.

Then, as I suppose you added the corresponding field to the model of the grid (besides the column you show in your screenshot), all you have to do is call updateRecord() for each grid row with the field name and the value you just chose in the combobox. All that in the change event handler of the combo box.

I tried to highlight the important keywords to make it easier to follow. If this does not help, share the full test case (you probably modifying it from the example linked above, right? that should be simple enough), so we can talk about what to change in which lines or just reply the same test case with the fixes.

Hope to hear back from you soon!

Hello Fabricio,

I want to set up the Type fields in the grid when FileSelected fires. So someone first selects the type that wants to upload, then he
will select the files for upload and then he will see the files' list and their info in the grid and then he will click upload.
I want to keep the <DirectEvent> because I need that value in CodeBehind because I am storing the name and the type of the file
in a database and I populate an another grid not showing in the photo.
The code as you thought is exactly the same with this example I just removed some buttons and added the ComboBox which I posted in first post.

Thank you very much again

Hello @atroul!

The code below was modified from the example you pointed and I am confident that it contains all aspects you would need to implement the grid the way you need:

Code:

<%@ Page Language="C#" %> <script runat="server"> protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack && !X.IsAjaxRequest) { fileTypeCBStore.DataSource = new object[] { new { id = 1, desc = "All files", ext = "*" }, new { id = 2, desc = "Executables", ext = "exe" }, new { id = 3, desc = "Text", ext = "txt" }, new { id = 4, desc = "Spreadsheet", ext = "xls" } }; fileTypeCBStore.DataBind(); fileTypeCB.Select(0); } } protected void MultiUpload1_FileUpload(object sender, FileUploadEventArgs e) { X.Msg.Notify("File is uploaded", "Name: " + e.FileName).Show(); } /// <summary> /// Handles the file upload when successfully finished (and handled by the /// MultiUpload1_FileUpload() above). /// </summary> /// <param name="sender"></param> /// <param name="e">Event container with extra parameters transmitted.</param> protected void HandleUploadSuccess(object sender, DirectEventArgs e) { string fileName, fileType; #region Handle exceptions try { fileName = e.ExtraParams.GetParameter("filename").Value; } catch (Exception ex) { throw new Exception("The 'filename' parameter was not specified."); } try { fileType = e.ExtraParams.GetParameter("filetype").Value; } catch (Exception ex) { throw new Exception("The 'filetype' parameter was not specified."); } #endregion Handle exceptions X.Msg.Alert("upload complete", "the upload of the '" + fileType + "' file '" + fileName + "' has completed successfully.").Show(); } public object[] SupportedFileTypes = new object[] { new { id = 1, desc = "All files", ext = "*" }, new { id = 2, desc = "Executables", ext = "exe" }, new { id = 3, desc = "Text", ext = "txt" }, new { id = 4, desc = "Spreadsheet", ext = "xls" } }; </script> <!DOCTYPE html> <html> <head runat="server"> <title>Grid MultiUpload - Ext.NET Examples</title> <link href="/resources/css/examples.css" rel="stylesheet" /> <script> var loadFailed = function () { alert("Something went wrong while loading SWFUpload. If this were a real application we'd clean up and then give you an alternative"); }; var statusIconRenderer = function (value) { switch (value) { default: return value; case 'Pending': return '<img src="' + Ext.net.ResourceMgr.getIconUrl("Hourglass") + '" width=16 height=16>'; case 'Sending': return '<div src="x-loading-indicator" width=16 height=16>'; case 'Error': return '<img src="' + Ext.net.ResourceMgr.getIconUrl("Decline") + '" width=16 height=16>'; case 'Cancelled': case 'Aborted': return '<img src="' + Ext.net.ResourceMgr.getIconUrl("Decline") + '" width=16 height=16>'; case 'Uploaded': return '<img src="' + Ext.net.ResourceMgr.getIconUrl("Tick") + '" width=16 height=16>'; } }; var updateRecord = function (id, field, value) { var rec = App.UploadGrid.store.getById(id); rec.set(field, value); rec.commit(); }; var abortUpload = function (btn) { var selModel = btn.up('grid').getSelectionModel(), records; if (!selModel.hasSelection()) { Ext.Msg.alert('Error', 'Please select an upload to cancel'); return true; } records = selModel.getSelection(); App.MultiUpload1.abortUpload(records[0].getId()); }; var removeUpload = function (btn) { var selModel = btn.up('grid').getSelectionModel(), records; if (!selModel.hasSelection()) { Ext.Msg.alert('Error', 'Please select an upload to remove'); return true; } records = selModel.getSelection(); App.MultiUpload1.removeUpload(records[0].getId()); }; var fileSelected = function (item, file) { // Example of cancelling a file if (file.name == 'image.jpg') { Ext.Msg.alert('Error', 'You cannot upload the file named "image.jpg"'); return false; } this.up('grid').store.add({ id: file.id, name: file.name, filetype: App.fileTypeCB.getSelectedRecord().data.desc, size: file.size, status: 'Pending', progress: 0 }); }; var uploadError = function (item, file, errorCode, message) { updateRecord(file.id, 'progress', 0); updateRecord(file.id, 'status', 'Error'); switch (errorCode) { case SWFUpload.UPLOAD_ERROR.HTTP_ERROR: alert("Error Code: HTTP Error, File name: " + file.name + ", Message: " + message); break; case SWFUpload.UPLOAD_ERROR.UPLOAD_FAILED: alert("Error Code: Upload Failed, File name: " + file.name + ", File size: " + file.size + ", Message: " + message); break; case SWFUpload.UPLOAD_ERROR.IO_ERROR: alert("Error Code: IO Error, File name: " + file.name + ", Message: " + message); break; case SWFUpload.UPLOAD_ERROR.SECURITY_ERROR: alert("Error Code: Security Error, File name: " + file.name + ", Message: " + message); break; case SWFUpload.UPLOAD_ERROR.UPLOAD_LIMIT_EXCEEDED: alert("Error Code: Upload Limit Exceeded, File name: " + file.name + ", File size: " + file.size + ", Message: " + message); break; case SWFUpload.UPLOAD_ERROR.FILE_VALIDATION_FAILED: alert("Error Code: File Validation Failed, File name: " + file.name + ", File size: " + file.size + ", Message: " + message); break; case SWFUpload.UPLOAD_ERROR.FILE_CANCELLED: updateRecord(file.id, 'status', 'Cancelled'); break; case SWFUpload.UPLOAD_ERROR.UPLOAD_STOPPED: updateRecord(file.id, 'status', 'Stopped'); break; default: updateRecord(file.id, 'status', "Unhandled Error: " + errorCode); alert("Error Code: " + errorCode + ", File name: " + file.name + ", File size: " + file.size + ", Message: " + message); break; } }; var fileSelectionError = function (item, file, errorCode, message) { if (errorCode === SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED) { alert("You have attempted to queue too many files.\n" + (message === 0 ? "You have reached the upload limit." : "You may select " + (message > 1 ? "up to " + message + " files." : "one file."))); return; } switch (errorCode) { case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT: alert("Error Code: File too big, File name: " + file.name + ", File size: " + file.size + ", Message: " + message); break; case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE: alert("Error Code: Zero byte file, File name: " + file.name + ", File size: " + file.size + ", Message: " + message); break; case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE: alert("Error Code: Invalid File Type, File name: " + file.name + ", File size: " + file.size + ", Message: " + message); break; default: alert("Error Code: " + errorCode + ", File name: " + file.name + ", File size: " + file.size + ", Message: " + message); break; } }; // Handle selecting entries in the file type combo box. var fileTypeSelectHandler = function (item, records) { var ext = records[0].data.ext, desc = records[0].data.desc; App.MultiUpload1.fileTypes = "*." + ext; App.MultiUpload1.multiUpload.setFileTypes("*." + ext, desc + " (*." + ext + ")"); } // Given the queued file handle, get its ID and from this, fetch the extension description // bound to the file record entry in the grid. var getCurrentFileTypeDesc = function(file) { var grid = App.UploadGrid, retVal = null; return App.UploadGrid.store.getById(file.id).data.filetype; } </script> </head> <body> <form runat="server"> <ext:ResourceManager runat="server" ScriptMode="Debug" SourceFormatting="true" /> <ext:GridPanel ID="UploadGrid" runat="server" Width="920" Height="300" Frame="true"> <Store> <ext:Store runat="server"> <Model> <ext:Model runat="server" IDProperty="id"> <Fields> <ext:ModelField Name="id" /> <ext:ModelField Name="name" /> <ext:ModelField Name="filetype" /> <ext:ModelField Name="size" /> <ext:ModelField Name="status" /> <ext:ModelField Name="progress" /> </Fields> </ext:Model> </Model> </ext:Store> </Store> <ColumnModel> <Columns> <ext:Column runat="server" Text="File Name" DataIndex="name" Width="150" /> <ext:Column runat="server" Text="File Type" DataIndex="filetype" Width="150" /> <ext:Column runat="server" Text="Size" DataIndex="size" Width="60"> <Renderer Format="FileSize" /> </ext:Column> <ext:Column runat="server" Text=" " DataIndex="status" Width="30"> <Renderer Fn="statusIconRenderer" /> </ext:Column> <ext:Column runat="server" Text="Status" DataIndex="status" Width="60" /> <ext:ProgressBarColumn runat="server" Text="Progress" DataIndex="progress" /> </Columns> </ColumnModel> <TopBar> <ext:Toolbar runat="server"> <Items> <ext:MultiUpload ID="MultiUpload1" runat="server" OnFileUpload="MultiUpload1_FileUpload" FileDropAnywhere="true" FileSizeLimit="15 MB" FileTypes="*.*" FileTypesDescription="All Files" FileUploadLimit="100" FileQueueLimit="0"> <Listeners> <SwfUploadLoadFailed Fn="loadFailed" /> <FileSelected Fn="fileSelected" /> <UploadStart Handler="updateRecord(file.id, 'status', 'Sending');" /> <UploadProgress Handler="updateRecord(file.id, 'progress', bytesComplete / bytesTotal);" /> <UploadComplete Handler="updateRecord(file.id, 'progress', 1 );updateRecord(file.id, 'status', 'Uploaded' );" /> <UploadAborted Handler="updateRecord(file.id, 'status', 'Aborted');" /> <UploadRemoved Handler="var store = this.up('grid').store; store.remove(store.getById(file.id));" /> <UploadError Fn="uploadError" /> <FileSelectionError Fn="fileSelectionError" /> </Listeners> <DirectEvents> <UploadSuccess OnEvent="HandleUploadSuccess"> <ExtraParams> <%-- This requires special function binding and parameters' transmission so that the values are resolved at run time. The grid is NOT the same component as the MultiUpload, but an auxiliary component, so data from it must be fetched indirectly. --%> <ext:Parameter Name="filename" Value="Ext.Function.bind(function(file) { return file.name; }, this, [file])" Mode="Raw" /> <ext:Parameter Name="filetype" Value="Ext.Function.bind(getCurrentFileTypeDesc, this, [file])" Mode="Raw" /> </ExtraParams> </UploadSuccess> </DirectEvents> </ext:MultiUpload> <ext:ToolbarSeparator /> <ext:ComboBox runat="server" ID="fileTypeCB" FieldLabel="File Type" DisplayField="desc" ValueField="ext"> <Store> <ext:Store runat="server" ID="fileTypeCBStore"> <Model> <ext:Model runat="server"> <Fields> <ext:ModelField Name="id" /> <ext:ModelField Name="desc" /> <ext:ModelField Name="ext" /> </Fields> </ext:Model> </Model> </ext:Store> </Store> <Listeners> <Select Fn="fileTypeSelectHandler" /> </Listeners> </ext:ComboBox> <ext:Button runat="server" Text="Start Upload" Icon="Tick" Handler="#{MultiUpload1}.startUpload();" /> <ext:Button runat="server" Text="Abort" Icon="Decline" Handler="abortUpload" /> <ext:Button runat="server" Text="Abort All" Icon="Decline" Handler="#{MultiUpload1}.abortAllUploads();" /> <ext:Button runat="server" Text="Remove" Icon="Delete" Handler="removeUpload" /> <ext:Button runat="server" Text="Remove All" Icon="Delete" Handler="#{MultiUpload1}.removeAllUploads();" /> </Items> </ext:Toolbar> </TopBar> </ext:GridPanel> </form> </body> </html>

Hope this helps!

Hello Fabricio,

I tried to fit your example in my code but I wasn't able. I am really novice on ext.
The file type is not depended on the extension but on what the user selects from the dropdown menu.
For example File Type can be "Document", "Photo", "Spreadsheet" etc.
Isn't easier to populate the "Type" grid column from the dropdown in client's side?
Is there a way to do that? So I can keep the <DirectEvent> to pass the FileType in CodeBehind to store it in my DB
and use the selected type in client's side to populate the grid.

Thank you very much

Hello!

The grid is being populated by client-side (fileSelected function, lines 130-135). If you need various extensions for a given type, instead of "*.exe" for example you can use "*.exe; *.com; *.bat" in, maybe, a switch case or ifs in the fileTypeSelectHandler function, which switches multiupload's selected file extensions.

If you don't care about the extension, just remove the fileTypeSelectHandler function (lines 206-209 and 323-325).

The example is also passing the file type then the upload success direct event triggers (line 295 with the help of 214-221).

I hope this helps!

Hello Fabricio,
still not working... here is my code:

Code:

<%@ Page Language="C#" %> <script runat="server"> protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack && !X.IsAjaxRequest) { DDTypesStore.DataSource = new object[] { new { id = 1, type = "type1" }, new { id = 2, type = "type3" }, new { id = 3, type = "type5" }, new { id = 4, type = "type7" } }; DDTypesStore.DataBind(); cmbType.Select(0); } } public int i = 0; protected void DocUpload_FileUpload(object sender, FileUploadEventArgs e) { X.Msg.Notify("File is uploaded", "Name: " + e.FileName).Show(); } /// <summary> /// Handles the file upload when successfully finished (and handled by the /// MultiUpload1_FileUpload() above). /// </summary> /// <param name="sender"></param> /// <param name="e">Event container with extra parameters transmitted.</param> protected void HandleUploadSuccess(object sender, DirectEventArgs e) { string fileName, fileType; #region Handle exceptions try { fileName = e.ExtraParams.GetParameter("filename").Value; } catch (Exception ex) { throw new Exception("The 'filename' parameter was not specified."); } try { fileType = e.ExtraParams.GetParameter("type").Value; } catch (Exception ex) { throw new Exception("The 'filetype' parameter was not specified."); } #endregion Handle exceptions X.Msg.Alert("upload complete", "the upload of the '" + fileType + "' file '" + fileName + "' has completed successfully.").Show(); } protected void ComboBox_Change(object sender, DirectEventArgs e) { typeSelected = e.ExtraParams["type"]; } </script> <!DOCTYPE html> <html> <head runat="server"> <title>Grid MultiUpload - Ext.NET Examples</title> <link href="/resources/css/examples.css" rel="stylesheet" /> <script> var loadFailed = function () { alert("Something went wrong while loading SWFUpload. If this were a real application we'd clean up and then give you an alternative"); }; var statusIconRenderer = function (value) { switch (value) { default: return value; case 'Pending': return '<img src="' + Ext.net.ResourceMgr.getIconUrl("Hourglass") + '" width=16 height=16>'; case 'Sending': return '<div src="x-loading-indicator" width=16 height=16>'; case 'Error': return '<img src="' + Ext.net.ResourceMgr.getIconUrl("Decline") + '" width=16 height=16>'; case 'Cancelled': case 'Aborted': return '<img src="' + Ext.net.ResourceMgr.getIconUrl("Decline") + '" width=16 height=16>'; case 'Uploaded': return '<img src="' + Ext.net.ResourceMgr.getIconUrl("Tick") + '" width=16 height=16>'; } }; var updateRecord = function (id, field, value) { var rec = App.UploadGrid.store.getById(id); rec.set(field, value); rec.commit(); }; var removeUpload = function (btn) { var selModel = btn.up('grid').getSelectionModel(), records; if (!selModel.hasSelection()) { Ext.Msg.alert('Error', 'Please select an upload to remove'); return true; } records = selModel.getSelection(); App.MultiUpload1.removeUpload(records[0].getId()); }; var fileSelected = function (item, file) { // Example of cancelling a file if (file.name == 'image.jpg') { Ext.Msg.alert('Error', 'You cannot upload the file named "image.jpg"'); return false; } this.up('grid').store.add({ id: file.id, name: file.name, type: App.cmbType.getSelectedRecord().data.type, size: file.size, status: 'Pending', progress: 0 }); }; var uploadError = function (item, file, errorCode, message) { updateRecord(file.id, 'progress', 0); updateRecord(file.id, 'status', 'Error'); switch (errorCode) { case SWFUpload.UPLOAD_ERROR.HTTP_ERROR: alert("Error Code: HTTP Error, File name: " + file.name + ", Message: " + message); break; case SWFUpload.UPLOAD_ERROR.UPLOAD_FAILED: alert("Error Code: Upload Failed, File name: " + file.name + ", File size: " + file.size + ", Message: " + message); break; case SWFUpload.UPLOAD_ERROR.IO_ERROR: alert("Error Code: IO Error, File name: " + file.name + ", Message: " + message); break; case SWFUpload.UPLOAD_ERROR.SECURITY_ERROR: alert("Error Code: Security Error, File name: " + file.name + ", Message: " + message); break; case SWFUpload.UPLOAD_ERROR.UPLOAD_LIMIT_EXCEEDED: alert("Error Code: Upload Limit Exceeded, File name: " + file.name + ", File size: " + file.size + ", Message: " + message); break; case SWFUpload.UPLOAD_ERROR.FILE_VALIDATION_FAILED: alert("Error Code: File Validation Failed, File name: " + file.name + ", File size: " + file.size + ", Message: " + message); break; case SWFUpload.UPLOAD_ERROR.FILE_CANCELLED: updateRecord(file.id, 'status', 'Cancelled'); break; case SWFUpload.UPLOAD_ERROR.UPLOAD_STOPPED: updateRecord(file.id, 'status', 'Stopped'); break; default: updateRecord(file.id, 'status', "Unhandled Error: " + errorCode); alert("Error Code: " + errorCode + ", File name: " + file.name + ", File size: " + file.size + ", Message: " + message); break; } }; var fileSelectionError = function (item, file, errorCode, message) { if (errorCode === SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED) { alert("You have attempted to queue too many files.\n" + (message === 0 ? "You have reached the upload limit." : "You may select " + (message > 1 ? "up to " + message + " files." : "one file."))); return; } switch (errorCode) { case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT: alert("Error Code: File too big, File name: " + file.name + ", File size: " + file.size + ", Message: " + message); break; case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE: alert("Error Code: Zero byte file, File name: " + file.name + ", File size: " + file.size + ", Message: " + message); break; case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE: alert("Error Code: Invalid File Type, File name: " + file.name + ", File size: " + file.size + ", Message: " + message); break; default: alert("Error Code: " + errorCode + ", File name: " + file.name + ", File size: " + file.size + ", Message: " + message); break; } }; // Handle selecting entries in the file type combo box. var fileTypeSelectHandler = function (item, records) { var ext = records[0].data.ext, desc = records[0].data.desc; App.MultiUpload1.fileTypes = "*." + ext; App.MultiUpload1.multiUpload.setFileTypes("*." + ext, desc + " (*." + ext + ")"); } // Given the queued file handle, get its ID and from this, fetch the extension description // bound to the file record entry in the grid. var getCurrentFileTypeDesc = function(file) { var grid = App.UploadGrid, retVal = null; return App.UploadGrid.store.getById(file.id).data.filetype; } </script> </head> <body> <form runat="server"> <ext:ResourceManager runat="server" ScriptMode="Debug" SourceFormatting="true" /> <div> <ext:Viewport runat="server" StyleSpec="background-color: transparent:" Layout="BorderLayout> <Items> <ext:GridPanel ID="UploadGrid" runat="server" Flex="3" Region="South" Frame="true"> <Store> <ext:Store ID="FileUploadStore runat="server"> <Model> <ext:Model ID="Model2" runat="server" IDProperty="id"> <Fields> <ext:ModelField Name="id" /> <ext:ModelField Name="name" /> <ext:ModelField Name="type" /> <ext:ModelField Name="size" /> <ext:ModelField Name="status" /> <ext:ModelField Name="progress" /> </Fields> </ext:Model> </Model> </ext:Store> </Store> <ColumnModel> <Columns> <ext:Column ID="Column2" runat="server" Text="File Name" DataIndex="name" Width="150" /> <ext:Column ID="Column3" runat="server" Text="Size" DataIndex="size" Width="120"> <Renderer Format="FileSize" /> </ext:Column> <ext:Column ID="Column4" runat="server" Text="Type" DataIndex="type" Width="120" /> <ext:Column ID="Column5" runat="server" Text=" " DataIndex="status" Width="60"> <Renderer Fn="statusIconRenderer" /> </ext:Column> <ext:Column ID="Column6" runat="server" Text="Status" DataIndex="status" Width="120" /> <ext:ProgressBarColumn ID="ProgressBarColumn1" runat="server" Text="Progress" DataIndex="progress" /> </Columns> </ColumnModel> <TopBar> <ext:Toolbar ID="Toolbar1" runat="server"> <Items> <ext:MultiUpload ID="DocUpload" runat="server" OnFileUpload="DocUpload_FileUpload" FileDropAnywhere="true" FileSizeLimit="15 MB" FileTypes="*.*" FileTypesDescription="All Files" FileUploadLimit="100" FileQueueLimit="0"> <Listeners> <SwfUploadLoadFailed Fn="loadFailed" /> <FileSelected Fn="fileSelected" /> <UploadStart Handler="updateRecord(file.id, 'status', 'Sending');" /> <UploadProgress Handler="updateRecord(file.id, 'progress', bytesComplete / bytesTotal);" /> <UploadComplete Handler="updateRecord(file.id, 'progress', 1 );updateRecord(file.id, 'status', 'Uploaded' );" /> <UploadAborted Handler="updateRecord(file.id, 'status', 'Aborted');" /> <UploadRemoved Handler="var store = this.up('grid').store; store.remove(store.getById(file.id));" /> <UploadError Fn="uploadError" /> <FileSelectionError Fn="fileSelectionError" /> </Listeners> <DirectEvents> <UploadSuccess OnEvent="HandleUploadSuccess"> <ExtraParams> <%-- This requires special function binding and parameters' transmission so that the values are resolved at run time. The grid is NOT the same component as the MultiUpload, but an auxiliary component, so data from it must be fetched indirectly. --%> <ext:Parameter Name="filename" Value="Ext.Function.bind(function(file) { return file.name; }, this, [file])" Mode="Raw" /> <ext:Parameter Name="type" Value="Ext.Function.bind(getCurrentFileTypeDesc, this, [file])" Mode="Raw" /> </ExtraParams> </UploadSuccess> </DirectEvents> </ext:MultiUpload> <ext:ToolbarSeparator /> <ext:Button ID="Button1" runat="server" Text="Start Upload" Icon="Tick" Width="170" Handler="#{DocUpload}.startUpload();" /> <ext:ComboBox ID="DDTypeComboBox" runat="server" Editable="false" DisplayField="type" QueryMode="Local" ForceSelection="true" TriggerAction="All" Text="Type" EmptyText="Select a type..."> <Store> <ext:Store ID="DDTypesStore" runat="server"> <Model> <ext:Model ID="Model3" runat="server"> <Fields> <ext:ModelField Name="type" /> </Fields> </ext:Model> </Model> </ext:Store> </Store> <DirectEvents> <Change OnEvent="ComboBox_Change"> <ExtraParams> <ext:Parameter Name="type" Value="newValue" Mode="Raw" /> </ExtraParams> </Change> </DirectEvents> <ListConfig> <ItemTpl ID="ItemTpl1" runat="server"> <Html> <div class="list-item"> {type} </div> </Html> </ItemTpl> </ListConfig> </ext:ComboBox> <ext:Button ID="Button2" runat="server" Text="Remove All" Icon="Delete" Width="170" Handler="#{DocUpload}.removeAllUploads();" /> </Items> </ext:Toolbar> </TopBar> </ext:GridPanel> </Items </ext:Viewport> </div> </form> </body> </html>

Hello @atroul!

What exactly is not working? Can you point steps to reproduce what didn't come as you needed?