Ajax image load after dropzone success event - php

Question

So I am using dropzone.js and I want to reload a particular image after the success event of dropzone.
my controller
public function edit($id)
{
$offer = Offer::find($id);
if(!is_object($offer->getMedia('featimgs')->first())){
$offerfeatimg = '/assets/images/offerfeatimg.jpg';
} else {
$offerfeatimg = $offer->getMedia('featimgs')->first()->getUrl('medium');
}
return view('admin.offers.edit')->with(compact('offer', 'offerfeatimg'));
}
so this is where I pass the image to the view:
<div class="panel-body">
<img src="{{ $offerfeatimg }}" class="img-responsive">
#if($offerfeatimg != '/assets/images/offerfeatimg.jpg')
<div class="removebutton">
Izbrisi sliku
</div>
#endif
<form action="/admin/offer/featimg/{{ $offer->id }}" class="dropzone" id="my-awesome-dropzone">
{!! csrf_field() !!}
<div class="dz-message">Prebacite glavnu sliku za ovu ponudu</div>
</form>
</div>
the view:
so I would want to reload this part via ajax after success dropzone event:
<img src="{{ $offerfeatimg }}" class="img-responsive">
#if($offerfeatimg != '/assets/images/offerfeatimg.jpg')
<div class="removebutton">
Izbrisi sliku
</div>
#endif
Any ideas ?

Answer 1

This is assuming a bit about your javascript setup, including jquery. If the dropzone object is available on the form node, you should be able to do something like this in javascript:
var dz = $('form.dropzone').get(0).dropzone;
dz.on("success", function (file, response) {
var imageSrc = ... // add logic here to determine src from server response
$(".img-responsive").attr('src', imageSrc);
if(imageSrc != '/assets/images/offerfeatimg.jpg') {
$(".removebutton").hide();
}
else {
// you may need to edit your html so that this button exists in order to show it
$(".removebutton").show();
}
});
Or you can set up event handlers like this:
Dropzone.options.myAwesomeDropzone = {
... other options ...,
success: function () {
...
}
};
Take a look at handling dropzone events: http://www.dropzonejs.com/#events

Answer 2

Dropzone.options.myAwesomeDropzone = {
paramName: "file", // The name that will be used to transfer the file
maxFilesize: 2, // MB
parallelUploads: 1,
success: function (file, response) {
var imageSrc = response;
$(".img-responsive").attr('src', imageSrc);
if(imageSrc == '/assets/images/offerfeatimg.jpg') {
$(".removebutton").hide();
} else {
$(".removebutton").show();
}
this.removeAllFiles();
}
};