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 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.

• javascript
• php
• jquery
• file-upload
• fine-uploader

• I have read the this docs.fineuploader./branch/master/features/session.html but I am not getting how to implement this – user5860299 Commented Mar 1, 2016 at 6:51
• Theres events for this sort of things docs.fineuploader./api/events.html – paskl Commented Mar 1, 2016 at 7:04

1 Answer 1

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.