Upload Widget is changing in offline mode

  • Profile Image
    abre360
    Asked on May 14, 2021 at 10:31 PM

    The appear of widget load file is not consistent in offline mode. Is there any way to fix it? Please is important for approval the use the widget in a offline forms for various members in my team. The widget work properly in offline mode is only the appear, is confused and ugly when is used in offline mode.


    Regards.


    1621045792_609f32209eb61_Screenshot_20211621045792_609f3220a14fb_Screenshot_2021

  • Profile Image
    Patrick_R
    Answered on May 15, 2021 at 04:59 AM

    Hello! This is the expected behavior; in offline mode, the file upload filed displays like this only; this is because the selected files aren't uploaded in real-time; whereas in the online mode; the files are uploaded in real time and the upload % is also shown.

    You can still upload multiple files in offline mode as well as there is no change in the functionality.

    Let us know if you have any further questions.

    Thank you!

  • Profile Image
    abre360
    Answered on May 15, 2021 at 01:09 PM

    Ok, how change the appear of the button choose file, if is the offline mode active? I need it more big and maybe other color.


    Thank you!



  • Profile Image
    ashwin_d
    Answered on May 15, 2021 at 02:19 PM

    I am not sure if I have understood your question correctly. Do you want to customize the file upload field of the form? We can try to help you with custom CSS code, but it is not possible to track if the form is being accessed in offline mode.

    Do you just want to change the appearance of the file upload field? Please let us know, and we will try to help you.

    We will wait for your response.

  • Profile Image
    abre360
    Answered on May 15, 2021 at 03:13 PM

    Only change the appear the button mark on the image, when offline mode is active, its possible with css code?


    1621105978_60a01d3a04e19_Screenshot_2021



  • Profile Image
    Alexander_G
    Answered on May 15, 2021 at 06:17 PM

    Hello, 👋

    Thanks for the clarification.


    As I know - it's not possible to change. In addition, I will double-check the probability of it and will get back to you if my attempt will be successful.


    Thanks,

    Alex

  • Profile Image
    Alexander_G
    Answered on May 15, 2021 at 07:35 PM

    Hi there,

    Yes, it's a native browser's button, so we can do a few to change it. It's browser related. However, according to my tests it works okay in built-in browser in our Mobile App.


    Kindly, try to implement this code to test:

    input[type=file]::-webkit-file-upload-button {
      border: 2px solid #6c5ce7 !important;
      padding: .2em .4em !important;
      border-radius: .2em !important;
      background-color: #a29bfe !important;
      transition: 1s !important;
      width: 70px !important;
      height: 50px !important;
    }

    input[type=file]::file-selector-button {
      border: 2px solid #6c5ce7 !important;
      padding: .2em .4em !important;
      border-radius: .2em !important;
      background-color: #a29bfe !important;
      transition: 1s !important;
      width: 80px !important;
      height: 50px !important;
    }

    input[type=file]::-webkit-file-upload-button:hover {
      background-color: #81ecec !important;
      border: 2px solid #00cec9 !important;
      width: 80px !important;
      height: 50px !important;
    }

    input[type=file]::file-selector-button:hover {
      background-color: #81ecec !important;
      border: 2px solid #00cec9 !important;
      width: 80px !important;
      height: 50px !important;
    }


    Result:

    1621121664_60a05a807ea73_


    Hope it works for you.


    Sincerely,

    Alex

  • Profile Image
    abre360
    Answered on May 15, 2021 at 09:12 PM

    You are the man! Thank so much for try it and for dedicated a time for this.


    I try it and will be back.