Upload Widget is changing in offline mode

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.

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!

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!

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.

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

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

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:

Hope it works for you.

Sincerely,

Alex

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

I try it and will be back.