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

  1. #1

    [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!!!
    Last edited by Daniil; Aug 08, 2014 at 9:05 AM. Reason: [CLOSED]
  2. #2
    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
    https://examples2.ext.net/#/MultiUpload/Basic/Simple/
  3. #3

    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
    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?
    Last edited by speedstepmem4; Jul 29, 2014 at 12:45 PM.
  4. #4
    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"
  5. #5
    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?
  6. #6
    Hi @speedstepmem4,

    You can try this setting for a MultiUpload.
    FileUploadLimit="1"
  7. #7

    Upload file limit

    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>
    Attached Thumbnails Click image for larger version. 

Name:	Upload screen.jpg 
Views:	25 
Size:	34.8 KB 
ID:	13881  
  8. #8
    Well, it doesn't limit the rows in the GridPanel. It limits an upload operation. When you trigger uploading, what does happen?
  9. #9

    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.
  10. #10
    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

Similar Threads

  1. MultiUpload Last file uploaded event
    By stebag in forum 2.x Help
    Replies: 1
    Last Post: Jan 19, 2014, 1:28 PM
  2. Replies: 5
    Last Post: Oct 07, 2013, 2:44 PM
  3. Replies: 8
    Last Post: Jun 10, 2013, 1:06 PM
  4. Replies: 1
    Last Post: Dec 06, 2012, 5:27 AM
  5. Upload file with file path
    By yash.kapoor in forum 2.x Help
    Replies: 4
    Last Post: Nov 02, 2012, 11:15 AM

Posting Permissions