Updating DOM after resizing.

Transloadit
1

Archived from the Transloadit support forum. Originally posted on April 1, 2011; details may be outdated, see our docs for current behavior. Original thread

Hi, I am a newbie and still unclear how the demo examples work. Essentially I am looking for way to update the DOM with a resized image after I get the response from transloadit. What is the callback when the form returns from Transloadit with the json data.

The end object is similar to how the demos are done, upload a file and have the return result be displayed as a thumbnail.

I am using the jquery plugin. A simple demo example will be greatly appreciated.

2

Hey dennisyee,

do you want to add the resized image to the DOM after the page refreshes or directly when the jQuery plugin reports back that it has finished processing the image?

In case of the former, the jQuery plugin will attach all results to your form and send them to your backend along with all other form fields. There you can extract the image url from the json and display it on the result page.

In case of the latter you want to check out the jQuery plugin’s onResult event, see http://transloadit.com/docs/configuring-the-jquery-plugin.

Let me know if that helps.

Kind regards,
Tim

3

Oh and in case you mean adding the image on-the-fly … we are going to provide demos for that in the future.

4

I would like to add the image when the plugin reports back with the result and the DOM is updated with the thumbnail. How and where is the form submitted to my server/backup after I get the results back . ( ie. how do I specify the ‘action’ ) since the form already directs to Transloadit. A little confused about that.

I’m running on Groovy Grails framework.

5

To clarify and answer your question, this is all done without page refresh.

6

Thanks for your help. In case anyone else is interested here’s the code

$(document).ready(function() {

  $('#MyForm').transloadit({
              wait:true,
              autoSubmit : false,
              debug: true,                    
              onResult: function( step, result ){
                      //console.log( "result:" + JSON.stringify( result ) );

                      $("#thumbnail").html( "<img src=' " + result.url + "'/>");

              }
  });

});

7

Alright closing this for now.

Let me know if you want to discuss this further. :slight_smile:

Kind regards,
Tim