FineUploader - add uploaded files on page load

Question

I'm trying to let user edit files they uploaded before.

I created a script, that returns the same HTML as is generated when I upload file.

function add_fineuploader_images () {
    $post_id = $_POST['post_id'];
    $media = get_attached_media( 'image', $post_id);
    if ($media) {
    foreach ($media as $image) {
    ?>
        <li class="qq-file-id-0 qq-upload-success" qq-file-id="0" data-id="<?php echo $image->ID; ?>">
            <span class="qq-upload-spinner-selector qq-upload-spinner qq-hide"></span>
            <img class="qq-thumbnail-selector" qq-max-size="100" qq-server-scale="" src="<?php echo wp_get_attachment_image( $image->ID, 'thumbnail' );?>">
            <span class="qq-edit-filename-icon-selector qq-edit-filename-icon"></span>
            <span class="qq-upload-file-selector qq-upload-file"><?php echo $image->post_title; ?></span>
            <input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
            <a class="qq-upload-cancel-selector qq-upload-cancel qq-hide" href="#">Cancel</a>
            <a class="qq-upload-retry-selector qq-upload-retry qq-hide" href="#">Retry</a>
            <a class="qq-upload-delete-selector qq-upload-delete" href="#">Delete</a>
            <a class="qq-upload-featured-selector qq-upload-set-featured" href="#">Set as featured</a>
            <span class="qq-upload-status-text-selector qq-upload-status-text"></span>
        </li>
    <?php
    }
}
exit();

}

And on page load I'm calling AJAX Post to load the images into page:

var post_id = $('#post_id').val();
    $.post(Ajax.ajaxurl, { action: 'add_fineuploader_images', post_id: post_id }, function(data) {
        console.log(data);
        $('.qq-upload-list').html(data);
    });

This created the same preview, as when the files are uploaded via FineUploader.

Now, I would need to let FineUploader know about these, so DELETE and other methods work.

I initialize FineUploader like this:

 $("#fine-uploader").fineUploader({
  request: {
        endpoint: Ajax.ajaxurl,
        params: {
            action: 'attach_files',
            post_id: $('#post_id').val()
        }
    },
  deleteFile: {
        enabled: true,
        endpoint: Ajax.ajaxurl,
        method: 'POST'
    }
});

How should I reinitialize FineUploader? Or, is there a better way to do this?

Answer 1

If you want to display files in the upload list that have been uploaded in a previous session, just use the Initial File List feature. No need to reinvent the wheel here. If you want to reset Fine Uploader, use the reset API method.

I've noticed that you are asking a lot of questions that are covered in the documentation. I encourage you to take a close look at the existing documentation and demos, which, we hope, are fairly comprehensive.