Running a Function When AJAX Finishes

Running a Function When AJAX Finishes

I am using some jQuery code to resize images client-side and send them to Amazon S3 via jQuery File Upload ( https://github.com/blueimp/jQuery-File-Upload/):

I want to first upload a one size file to S3, get the url back then upload the same photo again in thumbnail size.

I am using Ruby on Rails (the 'get' is getting presigned credentials via controller action from S3) .  My knowledge of javascript is not very strong so please correct my terminology or point to my a how-to for what I am missing.

Given the following code, how do I rewrite it to run the code starting at 
    
    $.get( "/presign", function( s3params ) 

a second time once fileupload is done?  
 
I tried to create a function thumbProcess() that I call within 'done.'  I am not sure if I setup the function correctly or if I am not calling it correctly but nothing seems to happen.  

This code uploads the first photo but does not call the function for the thumbnail processing.  What do I need to change?

    $(document).on('ready page:load', function () {

      $('.direct-upload')
        .on('cocoon:after-insert', function(e, photo) {

         // run this part a second time for the same file 
         // with different parameters after it is done running first time
         $.get( "/presign", function( s3params ) {
           $('.direct-upload').find("input:file").each(function(i, elem) {
      
             var fileInput    = $(elem);
             fileInput.fileupload({
               fileInput:       fileInput,
               url:             " https://" + s3params.url.host,
               type:            'POST',
               ...

               progressall: function (e, data) {
                ...
               },
              start: function (e) {
                ...
              },
              done: function(e, data) {
                ...
                thumbProcess();
              },
              fail: function(e, data) {
                ...
              }

             }, 'json'); //fileupload
           }); //each 
         }); //presign call

    function thumbProcess() {
         $.get( "/presign", function( s3params ) {
           $('.direct-upload').find("input:file").each(function(i, elem) {
      
             var fileInput    = $(elem);
             fileInput.fileupload({
               fileInput:       fileInput,
               url:             " https://" + s3params.url.host,
               type:            'POST',
               ...

               progressall: function (e, data) {
                ...
               },
              start: function (e) {
                ...
              },
              done: function(e, data) {
                ...
              },
              fail: function(e, data) {
                ...
              }

             }, 'json'); //fileupload
           }); //each 
         }); //presign call
    }; //thumb function

      });    // function cocoon
    });    // page ready  
    • Topic Participants

    • sean