QUploader & Laravel sample



  • 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');
            ...
        }
    }
    
    


  • @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



  • 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');
    


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



  • @CristalT oh, glad it helped you :).


Log in to reply