Saving blob image in laravel's controller

Hello! In my Laravel 5/vuejs 2.6 I upload image with vue-upload-component and sending requested image blob I try to save it with controller code like :

            if ( !empty($requestData['avatar_filename']) and !empty($requestData['avatar_blob']) ) {
                $dest_image = 'public/' . Customer::getUserAvatarPath($newCustomer->id, $requestData['avatar_filename']);

                $requestData['avatar_blob']= str_replace('blob:','',$requestData['avatar_blob']);
                Storage::disk('local')->put($dest_image, file_get_contents($requestData['avatar_blob']));
                ImageOptimizer::optimize( storage_path().'/app/'.$dest_image, null );
            } // if ( !empty($page_content_image) ) {

As result I have image uploaded, but it is not readable. Source file has 5 Kib, then resulting file has 5.8 Kib and in browser's console I see blobs path as avatar_blob: "blob:http://local-hostels2.com/91a18493-36a7-4023-8ced-f5ea4a3c58af"

Have I to convert my blob some how to save it correctly?

Thanks!

mstdmstd

6 years ago

Level 8

a bit more detailed : In vue file I send request using axios :

               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) => {
                    this.showPopupMessage("Customer Register", 'Customer added successfully ! Check entered email for activation link !', 'success');
alert( "SAVED!!::"+var_dump() )
                }).catch((error) => {
                });

and this.previewCustomerRegister.avatarFile.blob has value: "blob:http://local-hostels2.com/91a18493-36a7-4023-8ced-f5ea4a3c58af" where http://local-hostels2.com is my hosting... I set this value to preview image defined as :

                    <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"
                    >

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...

What I did wrong and which is the valid way ?

mstdmstd

6 years ago

Level 8

I still search for decision. Who use vue-upload-component component files uploading in vuejs with laravel in control ? How do you save blob image uploaded with vue-upload-component component? Please, share working example...

Please or to participate in this conversation.