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

    Multiple Upload Field: How to customize the list of uploaded files to show only some uploaded files?

    Asked by DanBarker6 on March 23, 2016 at 05:08 PM

    Hi,

    I want to enable customers to upload multiple files - up to 1000 at a time. And I want them to go to Dropbox (or another service if this is more suitable).

    The trouble is, the standard file upload button lists all the files being uploaded, so if there were 1000 files, the user would have an ugly looking page in front of them - and it would also be unreasonably long!

    With the drag and drop widget, I've noticed that you can't integrate with dropbox.

    Is there a solution you could suggest please?

    Many thanks,

    Dan

    uploads dropbox integrate thanks solution
  • Profile Image
    JotForm Support

    Answered by Kevin_G on March 23, 2016 at 05:39 PM

    It is possible to make the list of uploaded files scrollable, for example, if the list increases the height of the list will be the same always does not matter the amount of uploaded files and a scroll bar will be shown that will allow your users to check the uploaded files, to achieve it you only need to inject this CSS code: 

    [data-type="control_fileupload"] .qq-upload-list{

    height:200px;

    overflow:hidden; 

    overflow-y:scroll;

    }

    This guide will help you to inject it, paste the given code at the end of all the existing code in your form: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    See the result on this sample form, upload multiple files and see how it works before to apply it to your form: https://form.jotform.com/60826254163959

    Hope this helps. 

  • Profile Image

    Answered by DanBarker6 on March 25, 2016 at 10:14 AM

    Thanks so much!! You're a legend!

    Would it also be possible to control the width and have, say, three columns of uploading files shown?

    Also, is there a way to control the number of files a user can upload?

    Cheers,

    Dan

  • Profile Image
    JotForm Support

    Answered by Mike_G on March 25, 2016 at 12:47 PM

    To achieve that, kindly update the CSS code provided by my colleague, Kevin_G, above and add the codes highlighted in blue.

    [data-type="control_fileupload"] .qq-upload-list{

    height: 200px;

    overflow: hidden;

    overflow-y: scroll;

    width: 365px;

    }

    .qq-upload-list li {

    display: block;

    float: left;

    height: 25px !important;

    margin-left: 2px;

    margin-right: 2px;

    margin-top: 0;

    max-height: 25px;

    width: 100px;

    }

    Below is a sample form where I have applied the changes.

    https://form.jotform.com/60844758687979