[CLOSED] File Upload and Confirm message

  1. #1

    [CLOSED] File Upload and Confirm message

    Hello,
    I am building an application where the user can upload a file. If the file already exists then X.msg.Confirm shows and ask the user if he wants to Replace, Update or Discard the new file. By using this Example I have no problem achieving this, because on FileSelected I check if the file exists and then by clicking the "Start Upload" button, upload starts.
    But if the user's browser doesn't support Flash I want to show the simple upload button. But then there is no "Start Upload" button so I cant achieve the desired functionality because the FileUpload function in code behind doesn't wait for the answer from the X.msg.Confirm. Is it possible to use a similar functionality? Maybe a "Start Upload" button?
    Thank you
    Last edited by fabricio.murta; Jun 09, 2017 at 6:21 PM.
  2. #2
    Hello @atroul!

    The simple upload button example you pointed above also uses MultiUpload, which requires flash, so that won't help you at all.

    You are probably looking for the native FileUploadField component. See this example: FileUploadField overview

    With the FileUploadField component you would get most functionalities you had with MultiUpload (but maybe not the same flexibility), but as for the "confirm" approach, you would totally be able to attain. The component will follow the ExtJS interface documented here: ExtJS 6.2.1 docs on Ext.form.field.File.

    I hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hello Fabricio,
    thank you for your answer! I think it will do the trick.
    But the problem is that there is not "FileSelected" listener to check if file exists. I tried calling a direct event
    in "Before" click to check if file exists but then the OnEvent never fires...
    Is there an example of what I want to achieve?
    Here is my code for the upload button:
    <ext:Button ID="SaveButton" runat="server" Text="Upload" Disabled="true">
                                                <DirectEvents>
                                                    <Click
                                                        OnEvent="UploadClick"
                                                        Before="
                                                        App.direct.CheckExists(#{FileUploadField1}.getValue(), #{fileTypeCB2}.getValue());
                                                        if (!#{BasicForm}.getForm().isValid() || #{fileTypeCB2}.SelectedItem == null) { return false; }  
                                                        Ext.Msg.wait('Uploading your photo...', 'Uploading');"
    
                                                        Failure="Ext.Msg.show({
                                                            title   : 'Error',
                                                            msg     : 'Error during uploading',
                                                            minWidth: 200,
                                                            modal   : true,
                                                            icon    : Ext.Msg.ERROR,
                                                            buttons : Ext.Msg.OK
                                                        });"
                                                        >
                                                    </Click>
                                                </DirectEvents>
                                            </ext:Button>
  4. #4
    Hello @atroul!

    I don't think there's an example doing exactly that, but figure that:
    - You should hide the actual upload button so that it is NOT the one the user presses
    - You will put a "mocking" button that should submit the filename for code behind to verify its existence and return (for example) the dialog confirming or the script to click the "real" hidden button.
    - If the dialog to confirm is returned by the code behind check, then that dialog should have a callback for when "confirmed" (a confirmation message box, example 1 here)
    - That 'callback' for confirming is but sending the click to the hidden upload button.

    Now, why your approach does not work:

    You set up a client-side code to call an asynchronous direct event. What does it mean? You are calling App.direct.CheckExists() and it immediately returns with Ok, I sent the direct request. It does not lock up the javascript code waiting for the server-side answer.

    After some seconds, your CheckExists() method will send back the result to the page, yes. But you set no success nor failure callbacks to the direct method itself! So it simply... runs, and will run the code the direct method asked to run from code behind -- if any. For example, if you had in the code behind a SaveButton.Click().

    You need to "think" parallel programming here. Additionally, you should expect that two people may be sending the same file at the same time, so that it could happen the first check sees no conflicting file, but before it reports back to the client browser to perform the upload itself, then the other user could have uploaded the conflicting file. In that case, I believe just making the upload fail, or just overwriting the file should do. But that's a decision based on your business logic and priorities.

    Well, hope this helps! Once you get the hang of the direct method's asynchronous nature, and that you may need to rely on its callback code for either failure or success, I believe it will be easy to tackle this upload issue.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] multiple file upload and file size at client side
    By mirwais in forum 1.x Legacy Premium Help
    Replies: 24
    Last Post: Dec 15, 2014, 5:44 AM
  2. [CLOSED] File select dialogue is not opening in Multiple File Upload
    By WHISHWORKS in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Nov 22, 2013, 11:28 AM
  3. Replies: 1
    Last Post: Mar 15, 2013, 1:38 AM
  4. [CLOSED] Multiple file support to upload in file upload control
    By legaldiscovery in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Feb 01, 2013, 9:41 AM
  5. Replies: 1
    Last Post: Jun 23, 2011, 9:37 AM

Tags for this Thread

Posting Permissions