QUploader & Laravel sample

CristalT

I’m working in a CMS app made with Laravel. I can’t achieve files uploading by using QUploader component. Has anybody made something similar that could send me an example or some help?

In my code, I have the QUploader component linked to the API route:

<q-uploader url="http://localhost:5000/api/upload" />

And the UploadController.php file, is something like:

class FileController extends Controller
{
    public function upload(Request $request)
    {

        // $request->files return an empty object. I can't figure out
        // how can I get the correct data.

        $uploadedFile = $request->files('file');
        ...
    }
}

vesteves

@CristalT It’s normal. The object wont appear like that… use $request->hasFile('file') to check if has any file in this request.
You can check it too using $request->input('file')->extension() or $request->input('file')->path()

Check this out:
https://laravel.com/docs/5.8/requests#files

metalsadman

I’ve tested something like this on a previous forum issue, though this was pre v1, i’ll just copy paste my code to give you an idea.
frontend:

<template>
  <q-page class="row justify-center">
    <q-uploader
      extensions=".jpg, .png"
      multiple
      :upload-factory="uploadFile"
      ref="uploader"
      auto-expand
      url=""
      stack-label="upload image"
    />
  </q-page>
</template>

<script>
export default {
  data () {
    return {
      uploadPercentage: 0
    }
  },
  methods: {
    uploadFile (file, updateProgress) {
      const fd = new FormData()
      fd.append('file', file)
      updateProgress(0)
      return new Promise((resolve, reject) => {
        this.$axios.post(process.env.api + '/upload',
          fd,
          {
            headers: { 'Content-Type': 'multipart/form-data' },
            onUploadProgress: (progressEvent) => {
              updateProgress(Math.round((progressEvent.loaded / progressEvent.total) * 100) / 100)
            }
          })
          .then(res => {
            resolve(file)
          })
          .catch(err => reject(err))
      })
    }
  }
}
</script>

laravel backend controller:

...
class UploadController extends Controller
{
  ...  
    public function upload(Request $request)
    {

        // $files = $request->file;
        $request->file->storeAs('uploads', uniqid('img_') . $request->file->getClientOriginalName());
        // image will be stored at storage/app/public/uploads
        // return $request;
        // if (!empty($files)) {
        //     foreach ($files as $file) {
        //         Storage::put($file - getClientOriginalName(), file_get_contents($file));
        //         return ['file' => $file];
        //     }
        // }

        // return response()->json([
        //     'request' => $request,
        //     'message' => 'idunno',
        // ]);
    }
}
...
laravel route
Route::post('/upload', 'UploadController@upload');

CristalT

@metalsadman thank you so much! It works fine after a few changes.

metalsadman

@CristalT oh, glad it helped you :).

M.Ryan0208

@metalsadman Thanks it works.

diadal

@metalsadman this now working with the latest q-uploader file not uploading to laravel backend

<q-uploader
        accept="image/*"
        :factory="usefactoryFn"
        label="Select Course Image to Upload"
        multiple
        batch
      />

Nusry

I found an article on quasar uploader with laravel/lumen framework. I think this article will help you on this

https://nsrtech.xyz/quasar-file-upload-with-laravel-api/

You can follow below article if you want to know how to upload multiple files in quasar using laravel/lumen api

https://nsrtechx.com/quasar-multiple-file-upload-with-laravel-api/

No More Posting New Topics!

QUploader & Laravel sample