Cloudinary jQuery Direct Upload issue

Question

I am implementing Cloudinary Jquery Upload. From my file upload webpage, if I surf to another website ( google.com, or any external website), and then click on the back button on the browser into this same file upload page, the upload fails.

The error message I gotten back is (from Firebug):

400 Bad Request {"error":{"message":"Upload preset Must specify upload preset when using unsigned upload”}}

I did not enable unsigned upload on the Cloudinary management console because my intention is a signed upload

This is the JSON data that is created at the backend for data-form-data:

{"timestamp":1409146953,"callback":"http://newappsure.herokuapp.com/vendor/cloudinary/cloudinary_cors.html","signature":"19071a3e822eed51238454e359589f52cccca042","api_key":"224456847515364”}

Below is the javascript and input HTML:

   <script type="text/javascript”>
     $.cloudinary.config({cloud_name:'dashy', api_key:’XXXXXXXXXXXXXXX'});
   </script>
   <input name="file" type="file" id="uploadinput" class="cloudinary-fileupload" data-cloudinary-field="image_upload"
 data-form-data="" ></input>
   <script>
       $.ajax({
             url: '/filer',
             type: 'POST',
             success: function(response){
                    $('#uploadinput').attr('data-form-data', response);
             }
        });
   </script>

This is the Ruby backend that generates JSON:

 post '/filer' do
      ts = Time.now.getutc.to_time.to_i.to_s
      secret="XXXXXXXXXXXXXXXXXXXXXX"
altogether="callback=http://newappsure.herokuapp.com/vendor/cloudinary/cloudinary_cors.html&timestamp="+ts+secret
      sig=Digest::SHA1.hexdigest altogether
      ts = Time.now.getutc.to_time.to_i
      {:timestamp => ts, :callback => "http://newappsure.herokuapp.com/vendor/cloudinary/cloudinary_cors.html", :signature => sig, :api_key =>"XXXXXXXXXXXXXXXX"}.to_json
 end

Please help me understand what did I do wrong?

score 1 · Accepted Answer · answered Aug 30 '14 at 08:11

1

While your solution may work, the more optimal way is to update the upload parameters to call $(...).fileupload({formData: data}) where data is the parameters hash (not JSON serialized). For more information: http://support.cloudinary.com/entries/24950218-Why-is-updating-a-cloudinary-fileupload-field-dynamically-not-working-

answered Aug 30 '14 at 08:11

Itay Taragano

1,901
1
11
12

Can you give me an example of the parameter hash? – Vince Sep 02 '14 at 09:52
You should pass a JSON, for example: `{"timestamp":1409836869,"eager":"t_my_transformation","use_filename":1,"unique_filename":1,"signature":"52f06bd404778454dd6dc6973f6ea0d8ef55ca25","api_key":"219441847515364"}`. Note that you can also use unsigned uploads and use the methods to simplify this task for you. See the following for reference: https://github.com/cloudinary/cloudinary_js/blob/master/js/jquery.cloudinary.js#L687 – Itay Taragano Sep 04 '14 at 20:52
Look slike I still have intermittent problem of not able to upload. Can you help me? The code is here: http://jsfiddle.net/tschew/oxdmvbew/ – Vince Sep 16 '14 at 10:47
I have followed your advise and it works but the problem is that if the page is left there inactive for a few minutes, the signature expires and upload fails. Since I am using file upload({formData:data}) in the document.ready() section, I can't change the formData dynamically unless I ask the user to refresh the page. Is there another way out? – Vince Sep 18 '14 at 02:15
The signature is based on the timestamp and is valid for 1 hour. You should make sure that the signature is being refreshed if the window can stay opened for a long time. If it expires for you after a few minutes, you should verify that the timestamp being given is correct and that your server's clock is correctly set. – Itay Taragano Sep 20 '14 at 18:27

score 0 · Answer 2 · edited May 23 '17 at 12:00

Got it working by forcing the page to reload with the following snippets (ref: https://stackoverflow.com/a/9217531/3781343 and http://www.webdeveloper.com/forum/showthread.php?137518-How-to-refresh-page-after-clicking-quot-Back-quot-button)

<input type="hidden" id="refreshed" value="no">
<script type="text/javascript">
onload=function(){
var e=document.getElementById("refreshed");
if(e.value=="no")e.value="yes";
else{e.value="no";location.reload();}
}
</script>

Cloudinary jQuery Direct Upload issue

2 Answers2