Modifying the parameters of a cloudinary-fileupload DOM element (i.e. the input field) for example, using: $(...).attr('data-form-data', data) has no effect over the real upload payload since BlueImp pre-consumes it when the page is first loaded.
Dynamically adding/changing attributes is requires using blueImp api, as follows:
- Providing a full hash of parameters:
$(...).fileupload({formData: data}) - Retrieving the current hash of parameters:
$(...).fileupload('option', 'formData') - Adding the specified key & value to the parameters hash:
$(...).fileupload('option', 'formData').key = value - Removing the specified key with its value from the parameters hash:
delete($(...).fileupload('option', 'formData').key)
Making such changes when using signed-uploads requires regenerating the signature as well (via Ajax or similar methods).
Comments
15 comments
does the data-form-data attribute need to be set as well at this point, or can we skip that if we are setting the formData manually?
If formData is given via the fileupload method, the data-form-data attribute can be discarded.
I got it working like this...
HTML (inserted dynamically):
<input name="file" type="file" class="cloudinary-fileupload" data-cloudinary-field="image\_id" ></input>
Javascript after the HTML insert:
element.fileupload({
formData: data.params,
url : data.url,
headers: {"X-Requested-With": "XMLHttpRequest"}
});
Hey Itay , could you comment with a real example with dummy data? i dont get it
I get it work, the problem is that you MUST specificy the URL
$('.cloudinary-fileupload').fileupload(
{
formData: data,
url: 'https://api.cloudinary.com/v1_1/inhouse/upload',
start: function (e) {
console.log("Starting upload...");
},
fail: function (e, data) {
console.log("Upload failed, errorThrown: "+ data.errorThrown +" TextStatus: "+data.textStatus+ " jqXHR: "+ data.jqXHR );
}
});
Hi Andrés,
The
fileuploadexample was for updating an existing initialized file field.To create a new field configured to upload to Cloudinary, the
cloudinary_fileuploadmethod should be used and it automatically builds the upload URL correctly ( https://github.com/cloudinary/cloudinary_js/blob/master/js/jquery.cloudinary.js#L364)Hello Itay,
Can you spot any reason why I keep getting the Unknown API Key error?
<!DOCTYPE html><html>
<head><title>User Demo</title>
<link rel="stylesheet" href="/stylesheets/style.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script src="/javascripts/libs/jquery.ui.widget.js"></script>
<script src="/javascripts/libs/jquery.iframe-transport.js"></script>
<script src="/javascripts/libs/jquery.fileupload.js"></script>
<script src="/javascripts/libs/jquery.cloudinary.js"></script>
<script src="/javascripts/user.js"></script>
</head>
<body>
<script>$.cloudinary.config({cloud_name:'CLOUDNAME',api_key:"APIKEY"});</script>
<h1>Upload Test</h1>
<input type="file" id="cloudinary-upload" data-cloudinary-field="image\_upload" data-form-data="" class="cloudinary-fileupload">
<div class="preview"></div>
<script>var opts = {
timestamp: 1381940936,
callback: http://localhost:3000/cloudinary_cors.html,
signature: 5b90da23063f9f03f8078427411440fe9c1af6fc,
api_key: 'APIKEY'
};
$('#cloudinary-upload').cloudinary_fileupload(opts);
</script>
</body>
</html>
Sorry...that was the wrong sample...
<!DOCTYPE html><html><head><title>User Demo</title><link rel="stylesheet" href="/stylesheets/style.css"><script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script><script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js">
</script><script src="/javascripts/libs/jquery.ui.widget.js">
</script><script src="/javascripts/libs/jquery.iframe-transport.js">
</script><script src="/javascripts/libs/jquery.fileupload.js">
</script><script src="/javascripts/libs/jquery.cloudinary.js">
</script><script src="/javascripts/user.js">
</script></head><body><script>
$.cloudinary.config({cloud_name: 'de3aiolw6',api_key: "799755992284774"});
</script><h1>Upload Test</h1><input type="file" id="cloudinary-upload" data-cloudinary-field="image\_upload" data-form-data="" class="cloudinary-fileupload"><div class="preview"></div><script>
var opts = {
timestamp: "1381941597",
callback: "http://localhost:3000/cloudinary_cors.html",
signature: "c76bc740df464649306cf9433ca353fb279b77b5",
api_key: '799755992284774'
};
$('#cloudinary-upload').fileupload({
formData: opts,
url: "https://api.cloudinary.com/v1_1/de3aiolw6/upload"
});
</script></body></html>
Hi T J
The call to
$('#cloudinary-upload').fileuploadneeds to be inside$(function(){...}).Another option is that
$('#cloudinary-upload').cloudinary_fileuploadshould be used.Let me know if it works for you?
I had figured it out. Was a stupid mistake on my part. Thanks though!
Hello,
Would it be possible to have a complete, working example, ideally with a demo?
It may be just me, but I keep getting confused between the php, BlueImp and Cloudinary file uploads.
I would like to add form info to the meta data (context) & tags before uploading images.
See upload.js: https://gist.github.com/12cbe0d5f0087a50d66c3dd265ec629f
The following doesn't seem to work.
<code>let newContext = 'email=new@test.com|credits=Me New Context';
$('.cloudinary-fileupload')
.cloudinary_fileupload({
dropZone: '#direct_upload',
context: newContext,...</code>
Or, how can we do it using php?
When I load the following dynamically, I get a 401, bad request error:
$email, "credits" => $credit);
echo cl_image_upload_tag('test', array("tags" => "direct_photo_album, testing", "context" => $context, "callback" => $cors_location, "html" => array("multiple" => true)));
?>
Hi Bruce,
Something like the following should do the job:
cl_image_upload_tag("test", array("context" => array("key1" => "value1", "key2" => "value2")));If you're still getting 401 errors please open a support ticket and we'll be happy to look deeper into your specific case.
Why is this information nowhere to be found in Cloudinary's official jQuery documentation? It always seems to be that the information you're looking for is never in Cloudinary's documentation but buried in a support blog post.
Hi Sean,
Thank you for your honest feedback - we do appreciate it. We will most definitely take this into consideration as an improvement for our documentation.
Please sign in to leave a comment.