Support » Plugin: GD bbPress Attachments » adding label to input so it can be styled easily

  • Resolved esmaeili

    (@esmaeili)


    I made some changes to the plugin so the choose file button can be styled only with CSS.

    css:
    .bbp-attachments-form input[type=file] {
    display: none !important;
    }
    .custom-file-upload {
    padding: 6px 12px;
    cursor: pointer;
    width: 25%;
    border: 1px solid #0098db;
    border-radius: 2px;
    }

    uploader.php :
    <p class=”bbp-attachments-form”>
    <label for=”file-upload” id=”file-name” class=”custom-file-upload”>
    <?php _e(“Choose File”, “gd-bbpress-attachments”); ?>:
    </label><br/>
    <input type=”file” size=”40″ id=”file-upload” name=”d4p_attachment[]”><br/>
    <?php _e(“Add another file”, “gd-bbpress-attachments”); ?>
    </p>

    Problem is that I need to show the selected file name in the input box, I added this JS code to uploader.php but it only works for one attachment.

    <!– <script>
    document.querySelector(“#file-upload”).onchange = function(){
    document.querySelector(“#file-name”).textContent = this.files[0].name;
    }
    </script> –>

    I need to show the selected file name for all 4 attachments correctly, thanks in advance.

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Plugin Author Milan Petrovic

    (@gdragon)

    The plugin uses default INPUT form element for FILE which is impossible to style correctly in different browsers. Text ‘Choose File’ comes from the FILE control.

    My GD bbPress Toolbox Pro plugin implements an enhanced upload form that completely hides INPUT/FILE and renders its own interface for each file. I don’t plan to make changes to the free version.

Viewing 1 replies (of 1 total)
  • The topic ‘adding label to input so it can be styled easily’ is closed to new replies.