Search code examples
javascriptfine-uploader

Preloading images into fine uploader UI


Recently I've been spending time getting fine uploader to work on a developing project. I have it working with some custom drag n drop ordering and other options (such as delete) integrated into the fileTemplate option in fine uploader.

What I want to achieve is when a user edits their data that contains these images that they are preloaded as they were when the image where uploaded. So fine uploaded is displayed as it was after all the images had been uploaded.

However I cannot find any documentation or help on this. My initial conception was the output a duplicate of the fileTemplate code within the

<div id="fine-uploader"></div>

div. However when fine uploaded is initialized it removes the code. I do not need the preloaded code to be initalized by the fine uploader. Just as long as I can get the order working.

Surely this must be a way to do this? Does any one know? The only way I can think of is to use funky JS after the fine uploaded as initialized. But I'm not 100% convinced it will be a smooth process.


Solution

  • The desired result was achieve by simply inserting the HTML into the fine uploader ul list element. Just by basic jquery. IE

    $('ul', $('#fine-uploader')).html(preload);
    

    This HTML being a clone of the fine uplaoder success UI html. I had to re-write extra script to handle some of the extra features I added but it ended up being minimal considering. All the delete, drag n drop re-ording all work fine. Testing in multiple browsers and have not found any issues yet. Not the elegant way I prefer to code but working quite well so far.