13 - Populate file list with previously uploaded files

[number0]

Using the jQuery wrapped latest version
How to populate the file list with files already uploaded to server?

Adding my own items to the list/UI via jQuery is not option because I lose validation rules

[rnicholus]

Hello Sebastian. Are you the same person who created this thread on Stackoverflow?

[number0]

No but I have the same problem

[rnicholus]

Displaying files uploaded from previous sessions on a page seems a bit out of scope as far as upload libraries are concerned. Why do you want to display previously uploaded files? Perhaps if you discussed your web app a bit more, I could be of more help.

[rnicholus]

No response after 2 days. Closing.

[hilobok]

I also need function to populate list of already uploaded files. Let say I have a document with attached images or archives (uploaded with fine-uploader). Would be nice to have ability to rename or delete, or view thumbnails of those attachments some time later.
Now I can get list of already uploaded files with getUploads() function and store it in document entity in json format for later use. Something like setUploads() are missed.

[rnicholus]

@hilobok What you are asking for is really not related to the function of uploading files. Fine Uploader really isn't a general-purpose UI tool. The default UI is really only designed with uploading files in mind. It seems like non-uploaded-related tasks, such as the one you are describing, should be handled outside of Fine Uploader.

[ironyee]

I agree handling previously uploaded files escapes the role of Fine Uploader.
Nevertheless, I think Fine uploader should provide a minimum way at least because It is an essential function to build some services.

I succeeded in populate list of already uploaded files by support with server side and listElements option.
Notwithstanding this efforts, Fine uploader couldn't notice a change of element-count, uuid etc.
I'd just like to set status by using something like setUploads() or setUuid().

I'm being actively considering using an alternative solution because of this issue.

[rnicholus]

@ironyee If this is a feature you would like to see, please describe, in detail, how you would expect it to function.

[ironyee]

I'm sorry for my parsimonious explanation.

Environment:

• Fine uploader, Python-django, S3 directly

If some users click edit button to edit their post, they are supposed to see Fine uploader again.(previous session)
In this case, they must enable to see previously uploaded files and also delete that files.

Because Fine uploader do not support this function, I try to set a status of Fine uploader by information from server-side on initialization.

1. As above, I succeeded in populate list of already uploaded files.
2. With the form restored with a previous session, I tried to upload new file.
3. Fine uploader couldn't realize the form was restored on initialization.
4. Fine uploader let file uploaded with duplicated index.
5. An existing class "qq-file-id-0" replaced a new class because of duplicated index.
6. Even upload over itemLimit was allowed.

I'd like to see the right way to address these issues.

[rnicholus]

What does your "edit" button do, exactly?

[ironyee]

Let me say a common button to edit already uploaded image.

Isn't it yet a full explanation ?

[rnicholus]

I'm really looking for details regarding how you would expect this to work. For example, how would you expect Fine Uploader to get a handle on previously uploaded files? Does you edit button reload the page, or just re-render an element and re-instantiate Fine Uploader?

[ironyee]

I just understand your question.
I'm sorry for my poor understanding again.

To render previous uploaded files, FIne uploader should receive assistance from server-side.

In my humble opinion, there is a way to put endpoint for previous status on fineUploader constructor like S3 request.

like this.

var uploader = $( '#fineuploader-s3' ).fineUploaderS3( {
...
　　session: {
　　　　endpoint: '/posts/1/images/'
　　},
...
} );

When Fine uploader is created, A request for session is sent to server asynchronously.
and then '/posts/1/images/' returns previous uploaded files in json format.

{
　　{
　　　　id: 0,
　　　　key: "6061ffa9-3c36-467b-ac2e-84cf1b3ba712.png",
　　　　uuid: "6061ffa9-3c36-467b-ac2e-84cf1b3ba712",
　　},
　　{
　　　　id: 1,
　　　　key: "88529535-3684-4f12-8ab8-a4b8c6e4c599.png,
　　　　uuid: "88529535-3684-4f12-8ab8-a4b8c6e4c599",
　　},
}

Receiving information for previous uploaded files, Fine uploader act as upload is completed without actual upload.
Finally, Fine uploader can be constructed with previous uploaded files.

I hope you can understand I can't fill out a refined method.

Fine uploader isn't assembled on server-side and need to call constructor whenever a page is loaded like client-side template.

But I don't know exactly how to operate fineuploader constructor internally.
Besides, I think Fine uploader is very dependent to client-side. So, I guess It is difficult for Fine uploader to integrate with server-side well.

[rnicholus]

I see. Well, this all seems fairly reasonable. I still think this is probably beyond the scope of this library, but there have been a number of requests for this feature. So, I'm going to re-open this case, and we will discuss some more internally. It is important that we all agree on an implementation, so I am hoping others will comment on your proposal here as well.

[rnicholus]

Adjustments to the last post by @ironyee regarding server response:

• No need to return the ID.
• UUID must be returned
• Key must be returned for S3
• Alternate delete endpoint (optional)
• Preview/thumbnail URL (optional)
• Alternate delete file params (optional)
• File size (optional)

[nick4fake]

Is there any progress? I switched from fineuploader as this is killer-feature for some workflows.

[rnicholus]

@nick4fake Work on this feature is scheduled for the current release cycle. See the last set of comments for details. If the planned implementation does not match up with your expectations, speak now before work on this feature begins.

[rnicholus]

I plan to start work on this today.

[rnicholus]

Tasks to tackle for this feature:

• Create session option w/ endpoint property. By default, a GET request will be sent during initialization, with the ability to re-send the request on reset as well via a refreshOnReset property.
• Create session module to handle initial file list.
• Create onSessionRequestComplete callback.
• Create new ajax requester for sending the GET request.
• Unit tests.
• Create "Initialize File List" feature page.
• Add feature-related doc links to navbar(s) & feature list
• CORS support documentation

[rnicholus]

I accidentally associated a482346 with the wrong issue in the commit message. It should have been associated with this issue.

[rnicholus]

Note that file items loaded into Fine Uploader during initialization will be counted when determining if you have reached your validation.itemLimit. This seemed to make the most sense to me, but If this does not fit into a specific workflow, please let me know as soon as possible.

[nick4fake]

Sorry, any news on this?

[rnicholus]

@nick4fake Yes, it's complete and will be part of 4.2. You can read the documentation on this feature in the development branch at http://docs.fineuploader.com/branch/develop/features/session.html. 4.2 is set to release on Wednesday.

[slava-uxd]

Can the files be added without an ajax request? I need a simple way to add already uploaded file records for a common scenario:

1. Files are selected and uploaded using Fine-Uploader
2. The form is POSTed manually using submit button, but did not pass server side validation.
3. Server returns the form still in edit mode, for the user to correct his errors. (Fine Uploader list is empty here.)
   ?. An AJAX request for initial file list cannot be populated server-side because $_POST is already cleared in step 3

Is there something like addFileRecord(files_array)?

This should be really simple, because this functionality is already written and works when AJAX request is processed.

I tried

      var id = uploader._addCannedFile({
        uuid: 'some-test-uuid',
        name: 'TEST FILE NAME.file',
        size: 1000,
        thumbnailUrl: iconPath +'Attachment_File_32.png'
      });
      uploader._addToList(id, uploader.getName(id));

The file record is added, but not fully functional. All the buttons like retry and cancel are visible and no events are attached. For example when I press delete, nothing happens. Can you explain how this can be done?

[rnicholus]

If you set the session.refreshonReset option to true, Fine Uploader will send a new GET request for the initial file list when you call the reset API method.

For any more questions regarding use of Fine Uploader, please post on Stack Overflow under the fine-uploader tag.

[ludofleury]

@alphestdev Ran to the same issue today, here the not so nice hack for fine uploader UI:

var uploader = ....
var id = uploader._addCannedFile({
                uuid: 'an-uuid',
                name: 'test.ext',
                size: 1000
            })
            uploader._templating.addCacheToDom();

beware it call internal API and should not be trusted when you update the lib etc...
I hope it could be implemented in the next version.

[rnicholus]

Issue #1191 covers exposing a public API method that would allow canned files to be easily added from any source. I've moved that case into version 5.6.0, which I will begin working on immediately. Please follow that case for updates.