如果找不到图像，如何显示来自Dropzone.js的上传框| Laravel 5.2

Question

I have a problem with my Profile upload. I am using laravel 5.2, and Im using the Dropzone.js plugin to upload user profile photos. My problem is when I upload a profile photo i set it to maxFilesize 1. So it only uploads 1 photo at a time. BUT, when the upload is done, a user can go back and upload one more photo, so then the user will have 2 photos for their profile picture.

I need to make it so if a user already has a Profile Photo, so the dropzone upload box doesnt show up, until that profile photo is deleted or there is not any photos. Here is what the Dropzone Upload box looks like:

Here is my Dropezone.js script:

<script>
                Dropzone.options.addPhotosForm = {
                     paramName: 'photo',
                     maxFilesize: 2,
                     acceptedFiles: '.jpg, .jpeg, .png, .bmp',
                     maxFiles: 1,
                        // Refresh page when upload is complete.
                        init: function () {
                                this.on("queuecomplete", function (file) {
                                         if (this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0) {
                                            location.reload();
                                         }
                                });
                        }
                }
        </script>

Here is how the photo is shown:

@foreach ($user->photos as $photo)
         <form method="post" action="{{ route('profile.destroy', ['id' => $photo->id]) }}" enctype="multipart/form-data">
             {!! csrf_field() !!}
             <input type="hidden" name="_method" value="DELETE">
             <button type="submit" class="close">&times;</button>
             <img class="ui small circular image" src="/travels/{{ $photo->thumbnail_path }}" alt="" data-id="{{ $photo->id }}">
         </form>
@endforeach

And here is my file upload form:

<form 
    action="/travels/{{ $user->username }}/photos" 
    method="post" 
    class="dropzone" 
    id="addPhotosForm" 
    enctype="multipart/form-data">
        {{ csrf_field() }}
</form>

This is the outcome with 2 or more profile photos which I DONT WANT

Answer 1

I figured it out with 3 jQuery lines

if($('#image').length){
     $('#FormUpload').hide();
}

I added #image to the actual image if there is one and added #Formupload to the actual form upload box, and just checked if the image appears on the page then hide the upload box