Upload image to cloudinary and to my own server using jquery file upload

Question

I use jQuery File Upload to upload images to my server. Now I want to test out Cloudinary, but during testing I still want to upload all images to my own server as well.

The code I use for uploading images to my server is:

$(function () {
    $('#fileupload').fileupload({
        url: '/Upload/Upload.ashx',
        maxFileSize: 15000000,
        acceptFileTypes: /(\.|\/)(jpe?g)$/i,
        dataType: "json",
        autoUpload: true,
        start: function (e) {
            $('#progress').removeClass('hidden');
        },
        progress: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .progress-bar').css('width', progress + '%');
        },
        always: function (e) {
            $('#progress').addClass('hidden').fadeOut("slow");
        },
        done: function (e, data) {
            $('#progress').addClass('hidden');
            parent.location.reload();
        },
    })
    .bind('fileuploadadd', function (e, data) {
        $('#error').addClass('hidden');
    })
    .bind('fileuploadprocessfail', function (e, data) {
        var currentFile = data.files[data.index];
        if (data.files.error && currentFile.error) {
            $('#error').html('error: ' + data.files[data.index].error);
            $('#error').removeClass('hidden');
        }
    })
});

The code for uploading using Cloudinary is:

$('#fileupload').unsigned_cloudinary_upload('test12345',
    { cloud_name: 'test' }
).bind('cloudinarystart', function (e, data) {
    $('#progress').show();
}
).bind('cloudinaryprogress', function (e, data) {
    $('.progress-bar').css('width',
        Math.round((data.loaded * 100.0) / data.total) + '%');
}
).bind('cloudinarydone', function (e, data) {
    $('#progress').hide();
    parent.location.reload();
});

Now I'm searching for a way to do both the same time or after each other.

What I tried?

I tried to putting the code from Cloudinary in the "done" part of the Jquery File Upload code but that is not working. I also tried to destroyed Fileupload first and then start the Cloudinary code, also not working. I tried to play with Jquery when/then, but still no succes. I searched Google and Stackoverflow but can not find anything that I need.

The first part of uploading (FileUpload) is working. But the Cloudinary part it not. No errors in the console window.

I need a way to combine the scripts.. can anybody help me out?

Update

I fixed it with only running the first script and in the Upload.ashx uploading to Cloudinay with asp.net. That is working.

public static UploadResult UploadImage(string tags, string fileName, Stream stream)
{
    var uploadParams = new ImageUploadParams()
    {
        File = new FileDescription(fileName, stream),
        PublicId = fileName,
        Tags = tags,
        UploadPreset = "test12345",
    };

    var result = new Cloudinary(GetAccount()).Upload(uploadParams);
    return new UploadResult
    {
        uri = result.SecureUri,
        error = result.Error != null ? result.Error.Message : string.Empty
    };
}

Answer 1

When you say "not working", you mean that the cloudinarydone event isn't fired at all after a successful upload? Because it should, and you should be able to get the details of it and to pass it to your server. Here's an example: https://jsfiddle.net/taragano/70dd9vd4/

Alternatively, and it may be probably the more recommended approach, you can upload the image to your server first, and then do a server-side upload, ie, have your server upload the image directly to your Cloudinary account.