Forums

File Upload Cancel

1. Charlotte Wang

   

   20 posts
   Registered:
   02 Nov 2021
   27 Apr 2022

   Link to this post

   We have a form with a file upload widget. We set it as a required field so clients will need upload at least one file to the form. The issue we are having with this widget is that the error message "Required Field" pops up right after I click on the File Upload button. 
   I even tried using "Client Side Required" checkbox instead of 'Required' in the config but the error msg still shows up when clicking on File Upload button. I wonder if this is how the widget works or we missed something? 
   
   my 2nd question is that:  can this config field "Allowed Extensions:" be ignored? Or the value 
   is needed for the widget to validate file types uploaded by clients?
   it's great to have this show to clients but we come up with our own message, specifying the acceptable file types and max uploaded file size. Therefore, we don't need this information to show. I tried removing the file types from this field but the value comes back again for some reason. 
   
   
   Thanks.
   
   

   Last modified on 27 Apr 2022 16:04 by Charlotte Wang
2. Mike Cohen

   

   30 posts
   Registered:
   10 Aug 2021
   28 Apr 2022 in reply to Charlotte Wang

   Link to this post

   Hi Charlotte, 
   
   This may not be the only way to remove the list of allowed file extensions, but we created a copy of the default widget template, and then commented out the lines of code that display the file extension list. This removed the message from view, but did not affect actual functionality. 
   
   This is what I commented out in the new widget template. 
   
        <p class="text-muted">@Html.Resource("AllowedExtensions"): @Model.AllowedExtensions</p>
      
   
3. Charlotte Wang

   

   20 posts
   Registered:
   02 Nov 2021
   02 May 2022 in reply to Mike Cohen

   Link to this post

   Thanks, Mike. Your advice works. 
   
   With regard to my 1st question, any idea?Thanks.
4. Brady Ward

   

   92 posts
   Registered:
   19 Aug 2021
   03 May 2022 in reply to Charlotte Wang

   Link to this post

   Hello Charlotte,
   
   Mike's suggestion is definitely the best answer for your 2nd issue. Removing those options from the advanced settings would also cause the widget to not accept those file types. Removing that line from the template is the way to go.
   
   As for your first issue, what is occurring is validation on blur of that field. Unfortunately turning off validationOnBlur and even returning true from validateInput event doesn't seem to stop this behavior. I will keep looking into this as I can agree that it would be desirable to not have the validation occur immediately (or at least have the option).
   
   While I investigate, you can use the following code snippet to catch the validateInput event and see if you can come up with any ideas:
   
   tpc.forms[0].$$instance.get_kendoValidator().bind("validateInput", function (e) {
     console.log(e);
     if(e.input.is("[data-tpc-role='file-upload-input']")){
         e.sender.validate = function ()
                  { return true; };
         e.sender.validateInput = function (input)
                  { return true; };
     }
   });
   
   The above will log the event object, the input is the validated field and the sender will be the entire form. You can see where I tried to return true for both the validate and validateInput event, with no luck.
   
   I will keep you updated with my progress,
   
   Brady
   TPC Web Developer
5. Brady Ward

   

   92 posts
   Registered:
   19 Aug 2021
   03 May 2022 in reply to Charlotte Wang

   Link to this post

   Hello again Charlotte,
   
   There is actually a global setting you can change by going to the Sitefinity backend Administration > Settings > Advanced > PortalConnectorMVC > Presentation > Form Validation Mode.
   
   If you change this to OnSubmit, the validation will no longer occur when focus is lost on that field (onBlur). Keep in mind, this will change the behavior throughout the entire site!
   
   All the best,
   
   Brady
   TPC Web Developer

   Last modified on 03 May 2022 18:05 by Brady Ward
6. Charlotte Wang

   

   20 posts
   Registered:
   02 Nov 2021
   03 May 2022 in reply to Brady Ward

   Link to this post

   Brady,
   Thanks a lot! We will give it a try. 
   
   
7. Charlotte Wang

   

   20 posts
   Registered:
   02 Nov 2021
   10 May 2022

   Link to this post

   Hi Brady,
   
   We gave it a try and changed it from OnBlur to OnSubmit. This seems to raise another issues not sure if you notice:
   1. Required Field error shows up after clicking on Submit button, which is our expected result. However, the error doesn't go away after selecting a value from a dropdown field or entering a value on input field. Why is that? 
   2. the error "Required Field" covers input fields, including dropdown list, which make it difficult to enter a value on text fields or dropdown field. 
   
   I wish I could attach a screenshot here to show you what exactly we see after changing the setting from OnBlue to OnSubmit.
   
   I wonder if you notice this issue on your end and have any idea how to resolve it. Thanks.
   
   
   
   
8. Brady Ward

   

   92 posts
   Registered:
   19 Aug 2021
   11 May 2022 in reply to Charlotte Wang

   Link to this post

   Hey Charlotte,
   
   Unfortunately my testing was in a very small form with just the file upload widget so I'm sorry to hear it didn't work as expected! It actually makes sense that the error message wouldn't clear as we're no longer checking validation onBlur, only onSubmit now so the message would only get cleared when re-running the validation during submit. I'm not sure there's much out of the box we can do to fix that but I'm wondering if we can run a custom validation onBlur and only clear the error messages (if there isn't an error), not present them.
   
   As for the styling issue, this is a little unexpected, but, it's also likely an easy fix (some positioning or display property changes).
   
   Let me take some time to look into these and get back to you.
   
   All the best,
   
   Brady
   TPC Web Developer