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.

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.

• javascript
• jquery
• ajax
• amazon-s3
• plupload

• Does the end of the 'key' have to match the 'imageName'? – Dov D. Commented Apr 4, 2014 at 14:04
• Plupload is probably not expecting you to run asynchronous code in your BeforeUpload handler. It probably runs that function, and then uploads before your ajax es back with results. – rescuecreative Commented Apr 4, 2014 at 14:04
• @Dov D, yes, end of key must match with file name. Actually key identifies to which directory of the Bucket a file should be uploaded. – user3332579 Commented Apr 4, 2014 at 14:07
• @rescuecreative, my guess is similar too, however I've not found any document that specifies and proves that I cannot use AJAX inside the BeforeUpload event of the Plupload. – user3332579 Commented Apr 4, 2014 at 14:08

2 Answers 2

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

If you look in the Plupload source code you'll see this:

// Private methods
function uploadNext() {
    var file, count = 0, i;

    if (this.state == plupload.STARTED) {
        // Find first QUEUED file
        for (i = 0; i < files.length; i++) {
            if (!file && files[i].status == plupload.QUEUED) {
                file = files[i];
                if (this.trigger("BeforeUpload", file)) {
                    file.status = plupload.UPLOADING;
                    this.trigger("UploadFile", file);
                }
            } else {
                count++;
            }
        }

        // All files are DONE or FAILED
        if (count == files.length) {
            if (this.state !== plupload.STOPPED) {
                this.state = plupload.STOPPED;
                this.trigger("StateChanged");
            }
            this.trigger("UploadComplete", files);
        }
    }
}

The line that says if (this.trigger("BeforeUpload", file)) { will determine whether the return of the trigger call is truthy or falsy. If truthy, it will next trigger "UploadFile". What that means is that the uploading of the file does not wait for asynchronous code to execute in your BeforeUpload function. As soon as that function returns, the upload can begin. Any async ajax call you make inside your BeforeUpload function will resolve after "UploadFile" is triggered.