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?

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