Search code examples
javascripthtmlcssfine-uploader

Changing <ul><li> to <div> in fineuploader

I am using http://fineuploader.com/ and Twitter bootstrap

The html code for the uploading files looks like this

    <ul class="qq-upload-list-selector">
     <li class="col-lg-3 col-md-4 col-xs-6 thumb">
            <div class="qq-progress-bar-container-selector">
                <div class="qq-progress-bar-selector qq-progress-bar"></div>
            </div>
            <span class="qq-upload-spinner-selector qq-upload-spinner"></span>
            <img class="qq-thumbnail-selector" qq-max-size="100" qq-server-scale>
            <span class="qq-edit-filename-icon-selector qq-edit-filename-icon"></span>
            <span class="qq-upload-file-selector qq-upload-file"></span>
            <input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
            <span class="qq-upload-size-selector qq-upload-size"></span>
            <a class="qq-upload-cancel-selector btn-small btn-warning" href="#">Cancel</a>
            <a class="qq-upload-retry-selector btn-small btn-info" href="#">Retry</a>
            <a class="qq-upload-delete-selector btn-small btn-warning" href="#">Delete</a>
            <a class="qq-upload-pause-selector btn-small btn-info" href="#">Pause</a>
            <a class="qq-upload-continue-selector btn-small btn-info" href="#">Continue</a>
            <span class="qq-upload-status-text-selector qq-upload-status-text"></span>
            <a class="view-btn btn-small btn-info hide" target="_blank">View</a>
</li>
    </ul>

I want to change the <ul></ul><li></li> tags to <div> because I want the result to appear in a bootstrap grid. When I change the code can't I get any upload result for my uploaded files. Looks like new li-tags generates by fineuploader javascript.

How do I use div instead and so that I can display the result in a bootstrap grid?

Tested this

<div class="qq-upload-list-selector col-lg-3 col-md-4 col-xs-6">
     <div class="qq-progress-bar-container-selector">
                    <div class="qq-progress-bar-selector qq-progress-bar"></div>
                </div>
Rest of the code ....
</div>
Solution

  • Fine Uploader is expecting a container inside of the qq-upload-list-selector to to hold the file item. Consider adding another <div> as the only child of the qq-upload-list-selector.

    So...

    <div class="qq-upload-list-selector col-lg-3 col-md-4 col-xs-6">
    <div>
        <div class="qq-progress-bar-container-selector">
            <div class="qq-progress-bar-selector qq-progress-bar"></div>
        </div>
Rest of the code ....
    </div>
</div>

    Why do you need a <div> for this? There's nothing special about a <div>. Just modify the style of the list item/list appropriately. Fine Uploader doesn't insert <li> tags if they aren't in your template.