title: Saving blob image in laravel's controller
body: <p>In my Laravel 5/vuejs 2.6 I upload an image with the vue-upload-component and am sending a requested image blob
  I try to save it with the controller code like :</p>
  
  <pre><code>    if ( !empty($requestData['avatar_filename']) and !empty($requestData['avatar_blob']) ) {
          $dest_image = 'public/' . Customer::getUserAvatarPath($newCustomer-&gt;id, $requestData['avatar_filename']);
  
          $requestData['avatar_blob']= str_replace('blob:','',$requestData['avatar_blob']);
          Storage::disk('local')-&gt;put($dest_image, file_get_contents($requestData['avatar_blob']));
          ImageOptimizer::optimize( storage_path().'/app/'.$dest_image, null );
      } // if ( !empty($page_content_image) ) {
  </code></pre>
  
  <p>As result, I have an image uploaded, but it is not readable.
  The source file has 5 Kib, the resulting file has 5.8 Kib and in the browser's console I see the blobs path as</p>
  
  <pre><code>avatar_blob: "blob:http://local-hostels2.com/91a18493-36a7-4023-8ced-f5ea4a3c58af"
  </code></pre>
  
  <p>Have do I convert my blob to save it correctly?</p>
  
  <p><strong>MODIFIED</strong> :
  a bit more detailed : 
  In vue file  I send request using axios :</p>
  
  <pre><code>               let customerRegisterArray =
                      {
                          username: this.previewCustomerRegister.username,
                          email: this.previewCustomerRegister.email,
                          first_name: this.previewCustomerRegister.first_name,
                          last_name: this.previewCustomerRegister.last_name,
                          account_type: this.previewCustomerRegister.account_type,
                          phone: this.previewCustomerRegister.phone,
                          website: this.previewCustomerRegister.website,
                          notes: this.previewCustomerRegister.notes,
                          avatar_filename: this.previewCustomerRegister.avatarFile.name,
                          avatar_blob: this.previewCustomerRegister.avatarFile.blob,
                      };
                  console.log("customerRegisterArray::")
                  console.log(customerRegisterArray)
  
                  axios({
                      method: ('post'),
                      url: window.API_VERSION_LINK + '/customer_register_store',
                      data: customerRegisterArray,
                  }).then((response) =&gt; {
                      this.showPopupMessage("Customer Register", 'Customer added successfully ! Check entered email for activation link !', 'success');
  alert( "SAVED!!::"+var_dump() )
                  }).catch((error) =&gt; {
                  });
  </code></pre>
  
  <p>and this.previewCustomerRegister.avatarFile.blob has value: "blob:<a href="http://local-hostels2.com/91a18493-36a7-4023-8ced-f5ea4a3c58af" rel="nofollow noreferrer">http://local-hostels2.com/91a18493-36a7-4023-8ced-f5ea4a3c58af</a>"
   where <a href="http://local-hostels2.com" rel="nofollow noreferrer">http://local-hostels2.com</a> is my hosting...
   I set this value to preview image defined as :</p>
  
  <pre><code>            &lt;img
                  class="img-preview-wrapper"
                  :src="previewCustomerRegister.avatarFile.blob"
                  alt="Your avatar"
                  v-show="previewCustomerRegister.avatarFile.blob"
                  width="256"
                  height="auto"
                  id="preview_avatar_file"
              &gt;
  </code></pre>
  
  <p>and when previewCustomerRegister.avatarFile.blob is assigned with uploaded file I see it in preview image.
  I show control with saving function in first topic but when I tried to opened my generated file with kate, I found that it 
  has content of my container file resources/views/index.blade.php...</p>
  
  <p>What I did wrong and which is the valid way ?</p>
  
  <p><strong>MODIFIED BLOCK #2 :</strong>
  I added 'Content-Type' in request </p>
  
  <pre><code>axios({
    method: ('post'),
    url: window.API_VERSION_LINK + '/customer_register_store',
    data: customerRegisterArray,
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  </code></pre>
  
  <p>but with it I got validation errors in my control, as I define control action with request:</p>
  
  <pre><code>public function store(CustomerRegisterRequest $request)
  {
  </code></pre>
  
  <p>and in app/Http/Requests/CustomerRegisterRequest.php :</p>
  
  <pre><code>&lt;?php
  
  namespace App\Http\Requests;
  
  use App\Http\Traits\funcsTrait;
  use Illuminate\Foundation\Http\FormRequest;
  use App\Customer;
  class CustomerRegisterRequest extends FormRequest
  {
      use funcsTrait;
  
      public function authorize()
      {
          return true;
      }
  
      public function rules()
      {
          $request= Request();
          $requestData= $request-&gt;all();
  
          $this-&gt;debToFile(print_r( $requestData,true),'  getCustomerValidationRulesArray $requestData::');
          /* My debugging method to write data to text file 
          and with Content-Type defined above I see that $requestData is always empty
          and I got validations errors
           */
  
          // Validations rules 
          $customerValidationRulesArray= Customer::getCustomerValidationRulesArray( $request-&gt;get('id'), ['status'] );
          return $customerValidationRulesArray;
      }
  }
  </code></pre>
  
  <p>In routes/api.php defined :</p>
  
  <pre><code>Route::post('customer_register_store', 'CustomerRegisterController@store');
  </code></pre>
  
  <p>In the console of my bhrowser I see : <a href="https://imgur.com/a/0vsPIsa" rel="nofollow noreferrer">https://imgur.com/a/0vsPIsa</a>,  <a href="https://imgur.com/a/wJEbBnP" rel="nofollow noreferrer">https://imgur.com/a/wJEbBnP</a></p>
  
  <p>I suppose that something is wrong in axios header ? without 'Content-Type' defined my validation rules work ok...</p>
  
  <p><strong>MODIFIED BLOCK #3</strong></p>
  
  <p>I managed to make fetch of blob with metod like :</p>
  
  <pre><code>            var self = this;
  
              fetch(this.previewCustomerRegister.avatarFile.blob) .then(function(response) {
                  console.log("fetch response::")
                  console.log( response )
  
                  if (response.ok) {
                      return response.blob().then(function(myBlob) {
                          var objectURL = URL.createObjectURL(myBlob);
                          // myImage.src = objectURL;
                          console.log("objectURL::")
                          console.log( objectURL )
  
                          console.log("self::")
                          console.log( self )
  
  
  
                          let customerRegisterArray =
                              {
                                  username: self.previewCustomerRegister.username,
                                  email: self.previewCustomerRegister.email,
                                  first_name: self.previewCustomerRegister.first_name,
                                  last_name: self.previewCustomerRegister.last_name,
                                  account_type: self.previewCustomerRegister.account_type,
                                  phone: self.previewCustomerRegister.phone,
                                  website: self.previewCustomerRegister.website,
                                  notes: self.previewCustomerRegister.notes,
                                  avatar_filename: self.previewCustomerRegister.avatarFile.name,
                                  avatar: objectURL,
                              };
  
                          console.log("customerRegisterArray::")
                          console.log(customerRegisterArray)
  
                          axios({
                              method: 'POST',
                              url: window.API_VERSION_LINK + '/customer_register_store',
                              data: customerRegisterArray,
                              // headers: {
                              //     'Content-Type': 'multipart/form-data'  // multipart/form-data - as we need to upload with image
                              // }
                          }).then((response) =&gt; {
                              self.is_page_updating = false
                              self.message = ''
                              self.showPopupMessage("Customer Register", 'Customer added successfully ! Check entered email for activation link !', 'success');
                              alert( "SAVED!!::")
                          }).catch((error) =&gt; {
  
  
  
  
  
  
  
    self.$setLaravelValidationErrorsFromResponse(error.response.data);
                              self.is_page_updating = false
                              self.showRunTimeError(error, this);
                              self.showPopupMessage("Customer Register", 'Error adding customer ! Check Details fields !', 'warn');
                              // window.grecaptcha.reset()
                              self.is_recaptcha_verified = false;
                              self.$refs.customer_register_wizard.changeTab(3,0)
                          });
  
  
                      });
                  } else {
                      return response.json().then(function(jsonError) {
                          // ...
                      });
                  }
              }).catch(function(error) {
                  console.log('There has been a problem with your fetch operation: ', error.message);
              });
  </code></pre>
  
  <p>In objectURL and self I see proper values : <a href="https://imgur.com/a/4YvhbFz" rel="nofollow noreferrer">https://imgur.com/a/4YvhbFz</a></p>
  
  <p>1) But checking data on server in laravel's control I see the same values I had at start of my attemps to upload image:</p>
  
  <p>[avatar_filename] => patlongred.jpg
  [avatar] => blob:<a href="http://local-hostels2.com/d9bf4b66-42b9-4990-9325-a72dc8c3a392" rel="nofollow noreferrer">http://local-hostels2.com/d9bf4b66-42b9-4990-9325-a72dc8c3a392</a></p>
  
  <p>Have To manipulate with fetched bnlob in some other way ?</p>
  
  <p>2) If I set :</p>
  
  <pre><code>  headers: {
      'Content-Type': 'multipart/form-data'
    }
  </code></pre>
  
  <p>I got validation errors that my data were not correctly requested...</p>
  
  <p>?</p>