Access Actual File Name

Question

For some file name encoding concerns (users in Spain) and some other concerns, we need to manually structure the file name for the uploaded file.

When Fine Uploader passes the information to the server, the code changes the target filename (in the use case below, to "my_name.jpg"). The handler.php file saves the file with that name to the file system, then returns that new file name in the uploadName parameter. This is all working properly.

When I return that information to Fine Uploader via the uploadName parameter, I'm expecting to be able to access that new file name in javascript, so that I can then make calls to store the file name to a database.

The relevant code is below:

Settings:

 var settings = {
    debug: true,
    request: {
        endpoint: 'ajax/endpoint.php',
    },
    deleteFile: {
        enabled: true,
        endpoint: 'ajax/endpoint.php'
    },
    retry: {
        enableAuto: true
    },
    callbacks: {
        onComplete: function(id, name, response) {
            this.setName(id, response.uploadName);
        }
    }, 
    autoUpload: true,
    editFilename: false,
    retry: {
        enableAuto: true
    },
    resume: {
        enabled: true
    },
    chunking: {
        enabled: false
    },
    session: {
        endpoint: 'ajax/initialfiles.php'
    },
    validation: {
        allowedExtensions: ['jpg', 'gif', 'png'],
        itemLimit: 3,
        sizeLimit: 5000000
    }
};

Code:

$uploaderDiv = $('#fine-uploader');

uploaderObj = $uploaderDiv.fineUploader(settings).on("statusChange", function (event, id, oldStatus, newStatus) {
    if (newStatus == 'upload successful' || newStatus == 'deleted') {
        var files = uploaderObj.fineUploader('getUploads');
        $.each(files, function (i, file) {
            if (file.status == 'upload successful') {
                console.log(file);
            }
        });
    }
});

When uploading a file, the response from the server is:

{"success":true,"uuid":"f542c893-920a-4f58-a57f-7bd5d0f45294","uploadName":"my_name-715.jpg"}

However, the console log for the file info generates:

{
batchId: "98b6a0c0-28ed-466f-8d69-9cea425c20a9"
id: 0
name: "Karen_Book (thumb).jpg",
originalName: "Karen_Book (thumb).jpg",
proxyGroupId: "acf40500-9c8b-4c6e-a4f6-2542443d458d",
size: 5977
status: "upload successful",
uuid: "f542c893-920a-4f58-a57f-7bd5d0f45294"
}

Given the scenario above, how can I get the filename "my_name-715.jpg" in the statusChange event?

Answer 1

If you'd like access to any response from your server, you must do so inside an onComplete event handler. The response JSON is included as a parameter passed to your handler. It sounds like you want to make an request to your server with the updated name (from your server?). In that same handler, you should send whatever request is required. onComplete fires when the upload request completes, and onDeleteComplete fires when a delete request completes.