PDA

View Full Version : [CLOSED] Get uploaded file name and file path server side.



speedstepmem4
Jul 29, 2014, 4:06 AM
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!!!

Vladimir
Jul 29, 2014, 9:40 AM
Hi


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


<FlashButton Action="SELECT_FILE" />


and the following listener


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





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
http://examples2.ext.net/#/MultiUpload/Basic/Simple/

speedstepmem4
Jul 29, 2014, 12:42 PM
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


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?

Vladimir
Jul 29, 2014, 1:02 PM
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?



But how about allowing all type of images for upload.

FileTypes accept string with file types are separated by semi colon


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

speedstepmem4
Jul 30, 2014, 12:31 PM
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?

Daniil
Jul 30, 2014, 1:02 PM
Hi @speedstepmem4,

You can try this setting for a MultiUpload.

FileUploadLimit="1"

speedstepmem4
Jul 31, 2014, 3:46 AM
Hi Daniil,



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!



<%@ 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>

Daniil
Jul 31, 2014, 5:28 AM
Well, it doesn't limit the rows in the GridPanel. It limits an upload operation. When you trigger uploading, what does happen?

speedstepmem4
Jul 31, 2014, 7:17 AM
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.

Vladimir
Jul 31, 2014, 11:24 AM
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