$.ajax inside BeforeUpload Event - Plupload

Question

This app is an image uploading tool that uploads images directly from client browser to Amazon S3 using Plupload. So far, everything is working good except this issue.

I've this code forBeforeUpload event.

init: {
    BeforeUpload: function (up, file) {
        $.ajax({
            url: '/ServerTime.ashx',
            dataType: 'text',
            data: { format: "yyyy-MM-dd_HH.mm.ss.fffffff" },
            type: 'POST',
            cache: false
        }).done(function (data) {
            console.log("Before setting ImageName: " + data);
            imageName = data + ".JPG";
            console.log("After setting ImageName: " + imageName);
            up.settings.multipart_params = {
                'key': key,
                'Filename': imageName,
                'acl': 'public-read',
                'success_action_status': '201',
                'AWSAccessKeyId': accessKey,
                'policy': policyDocument,
                'signature': policySignature
            };
        });
    }
}

However, I've this error when try to upload a file:

HTTP Error. Upload URL might be wrong or doesn't exist.

On Console, it is printing the expected result as follows:

Before setting ImageName: 2014-04-04_13.33.45.1155072

After setting ImageName: 2014-04-04_13.33.45.1155072.JPG

I guess there is something wrong maybe because I'm using AJAX to get time from server. On the other hand, trying the following code is working without any issue.

init: {
    BeforeUpload: function (up, file) {
        up.settings.multipart_params = {
            'key': "This_Is_Folder_Name/This_Is_File_Name.JPG",
            'Filename': "This_Is_File_Name.JPG",
            'acl': 'public-read',
            'success_action_status': '201',
            'AWSAccessKeyId': accessKey,
            'policy': policyDocument,
            'signature': policySignature
        };
    }
}

Notice that, this time I'm using static names for Filename and key, and there is no AJAX either

I really need help with this issue. Please suggest me. What I'm doing wrong with using AJAX to get server time and use it as file name? Thanks.

Answer 1

You might be able to override some of their code by doing the following:

init: {
    BeforeUpload: function (up, file) {
        $.ajax({
            url: '/ServerTime.ashx',
            dataType: 'text',
            data: { format: "yyyy-MM-dd_HH.mm.ss.fffffff" },
            type: 'POST',
            cache: false
        }).done(function (data) {
            console.log("Before setting ImageName: " + data);
            imageName = data + ".JPG";
            console.log("After setting ImageName: " + imageName);
            up.settings.multipart_params = {
                'key': key,
                'Filename': imageName,
                'acl': 'public-read',
                'success_action_status': '201',
                'AWSAccessKeyId': accessKey,
                'policy': policyDocument,
                'signature': policySignature
            };
            file.status = plupload.UPLOADING;
            up.trigger("UploadFile", file);
        });
        return false;
    }
}

This would cancel their trigger, so you would have to trigger it yourself. Please note, I have not tested this.

EDIT: I'm not sure if up and file are out of scope though...