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.

Turnage

I have read the this docs.fineuploader.com/branch/master/features/session.html but I am not getting how to implement this – Turnage

Theres events for this sort of things docs.fineuploader.com/api/events.html – Stonewall

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.

Chipmunk

'/initial/files' what is that path of file ? – Quadrat

session: { endpoint: 'localhost/img/advertisements/advertisement_0_1467805607_138.png' }, NOT WORK – Quadrat

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

Hi, I am only saving image name in database, any thing else i required when using the initial file like uuid etc – Quadrat

Please read the documentation, or at least look at the answer you are commenting on before asking any further questions. – Chipmunk

@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? – Trafficator