Dropzonejs + Image Intervention php return value is random html codes

My upload code is working good using dropzonejs, and my next task is to create a thumbnail for the image that was uploaded. And so I've used Image Intervention and I was able to create a thumbnail, the only problem I have is when I try to combine the two task in one method, dropzonejs is returning a bunch of html codes. and well, actually everytime I put a return statement in my UploadImage method it returns random html codes. I have read the documentation of dropzonejs and I don't have an idea where the codes coming from. any advice is appreciated. thank you in advance for any help and suggestions.

below are my codes.

Route:

Route::post('uploadimage', 'ProductController@uploadImage');

Controller:

public function uploadImage(Request $request){

       //create folder
        $products = new Products();

        $args['foldername'] = $request->input('folname');

        $products->createDirectory($args);

        $origName = $request->file('file')->getClientOriginalName();



        $request->file('file')->move(public_path().env('FOLDER_NAME_IMAGES').$args['foldername'].'/', $origName );

        $this->createThumbnail($request);

    }

public function createThumbnail($request){

    $origName = $request->file('file')->getClientOriginalName();
    $image = new Image();
    $file = $request->file('file');
    $objImage = $image->make($file->getRealPath());
    //create thumbnail
    $objImage->save(public_path().env('FOLDER_NAME_IMAGES').'fad611c8-56c7-4a7a-8af9-a2908267f08f'.'/'.$origName)
        ->resize(200,200)            // ->greyscale()
        ->save(public_path().env('FOLDER_NAME_IMAGES').'fad611c8-56c7-4a7a-8af9-a2908267f08f'.'/'.'thumb-'.$origName);

}

JS code:

var previewNode = document.querySelector("#template");
            previewNode.id = "";
            var previewTemplate = previewNode.parentNode.innerHTML;
            previewNode.parentNode.removeChild(previewNode);

        var myDropzone = new Dropzone(document.body,
        {
            url: "/uploadimage",
            thumbnailWidth: 80,
            thumbnailHeight: 80,
            parallelUploads: 10,
            previewTemplate: previewTemplate,
            clickable: ".fileinput-button",
            previewsContainer: "#previews",
            maxFiles: 10,
            maxFilesize: 200, //  MB
            acceptedFiles: "image/*"
        });

        myDropzone.on("sending", function(file,xhr,formData) {
            // Show the total progress bar when upload starts
            var folname = document.getElementById('folname').value;
            formData.append('folname',folname);
        });

        document.querySelector("#actions .cancel").onclick = function() {
            myDropzone.removeAllFiles(true);
        };

        myDropzone.on("removedfile", function(file,xhr,formData) {
            var file_name = file.name; //filename of image

            var folname = document.getElementById('folname').value;

            console.log(folname);
            console.log(file_name);

            $.ajax({
                type: 'POST',
                url: '/deleteimage',
                data: { 'filename': file_name,'folname': folname },
                success: function(report) {
                    console.log(report);
                },
                error: function(report) {
                    console.log(report);
                }
            });
        });

        myDropzone.on("addedfile", function(file) {
            // Hookup the start button
            //get elementbyid set value to previous + 1
            var val_pic_count = document.getElementById('pic_count').value;
            document.getElementById("pic_count").value = Number(val_pic_count) + 1;
        });

HTML code:

<div id="actions">
        <div class="btn btn-success fileinput-button">
            <span>Add pictures...</span>
        </div>
         <button type="reset" class="btn btn-warning cancel">
            <span>Remove all</span>
         </button>
    </div> <!--<div id="actions">-->


    <input type="hidden" name="pic_count" id="pic_count" value="0">
    <span dz-max-files-reached ></span>
    <br><br>
    <ul class="list-inline">
        <li>&nbsp;</li>
        <li id="previews">
                <div id="template">
                    <span class="preview"><img data-dz-thumbnail /></span>
                    <span class="name" data-dz-name></span>
                    <strong class="error text-danger" data-dz-errormessage></strong>
                    &nbsp;&nbsp;&nbsp;
                    <span class="pull-right">
                        <button data-dz-remove class="btn btn-danger delete">
                        <span>Delete</span>
                        </button>
                    </span>
                    <div style="height: 10px;"></div>
                </div>
        </li>
         <li>&nbsp;</li>
    </ul>

Result:

The createThumbnail method is working when i tried it separately.

Solution

Okay, found the problem.It's the sequence of my methods and most importantly the variable that is being passed to Intervention object is wrong.

so basically the problem is I was trying to save a file that has already been moved.the createThumbnail method should go first before the saving or moving of the original file.

correct code below.

public function uploadImage(Request $request){

       //create folder
        $products = new Products();

        $args['foldername'] = $request->input('folname');

        $products->createDirectory($args);

        $origName = $request->file('file')->getClientOriginalName();

        $this->createThumbnail($request);    

        $request->file('file')->move(public_path().env('FOLDER_NAME_IMAGES').$args['foldername'].'/', $origName );



    }

and also I found out that in my createThumbnail method, it's not accepting the value of the getRealPath() method.

previous code:

$objImage = $image->make($file->getRealPath());

the right way is to just pass the $file variable

correct code:

$file = $request->file('file');
$objImage = $image->make($file);

and also for the random html codes. it's not random, I just missed reading the bottom part of the codes it's basically the html codes of laravel error page. problem solved.