show previously uploaded images in [FINE UPLOADER]

Question

I am using fine uploader plugin to upload images. The image upload is working fine. What I am trying to do is when the page is refreshed after image upload fine uploader should show previously uploaded images.

Here is my code..

$('#accordion').on('shown.bs.collapse', function () {
    activeShopId1 = $(".collapse.in").attr("id");

    $('#' + activeShopId1 + '  #fine-uploader-gallery' + '.single-image').fineUploader({
        template: 'qq-template-gallery',
        request: {
            endpoint: 'upload_internal_image'
        },

        validation: {
            allowedExtensions: ['jpeg', 'jpg', 'gif', 'png'],
            itemLimit: 1
        },
        messages: {
        tooManyItemsError: 'You can only add 1 image'
            },
        deleteFile: {
            enabled: true,
            forceConfirm: true,
            endpoint: 'delete_internal_image'
        },
        callbacks: {
            onSubmit: function (id, fileName) {
                this.setParams({shop_id: shopId4Map});
            },
        },
    });

})

Thanks in advance.

I have read the this http://docs.fineuploader.com/branch/master/features/session.html but I am not getting how to implement this — , Mar 01 '16 at 06:51
Theres events for this sort of things http://docs.fineuploader.com/api/events.html — paskl, Mar 01 '16 at 07:04

score 9 · Accepted Answer · answered Mar 04 '16 at 15:15

To show previously uploaded images or general files when creating a new Fine Uploader instance (such as on page load), you should make use of the "initial file list" feature.

To do this, you must contribute a session endpoint option, like this:

session: {
   endpoint: '/initial/files'
}

Fine Uploader will send a GET request to this endpoint, and your server must response with a JSON array containing objects that represent each file to be displayed in the list.

Here are the following properties of each Object that Fine Uploader recognizes (* = required):

*name: String - Name of the file.
*uuid: String - UUID of the file.
size: Number - Size of the file, in bytes.
deleteFileEndpoint: String - Endpoint for the associated delete file request. If omitted, the deleteFile.endpoint is used.
deleteFileParams: Object - Parameters to send along with the associated delete file request. If omitted, deleteFile.params is used.
thumbnailUrl: String - URL of an image to display next to the file.
*s3Key: String - Key of the file in your S3 bucket. Only required if using Fine Uploader S3.
*s3Bucket: String - Name of the bucket where the file is stored in S3. Only required if using Fine Uploader S3 and if the bucket cannot be determined by examining the endpoint URL (such as when routing through a CDN).
*blobName: String - Name of the file in your Azure Blob Storage container. Only required if using Fine Uploader Azure.

The response will be converted into a JavaScript Array and passed to your sessionRequestComplete event handler. So, any non-standard object properties passed with your server response will also be passed to your event handler.

session: { endpoint: 'http://localhost/img/advertisements/advertisement_0_1467805607_138.png' }, NOT WORK — Mr. Tomar, Jul 16 '16 at 10:58
It points to a server endpoint that returns a JSON response describing a set of existing files on your system. If that isn't working for you, then your server is setup incorrectly or your server is not returning a valid response to Fine Uploader's initial files GET request. — Ray Nicholus, Jul 16 '16 at 12:13
Hi, I am only saving image name in database, any thing else i required when using the initial file like uuid etc — Mr. Tomar, Jul 16 '16 at 12:15
Please read the documentation, or at least look at the answer you are commenting on before asking any further questions. — Ray Nicholus, Jul 16 '16 at 12:17
@RayNicholus How would I get file size information? The success endpoint it does not return file size info, also my endpoint is '/initial/files/userId/33', does it support dynamic parameters in URL? — nomadus, Sep 04 '17 at 04:32

show previously uploaded images in [FINE UPLOADER]

1 Answers1

Linked