1

i'm trying to get files from storage folder and converting them into base64 in vue.js. i'm using below method, But it seems not working.

public function getImages()
    {
        $filesToReturn = [];
        $files = File::files(storage_path() . "/app/record_keeper");
        foreach ($files as $file) {
            array_push($filesToReturn, $file->getRealPath());
        }
        return response()->json(['files' => $filesToReturn], $this->response_status_code, 200);
    }

returned file urls

{"files":["/home/Project/vue_image_previewer/storage/app/record_keeper/1.jpeg","/home/Project/vue_image_previewer/storage/app/record_keeper/2.jpeg"]}

in vue js

data() {
    return {
      imageUrls: [],
      images: [],
      img_id: 0,
      currentIndex: 0,
      savedImages: [],
    }
  },

methods: {
 async getAllImagesById() {
       await this.axios.get('/aaa-get-images').then(response => {
       this.savedImages = response.data.data;
       self.savedImages.forEach(function (url) {
       this.toDataUrl(url);
       });
      },
toDataUrl(url) {
    let self = this;
    var xhr = new XMLHttpRequest();
    xhr.onload = function() {
        var reader = new FileReader();
        reader.onloadend = function() {
             self.imageUrls.push({
            file: reader.result,
          });
        }
        reader.readAsDataURL(xhr.response);
    };
    xhr.open('GET', url);
    xhr.responseType = 'blob';
    xhr.send();
}
}

where is the problem? Thank you!

here is the result. enter image description here

madusanka
  • 163
  • 1
  • 13

2 Answers2

0

You are getting the relative path of the image file. XMLHttpRequest cannot read the image like that. You should return the image URL like http://somedomain.com/storage/image.jpg from the laravel getImages() method.

Harsha Basnayake
  • 4,565
  • 3
  • 17
  • 23
  • there is a problem in vuejs function. it's not converting correctly. i'll attach a screenshot. it supposed mime type to be data:image/jpeg;base64, not data:text/html;base64, – madusanka Sep 24 '20 at 04:22
  • @madusanka can you console.log your "url" variable in toDataUrl function. and comment it out the result here. – Harsha Basnayake Sep 24 '20 at 08:19
0

i fixed it my own. had to change both backend and frontend.

fileSystem.php

'my_folder' => [
            'driver' => 'local',
            'root' => storage_path('app/public/uploads/my_folder')
        ],

controller method

public function getImages()
    {
        $filesToReturn = [];
        $files = File::files(storage_path() . "/app/public/uploads/my_folder");
        foreach ($files as $file) {
            $fileName = basename($file);
            $file = Storage::url('uploads/my_folder/' . $fileName);
            array_push($filesToReturn, url($file));
        }
        return $this->apiResponse(['files' => $filesToReturn], $this->response_status_code, 200);
    }

frontend method

 async convertUploadedFilesToBase64(savedImages) {
            let self = this;
            for (let i = 0; i < savedImages.length; i++) {
                fetch(savedImages[i])
                    .then(res => res.blob())
                    .then(blob => {
                        let reader = new FileReader();
                        reader.readAsDataURL(blob);
                        reader.onloadend = function () {
                            let base64String = reader.result;
                            self.imageUrls.push({
                                file: base64String,
                            });
                            console.log('Base64 String - ', base64String);
                            console.log('Base64 String without Tags- ', base64String.substr(base64String.indexOf(', ') + 1));
                        }
                    });
            }
        },
madusanka
  • 163
  • 1
  • 13