Cloudinary jQuery Direct Upload issue

3
votes

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?

2
cloudinary

2 Answers

1
votes

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-

0
votes

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>