title: Save an image file in folder using jquery in YII2
body: <p>I have an update form where i also have preview option. My form is as below:</p>
  
  <pre><code>&lt;div class="whyyour-form"&gt;
  
          &lt;?php $form = ActiveForm::begin(['options' =&gt; ['enctype' =&gt; 'multipart/form-data']]); ?&gt;
  
          &lt;?= $form-&gt;field($model, 'heading')-&gt;textInput([]) ?&gt;
  
          &lt;?= $form-&gt;field($model, 'image')-&gt;fileInput();?&gt;
          &lt;div class="myimage"&gt;&lt;?php if(isset($model-&gt;image) &amp;&amp; !$model-&gt;isNewRecord) {
              echo Html::img(\yii\helpers\Url::to($baseUrl.'/uploads/'.$model-&gt;image),['class' =&gt; 'image','width'=&gt;200]);}?&gt;
          &lt;/div&gt;
          &lt;?= $form-&gt;field($model, 'content')-&gt;textarea(['rows' =&gt; 10]) ?&gt;
  
          &lt;div class="form-group"&gt;
              &lt;?= Html::submitButton($model-&gt;isNewRecord ? 'Save' : 'Save', ['class' =&gt; $model-&gt;isNewRecord ? 'btn mybtn' : 'btn mybtn']) ?&gt;
               &lt;?= Html::button('Preview',['id' =&gt; 'preview','class' =&gt; 'btn mybtn']);  ?&gt;
          &lt;/div&gt;
  
          &lt;?php ActiveForm::end(); ?&gt;
  
      &lt;/div&gt;
  </code></pre>
  
  <p>On click of preview, I'm using Jquery to get the entered data. But when I have problem in getting the image and storing it into folder.
  My Jquery is as below:</p>
  
  <pre><code>&lt;script&gt;
      $( document ).ready(function() {
  
          $('#w0').on("click", function(event) {
              $form = $(this); //wrap this in jQuery
             id = $form.attr('action');
             lastChar = id.substr(id.length - 1); 
          });
          $('#preview').click(function() {
  
              var img =$("#whyyour-image")[0].files[0]; alert(img);
  
              var tagln = $("#whyyour-heading").val();
              tinyMCE.triggerSave();
              var des =$('#whyyour-content').val();alert(des);
              $.ajax({ 
                  method: "POST",
                  url:"&lt;?php echo Yii::$app-&gt;urlManager-&gt;createAbsoluteUrl(['whyyour/preview'])?&gt;",
                  data: { id : lastChar, tag : tagln , description : des },
                  success:function(data) {
  
                  }
              });
          setTimeout(function() {
              validateForm();
          },1000);
          }); 
        function validateForm() {
                  var url = 'http://localhost/yourcms/your/coststructure.php?id='+lastChar;
                       window.open(url);
               };
          });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>All I receive when I get the image file is [Object-File]. how to save it in the folder using Jquery?
  My preview action is as below:</p>
  
  <pre><code> public function actionPreview()
       {
  
         $model = $this-&gt;findModel($_REQUEST['id']);
          if($model){
              if(isset($_REQUEST['tag']) &amp;&amp; !empty($_REQUEST['tag']) &amp;&amp; isset($_REQUEST['description']) &amp;&amp; !empty($_REQUEST['description']) ){
                  $model-&gt;previewHeading= $_REQUEST['tag'];
                  $model-&gt;previewContent = $_REQUEST['description'];
                  if($model-&gt;save()) {
                        \Yii::$app-&gt;getSession()-&gt;setFlash('error', 'Product(s) Removed Successfully');
                  } else {
                      return $this-&gt;render('update', [
                          'model' =&gt; $model,
                      ]);
                  }
          } else {
              return $this-&gt;render('update', [
                  'model' =&gt; $model,
              ]);
          }
       }
       }
  </code></pre>
  
  <p>Please Suggest. Any suggestions would be greatly appreciated.</p>