[CLOSED] Get uploaded file name and file path server side.

Hi,

We are using Multiupload control for the upload process in new version. In the process we need some clarifications.
Please go through the below mentioned points and guide us with a solution:

1) We need to set the no of files upload (i.e) on the click of browse button we need to select only a single file. Multi-selection of files not allowed.
Is there any property available to set the upload file limit?

2) How to get the selected file name and the selected file path to upload in server side? Please provide us any sample if available.

Eagerly awaiting for your reply!!!

Hi

Quote:

1) We need to set the no of files upload (i.e) on the click of browse button we need to select only a single file. Multi-selection of files not allowed.
Is there any property available to set the upload file limit?

Do you need to disable multiselect option in Select file dialog? If yes then set the following code in MultiUpload

Code:

<FlashButton Action="SELECT_FILE" />

and the following listener

Code:

<AfterRender Handler="this.flashButton = null; this.createUploadButton();" />

Quote:

2) How to get the selected file name and the selected file path to upload in server side? Please provide us any sample if available.

File path is not available because browser doesn't pass path to server due security policy
File name is available in FileUpload handler, see
https://examples2.ext.net/#/MultiUpload/Basic/Simple/

Get uploaded file name and file path server side.

Hi Vladimir,

Thanks for the reply!
We are still in a dilemma that how to get the file path if we want to store that selected file path to DB or so?
Can you please suggest us how can we proceed further?

And also:
If we want to add only images using Mutliupload control, we are having a property named

Code:

FileTypes="*.jpg"

But how about allowing all type of images for upload. For example: We want the upload control to allow the user to select all type of image formats,
[i.e] .jpg, .bmp etc. Can you please suggest a proper way to achieve the goal?

Quote:

We are still in a dilemma that how to get the file path if we want to store that selected file path to DB or so?
Can you please suggest us how can we proceed further?

No way, browser doesn't provide such info. Also, i am not sure why do you think that file path can be useful on the server because it is path on client computer, what you will do with it on the server side?

Quote:

But how about allowing all type of images for upload.

FileTypes accept string with file types are separated by semi colon

Code:

FileTypes="*.jpg; *.gif; *.bmp"

Hi Vladimir,

Thanks for your support.

Is there any way to limit the multi upload control to allow only single upload always or do we need to use <ext:FileUploadField> for the single upload?

Hi @speedstepmem4,

You can try this setting for a MultiUpload.

Code:

FileUploadLimit="1"

1 Attachment(s)

Upload file limit

Hi Daniil,

Quote:

You can try this setting for a MultiUpload.

1
FileUploadLimit="1"

We have tried with your recommended code in a sample. But we are facing issue on that. Still it allows more than 1 file to be uploaded.
Please review the code and guide us!

Code:

<%@ Page Language="C#" %> <!DOCTYPE html> <script runat="server"> </script> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <ext:ResourceManager ID="ResourceManager1" runat="server" Namespace="Sample"> </ext:ResourceManager> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <ext:Viewport ID="ViewPort1" runat="server" Layout="FitLayout"> <Content> <ext:Container ID="BorderLayout" runat="server" Layout="FitLayout"> <Items> <ext:GridPanel ID="UploadGrid" runat="server" ForceFit="true" StyleSpec="width:100%"> <Store> <ext:Store ID="storeGrid" runat="server"> <Model> <ext:Model ID="Model1" runat="server" IDProperty="id"> <Fields> <ext:ModelField Name="id" /> <ext:ModelField Name="name" /> <ext:ModelField Name="size" /> <ext:ModelField Name="status" /> <ext:ModelField Name="progress" /> </Fields> </ext:Model> </Model> </ext:Store> </Store> <ColumnModel> <Columns> <ext:Column ID="Column1" runat="server" Text="File Name" DataIndex="name" Width="150" /> <ext:Column ID="Column2" runat="server" Text="Size" DataIndex="size" Width="60"> <Renderer Format="FileSize" /> </ext:Column> <ext:Column ID="Column3" runat="server" Text="Status" DataIndex="status" Width="60" /> <ext:ProgressBarColumn ID="ProgressBarColumn1" runat="server" Text="Progress" DataIndex="progress" /> </Columns> </ColumnModel> <BottomBar> <ext:Toolbar ID="Toolbar1" runat="server"> <Items> <ext:MultiUpload ID="UploadData" runat="server" FileTypes="*.xml" FileUploadLimit="1"> <FlashButton Action="SELECT_FILE" /> <Listeners> <FileSelected Fn="fileSelection" /> <UploadStart Handler="updateRecord(file.id, 'status', 'Sending');" /> <UploadComplete Handler="updateRecord(file.id, 'progress', 1 );updateRecord(file.id, 'status', 'Uploaded' );" /> <UploadRemoved Handler="var store = this.up('grid').store; store.remove(store.getById(file.id));" /> <AfterRender Handler="this.flashButton = null; this.createUploadButton();" /> </Listeners> </ext:MultiUpload> <ext:ToolbarSeparator /> <ext:Button ID="btnUpload" runat="server" Text="Upload"> <Listeners> <Click Delay="1" Handler="#{UploadData}.startUpload();" /> </Listeners> </ext:Button> <ext:Button ID="btnCancel" runat="server" Text="Cancel"> <Listeners> <Click Delay="1" Handler="CancelUpload();" /> </Listeners> </ext:Button> </Items> </ext:Toolbar> </BottomBar> </ext:GridPanel> </Items> </ext:Container> </Content> </ext:Viewport> </form> <script type="text/javascript"> function CancelUpload() { var selectedData = Sample.UploadGrid.getSelectionModel().getSelection(); if (selectedData.length == 0) { All(info_rowselect); } else { Sample.UploadData.removeUpload(selectedData[0].getId()); } } var fileSelection = function (item, file) { this.up('grid').store.add({ id: file.id, name: file.name, status: 'Pending', progress: 0 }); } var updateRecord = function (id, field, value) { var rec = Sample.UploadGrid.store.getById(id); rec.set(field, value); rec.commit(); }; </script> </body> </html>

Well, it doesn't limit the rows in the GridPanel. It limits an upload operation. When you trigger uploading, what does happen?

Set File upload limit

Hi Daniil,

Update trigger also getting all attached files. It's not restricted to one file.
Actually, our concern is the gird should restrict only one file. If the user browse again the same file needs to be updated with the current one.
It should not create a new row in the grid.

You can listen FileSelected event of MultiUpload and block adding a file if the file should not be added, just return false from that handler
You can check count of added files, check that file with same name is already presented in the store and so on