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
};
}