-2

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.

Shane
  • 2,375
  • 4
  • 22
  • 31
  • I'm not sure I understand what you are trying to do. Can you attempt to explain another way or provide some screenshots? – Ray Nicholus Aug 23 '13 at 00:25
  • Also, the title to this question is a bit misleading. At first I thought you were looking for a way to generate image thumbnails using Fine Uploader, but, quite frankly, I'm not really sure what you are trying to do. – Ray Nicholus Aug 23 '13 at 00:53
  • I'm trying to load the images that are already uploaded to the server into the User Interface of Fine uploader. IE if the images are attached to a listing and someone want to edit the listing. Then fine uploaded is display with all images already loaded into the fine uploader. So they can then be deleted or what not. – Shane Aug 23 '13 at 13:16
  • Why do you want to do this? Fine Uploader is an upload tool, not a turnkey web application. – Ray Nicholus Aug 23 '13 at 13:17
  • Without writing an essay. This is what needs to happen. The page is loaded with all saved details. The idea is to include the images again. – Shane Aug 23 '13 at 13:43
  • I'm a bit confused about your use of the word "images". Fine Uploader doesn't do anything special with images (yet). Do you mean that you want the files listed as they appear in Fine Uploader UI after all items have been uploaded to your endpoint? – Ray Nicholus Aug 23 '13 at 14:12
  • Yes. That is correct. – Shane Aug 23 '13 at 15:45
  • This is a feature planned for the current release cycle. Please see https://github.com/Widen/fine-uploader/issues/784 for more details. – Ray Nicholus Dec 18 '13 at 05:30

3 Answers3

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.

Shane
  • 2,375
  • 4
  • 22
  • 31
  • 1
    In case anyone's wondering, this is built into FineUploader nowadays (or perhaps was even in 2013 - I don't know). The relevant documentation can be found here http://docs.fineuploader.com/features/session.html, but basically all you have to do is set `session: {endpoint: "/my-endpoint"}` and make sure the endpoint returns an array of already uploaded images as per the spec. – powerbuoy Nov 15 '15 at 11:23
0

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.

Mark Feltner
  • 2,041
  • 1
  • 12
  • 23
  • I've been developing for 15 years and am very familiar with dealing with images. This makes it more messy than it needs to be. Hence building 2 UI's to handle the images. One for uploading and other for deleting. Esp when there is already a delete button within the UI for Fine Uploader. I cannot see why it is not possible to run the fine uploader process that is fired when an image has completed loading. IE providing the URL for the image and bypassing the upload function. – Shane Aug 24 '13 at 18:52
  • This would then display the interface, image and update the UI. Then more images could be uploaded as required. In fact chances are there is a call to a function somewhere within fine uploader that does just this. – Shane Aug 24 '13 at 18:53
0

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.

Community
  • 1
  • 1
Ray Nicholus
  • 19,538
  • 14
  • 59
  • 82
  • Its really simple. I want the UI to be loaded just as it looks after the User has uploaded files. A solid week or so has been spend adding functionality to the supplied filetemplate option. Such as setting a primary image, deleting and order all using ajax. All works fine. Somewhere in fine uploader there would be a return success when the image has completed the upload process. This must trigger the output of the upload success UI that displays the image and image name. I just need to run this, for each image giving it the URL of the uploaded image. I guess I need to search the source. – Shane Aug 26 '13 at 16:01
  • @ray-nicholus I think @shane's question is very valid and I have the same issue right now. I've created a wizard, on one page I upload files which are displayed nicely. I click next but then decide to go back. I'm not disregarding the volume of good effort that's already gone into the tool but I would expect a method of getting the UI to it's state just before I clicked next. I searched the fine uploader js file for a setting such as `preload`, `items` or `uploads` to add an array of existing uploads `items: ['Example1.jpg', 'readme.txt']` to no avail. Do you have any further thoughts? – Stokedout Sep 01 '13 at 19:59
  • Something like this would be a nice addition to the API: `$('#fineUploader').fineUploader({ existingUploads: ['Example1.jpg', 'readme.txt']});` – Stokedout Sep 01 '13 at 20:01
  • @Stokedout Can you please open up a feature request in the Github repo's issue tracker, so we can discuss a bit more. The issue tracker can be found at https://github.com/Widen/fine-uploader/issues. – Ray Nicholus Sep 01 '13 at 21:37
  • Hi @RayNicholus I certainly can, I'll add it at some point this week. Thanks – Stokedout Sep 02 '13 at 09:55