I'm trying to display the result image on the same page after processing it through transloadit assembly. The javascript code seems to be correct, but the image is not showing up on the page. This is the live page where I'm implementing it.
Below is my code, please help !!
<form action="" enctype="multipart/form-data" method="POST">
<input type="file" name="my_file" multiple="multiple" />
</form>
<div id="thumbnail"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//assets.transloadit.com/js/jquery.transloadit2-v2-latest.js"></script>
<script type="text/javascript">
$(function() {
$('form').transloadit({
wait: true,
triggerUploadOnFileSelection: true,
onResult: function(step, result){
if (step=='thumb'){
$("#thumbnail").html( "<img src=' " + result.url + " '/>");
}
},
params: {
auth: { key: "Public_Key" },
steps: {
thumb: {
use: ":original",
robot: "/image/resize",
result: true,
resize_strategy: "pad",
background: "#000000",
format: "jpg",
watermark_url: "http://www.mygreencity.in/images/Pagdi.png",
watermark_size: "75%",
watermark_position: "center",
}
}
}
});
});
</script>
The image is show after upload and processing is complete. However the page reloads. Check param autoSubmit
autoSubmit : Specifies whether to submit the original form automatically once the upload and processing have completed. This is true by default.