title: Dropzonejs + Image Intervention php return value is random html codes
body: <p>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. </p>
  
  <p>below are my codes.</p>
  
  <p>Route:</p>
  
  <pre><code>Route::post('uploadimage', 'ProductController@uploadImage');
  </code></pre>
  
  <p>Controller:</p>
  
  <pre><code>public function uploadImage(Request $request){
  
         //create folder
          $products = new Products();
  
          $args['foldername'] = $request-&gt;input('folname');
  
          $products-&gt;createDirectory($args);
  
          $origName = $request-&gt;file('file')-&gt;getClientOriginalName();
  
  
  
          $request-&gt;file('file')-&gt;move(public_path().env('FOLDER_NAME_IMAGES').$args['foldername'].'/', $origName );
  
          $this-&gt;createThumbnail($request);
  
      }
  
  public function createThumbnail($request){
  
      $origName = $request-&gt;file('file')-&gt;getClientOriginalName();
      $image = new Image();
      $file = $request-&gt;file('file');
      $objImage = $image-&gt;make($file-&gt;getRealPath());
      //create thumbnail
      $objImage-&gt;save(public_path().env('FOLDER_NAME_IMAGES').'fad611c8-56c7-4a7a-8af9-a2908267f08f'.'/'.$origName)
          -&gt;resize(200,200)            // -&gt;greyscale()
          -&gt;save(public_path().env('FOLDER_NAME_IMAGES').'fad611c8-56c7-4a7a-8af9-a2908267f08f'.'/'.'thumb-'.$origName);
  
  }
  </code></pre>
  
  <p>JS code:</p>
  
  <pre><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;
          });
  </code></pre>
  
  <p>HTML code:</p>
  
  <pre><code>&lt;div id="actions"&gt;
          &lt;div class="btn btn-success fileinput-button"&gt;
              &lt;span&gt;Add pictures...&lt;/span&gt;
          &lt;/div&gt;
           &lt;button type="reset" class="btn btn-warning cancel"&gt;
              &lt;span&gt;Remove all&lt;/span&gt;
           &lt;/button&gt;
      &lt;/div&gt; &lt;!--&lt;div id="actions"&gt;--&gt;
  
  
      &lt;input type="hidden" name="pic_count" id="pic_count" value="0"&gt;
      &lt;span dz-max-files-reached &gt;&lt;/span&gt;
      &lt;br&gt;&lt;br&gt;
      &lt;ul class="list-inline"&gt;
          &lt;li&gt;&amp;nbsp;&lt;/li&gt;
          &lt;li id="previews"&gt;
                  &lt;div id="template"&gt;
                      &lt;span class="preview"&gt;&lt;img data-dz-thumbnail /&gt;&lt;/span&gt;
                      &lt;span class="name" data-dz-name&gt;&lt;/span&gt;
                      &lt;strong class="error text-danger" data-dz-errormessage&gt;&lt;/strong&gt;
                      &amp;nbsp;&amp;nbsp;&amp;nbsp;
                      &lt;span class="pull-right"&gt;
                          &lt;button data-dz-remove class="btn btn-danger delete"&gt;
                          &lt;span&gt;Delete&lt;/span&gt;
                          &lt;/button&gt;
                      &lt;/span&gt;
                      &lt;div style="height: 10px;"&gt;&lt;/div&gt;
                  &lt;/div&gt;
          &lt;/li&gt;
           &lt;li&gt;&amp;nbsp;&lt;/li&gt;
      &lt;/ul&gt;
  </code></pre>
  
  <p>Result:</p>
  
  <p><a href="https://i.stack.imgur.com/HQ0M0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HQ0M0.png" alt="enter image description here"></a></p>
  
  <p>The <em>createThumbnail</em> method is working when i tried it separately.</p>