What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How does Uploadcare file picker work

    Asked by Brook Fabian  on August 31, 2016 at 09:54 AM

    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

    Page URL:
    https://form.jotformeu.com/61394223844356

    Screenshot
    work how uploadcare problem dropbox uploads Mobile
  • Profile Image
    JotForm Support

    Answered by beril on August 31, 2016 at 11:32 AM

    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.

  • Profile Image

    Answered by Brook Fabian  on August 31, 2016 at 11:43 AM

    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...

     

  • Profile Image
    JotForm Support

    Answered by ashwin_d on August 31, 2016 at 01:35 PM

    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!

  • Profile Image

    Answered by Brook Fabian  on September 01, 2016 at 05:01 AM

    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.

     

  • Profile Image
    JotForm Support

    Answered by beril on September 01, 2016 at 06:42 AM

    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.