How does Uploadcare file picker work

Hi Guys

 

I have just noticed you now have an Uploadcare file picker widget. I am currently using the Filepicker widget to enable file uploads from our form but it is very complicated to use DropBox with it. We had to create a DropBox app to enable users to pick files from thei DropBox account but it looks like Uploadcare file picker has DropBox file picking enabled automatically, is that correct? The only problem is, when I check it on my iPhone 5 the Uploadcare file picker box that appears when you click to upload a file is too big for the screen (see attached screen shot). How do you make it responsive so that it can fit on a mobile?

 

Regards, Brook Fabian

Hello Brooks, 

It seems you've added your uploadcare file uploader widget correctly. I've also tested your form on my Phone and I am able to reproduce the same issue that you’re having.

To solve that issue could you please inject the CSS code as you see below:

@media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){

.uploadcare-responsive-panel .uploadcare-dialog-tab {

    width :300px !important;

}

.uploadcare-dialog-tab_current {

 width :300px !important;

}

.uploadcare-dialog-tab {

  width :300px !important;

}

 

.uploadcare-dialog-panel {

   width :300px !important;

}

.uploadcare-dialog-inner-wrap {

    width :300px !important;

}

.uploadcare-responsive-panel .uploadcare-dialog-tab .uploadcare-dialog-icon, .uploadcare-responsive-panel .uploadcare-dialog-tab:before {

   width :300px !important;

}

.uploadcare-dialog-tab-file:before {

     width :300px !important;

}

.uploadcare-dialog-tab_current:before {

 width :300px !important;

}

 

.uploadcare-dialog-tab .uploadcare-dialog-icon, .uploadcare-dialog-tab:before {

 width :300px !important;

}

 

.uploadcare-dialog-tab_current:before, .uploadcare-dialog-tab_current:hover:before {

 width :300px !important;

}

 

.uploadcare-dialog-disabled-tab:hover:before, .uploadcare-dialog-tab:before, .uploadcare-dialog-tab:hover:before {

 width :300px !important;

}

 

.uploadcare-responsive-panel .uploadcare-dialog-panel:not(.uploadcare-dialog-opened-tabs) .uploadcare-dialog-tab_current:after {

 width :300px !important;

 

}

.uploadcare-responsive-panel .uploadcare-dialog-tab:after {

 width :300px !important;

}

}

 

If this does not resolve the issue, please let us know and we will be glad to take another look.

Hi Beril

Thanks for your email. This CSS has helped but it looks like the iframe itself is what is causing the problem. Now the Uploadcare window is a good size but the iframe is still too big, see attached screen shot...

 

Hello Brook,

Can you please inject the following additional custom css code and see if that solves your problem:

@media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){

.uploadcare-dialog-inner-wrap{

width :280px !important;

}

.uploadcare-dialog uploadcare-responsive-panel uploadcare-active{

width :280px !important;

}

}

Hope this helps.

Do get back to us if you have any questions.

Thank you!

Hi Ashwin

Thanks for your message. This has not worked unfortunately but one of your colleagues has fixed this on another thread. They told me to add the responsive form widget (which I did not realise you had!) and this has worked fine. 

Thanks for your help.

 

Hello Brook,

Thank you for letting us know. We are glad to hear that the issue has been resolved for you. If you have any question or issues, please do not hesitate contacting us. We will be glad to assist you.