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) i

Solution 1:

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.

Solution 2:

You question seems to be out of the scope of what Fine Uploader does and offers. Fine Uploader is simply a tool to help developers effectively get efficient file uploading working on their website. In this sense, Fine Uploader acts upon the KISS principle. Once the files are uploaded, Fine Uploader doesn't really care at all what you do with them, and, in fact, has very little power over your files.

From my understanding of your question, you want the successfully uploaded files to be rendered again when the user leaves and comes back to the page.

I have no knowledge of the stack that you are using for your web application or the requirements for what you want, so this may be a bit vague, but you're going to need to figure out how to save the 'state' of your web application. There are many ways to go about this. Maybe on each successfully upload you save the URL to the file in localstorage, a cookie, or on a remote database. You'd have to implement some code to retrieve those records and then GET them from the server they are stored on and then display them on the page.

Whichever way you slice it it's a bit of work to do. My answer could probably be divided into at least 3 separate questions (depending on your understanding of web technologies). Again, without knowing what technologies you're using it's hard to diagnose and offer a detailed solution.

Solution 3:

Mark's answer covers this very nicely, but I'll expand on what he said here a bit.

Shane, Fine Uploader is a tool that provides cross-browser file upload support to an existing web application. It is not a turnkey web application in a box. Nor should it be. The problem of uploading files cross-browser along with all related features is complex enough. Your requirement has nothing to do with uploading files. It is out of scope for any cross-browser file upload tool. These are statements I am making based on my understanding of your requirement, which is very hard to follow as you have not provided much detail.

Once the files have been uploaded and the page/component has been dismissed, Fine Uploader's job is done. If you want to provide your users with a way to edit existing files, you should certainly do that, but you should not expect an upload library to assist with this. Fine Uploader is not a general-purpose UI tool, nor is it anything other than a library to allow cross-browser file uploading along with all closely related features. No other upload library will behave as a general-purpose UI tool either. If your application design depends on the upload tool to be responsible for generating random portions of your UI and supporting non-upload-related features, then I highly suggest you re-evaluate the design of your web app.

Fine Uploader's default UI is very basic, and only really designed for the task of disseminating file upload state to the user and handling closely related tasks. Think of this (or any) upload library as a hammer. It is great at pounding nails. You seem to want to both pound nails and saw wood, with the same tool. I suppose we could take as hammer and add a serrated bland to the side of it, but that would make it a less effective and awkward to use tool at both pounding nails and sawing wood. Use a hammer for pounding nails, and a saw for cutting wood.

Finally, I'm a bit concerned or confused that you have apparently modified the fileTemplate option to add "other options (such as delete)" to the library. I'm not sure if you know that deleting a file is already a feature natively integrated into the library. I'm not sure if you are using an old version of the library, if you just missed this in the documentation, or if I am misunderstanding you.