upload file on s3 with quasar vue (frontend) and laravel 9 (backend) - laravel

Question

I'm building a platform and I need to upload resources (pdf, images etc) on amazon s3 bucket.
Frontend is made with quasar vue, backend with Laravel 9. The idea is to send file from frontend to backend and upload file on s3 with laravel.
The problem is that nothing happens, my s3 bucket remains empty with no errors or exceptions.
I'm not sure if the problem is sending file from frontend to backend or on the upload from laravel to s3 bucket.
I use q-uploader (but I think is not too different with quasar file-picker). Here's frontend code
<template>
<q-page class="q-pa-sm">
<q-uploader :factory="uploadFile"/>
</q-page>
</template>
<script>
import { api } from 'src/boot/axios';
export default {
methods: {
uploadFile(f){
var fileModel = f[0]
const fileData = new FormData()
fileData.append('file', fileModel)
api.post('/api/resources/file', fileData, {
headers: {
'Content-Type': 'multipart/form-data'
}
})
.then(res=>{
console.log(res)
})
}
}
}
</script>
I made my API on api.php (and I'm sure middleware is not the problem)
Route::prefix('resources')->group(function(){
/*
* other APIs
*/
Route::post('/file',[ResourceController::class, 'postResourceFile'])->middleware('roles:1|2|3');
});
In laravel I've got a controller called ResourceController.php with this function
public function postResourceFile(Request $request){
if($request->hasFile('file')){
$file = $request->file('file');
$name=time().$file->getClientOriginalName();
$filePath = 'resources/' . $name;
Storage::disk('s3')->put($filePath, file_get_contents($file));
$response = [
'file' => $file,
];
} else {
$response = [
'message' => 'no file'
];
}
return response($response, 200);
}
In Laravel filesystems.php I didn't change original configuration
's3' => [
'driver' => 's3',
'key' => env('AWS_ACCESS_KEY_ID'),
'secret' => env('AWS_SECRET_ACCESS_KEY'),
'region' => env('AWS_DEFAULT_REGION'),
'bucket' => env('AWS_BUCKET'),
'url' => env('AWS_URL'),
'endpoint' => env('AWS_ENDPOINT'),
'use_path_style_endpoint' => env('AWS_USE_PATH_STYLE_ENDPOINT', false),
],
And here's my .env AWS configuration.
AWS_ACCESS_KEY_ID=myID
AWS_SECRET_ACCESS_KEY=myKey
AWS_DEFAULT_REGION=eu-central-1
AWS_BUCKET=myBucket
AWS_USE_PATH_STYLE_ENDPOINT=false
AWS_URL=http://s3.eu-central-1.amazonaws.com/myBucket
Backend response is
file:{}
but I'm not sure if $file is empty or it'is just a browser problem, because file should be something like blob.
Can someone helps me?
Thanks in advance

Answer 1

File is a blob and cannot be converted to Json easily.
I'm almost sure your code works.
to check that, you can log the file:
Log::debug('file received => ', ['file' => $request->file('file')]);
Double check if laravel is putting the file into s3. I think the way you're doing maybe it's incorrect. The way i do is:
// on the top:
use Illuminate\Http\File;
use Illuminate\Http\Request;
// on the function:
$file = new File($request->file('file'));
$path = Storage::disk('s3')->putFile('resources', $file);
return response()->json(
[
'status' => 'success',
"url" => Storage::url($path),
'size' => Storage::size($path),
'type' => $file->extension()
],
200
);