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!
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));
}
});
}
},