Search code examples
javascriptreactjsfine-uploader

Getting uploaded file info from FineUploader


I'm implementing React version of FineUploader in my app to upload files to Azure Blob Storage.

Once I make sure files are uploaded, I need to save their info in my backend database. I don't want to register file info in my database unless I know the files are in my blob storage. Here's the info I need to capture:

  • original filename
  • assigned blobName or uuid
  • if I can, file size info would be very useful too but it's not a must

If I'm reading the documentation right, blobProperties appears to be the right place for me to get this info but so far I haven't been able to get this to work.

Within blobProperties, I do NOT need to call my database to get a blobName. A simple GUID value that I can assign is fine or simply capture the uuid FineUploader is assigning. I just want to capture the info I need and store them in my Redux store.

This is where I need some help:

const uploader = new FineUploaderAzure({
    options: {
        blobProperties: function(id) {

            // How do I get original file name here?
            // If I can, I'd like to get file size as well.
            // Once I know file's original name as well as the blobName assigned to it, I'll store them in my Redux store
        },
        cors: {
            expected: true,
            sendCredentials: false
        },
        signature: {
            endpoint: 'http://myapp.com/api/getsas'
        },
        request: {
            endpoint: 'https://myaccount.blob.core.windows.net/my-container'
        },
        callbacks: {
            onComplete: function (id, name, responseJSON, xhr) {

                myFunction(responseJSON);

            }
        }
    }
})

const myFunction = (responseJSON) => {

    // If upload is successful, I'll get file details from Redux store and call my action creators
    // to trigger an API call to my backend so that I can register uploaded files in my database.
}

I'd appreciate some pointers on how to get the file info I'm looking for.


Solution

  • With the onComplete function argument id you can retrieve everything with the methods exposed by fineUploader like

    you can call them like this in your function

    onComplete: function (id, name, responseJSON, xhr) {
                    uploader.methods.getName(id);
                    uploader.methods.getSize(id);
                    uploader.methods.getBlobName(id);
                    myFunction(responseJSON);
                }