File upload to Laravel



  • I want to post an excel file which is on my local drive into a Laravel app. I have tested the Laravel API through Postman and even through excel’s vbs script. So the API doesn’t seem to be the issue. But through Quasar all I get is a Not Updated response from Laravel. I’ve seen a couple of similar queries on this forum where people are having issues with multi-part forms and Quasar, and no answers to those queries. Seems a like a trend…?

    Here is my Javascript file:

    import Pusher from 'pusher-js'
    import { PythonShell } from 'python-shell'
    import axios from 'axios'
    const FormData = require('form-data')
    const fs = require('fs')
    const path = require('path')
    
    const options = {
      // mode: 'text',
      // pythonPath: 'path/to/python',
      // pythonOptions: ['-u'], // get print results in real-time
      scriptPath: path.join(__dirname, '/../rpa')
      // args: ['value1', 'value2', 'value3']
    }
    
    const exportDir = 'C:\\TEMP\\TFMCH\\'
    
    export const rpa = {
    tfmch_LX02 (warehouse, filePath, truncate) {
        console.log('Updating LX02 on TFMCH')
        const URL = 'http://localhost/tfmch_LARAVEL/public/api/' + 'rpa/lx02'
        const formData = new FormData()
        formData.append('lx02', fs.createReadStream(filePath))
        formData.append('truncate', truncate)
        const formConfig = {
          headers: { 'Content-Type': 'multipart/form-data' }
        }
        console.log(URL)
        console.log(fs.createReadStream(filePath))
        // console.log(filePath)
        // console.log(formData)
        // console.log(formConfig)
    
        axios.post(URL, formData, formConfig)
          .then((response) => {
            console.log(response.data)
            // if (warehouse === 805) {
            //   rpa.sap_LX02_wh(804, false)
            // }
          })
          .catch((e) => {
            console.log(e)
            // console.log('error')
          })
      }
    }
    

    And this is my Laravel API:

    // import lx02
    Route::post('import/lx02', function(Request $request){
    
        ini_set('max_execution_time', 300);
    
        // dd($request->lx02);
        // return response()->json($request->lx02); 
    
        if($request->hasFile('lx02')){
    
            if ($request->truncate) {
                LX02::query()->truncate();
            }
            
            Excel::import(new LX02Import, request()->file('lx02'));
            
            $config = new Upload;
            $config->table_name = 'LX02';
            $config->save();
    
            // $deletedRows = lx02::where('sloc', 'LIKE', 'S%')->delete();
    
            return response()->json("Updated"); 
        }
        return response()->json("Not Updated"); 
    });
    


  • @aquinch nothing to do with quasar, go to axios docs and see how to properly do it. Also check out this post https://forum.quasar-framework.org/topic/6468/using-qfile-with-laravel-7-example.



  • @metalsadman, thanks for the comment but not very helpful though. I have already done that and that’s why I’m posting a question here. I can’t seem to see the diference from the example you’ve posted to mine - although I would assume there could be one hence the help request.



  • @aquinch try to debug and compare the requests in Laravel send by Postman( works) and Axios(not working). Must be some difference.

    Or build your app around the working example… you can figure out later what’s the difference.

    The answer will be found in Axios not Quasar…



  • @dobbel, I’ve tried with plain javascript XHR and it also doesn’t work. I’ve used form-data on both tests, so there could be something there.



  • I’ve got it working by using Quasar’s file picker instead of the fs.createReadStream, so that seems to be the issue. But I can’t figure out why it’s not working:

    <template>
      <div class="q-pa-md q-gutter-sm">
        <q-btn color="purple" label="IW73" @click='runIW73' />
        <q-btn color="primary" label="LX02" @click='runLX02' />
        <q-file v-model="model" label="Standard" />
        <q-btn color="primary" label="LX02 Upload" @click='lx02Upload' />
      </div>
    </template>
    
    <script>
    import { rpa } from 'src/scripts/rpa'
    import FormData from 'form-data'
    const fs = require('fs')
    
    export default {
      name: 'tfmch_updates',
      data () {
        return {
          model: null
        }
      },
      methods: {
        runIW73 () {
          console.log('Running test.py')
          rpa.sap_IW73()
        },
        runLX02 () {
          console.log('Running LX02')
          rpa.sap_LX02()
        },
        lx02Upload () {
          console.log('LX02 Upload')
          const data = new FormData()
          data.append('truncate', 'true')
          data.append('lx02', fs.createReadStream('C:/Users/Ingo/Downloads/LX02_805_2020726_94611.xlsx')) // <- NOT WORKING
          const config = {
            method: 'post',
            url: 'http://localhost/tfmch_LARAVEL/public/api/import/lx02',
            headers: { 'Content-Type': 'multipart/form-data' },
            data: data
          }
          this.$axios(config)
            .then((response) => {
              console.log(JSON.stringify(response.data))
            })
            .catch((error) => {
              console.log(error)
            })
        }
      }
    }
    
    </script>
    


  • @aquinch Good you found a work a round.

    Something is wrong with the request. I often use something like
    https://postb.in to intercept and debug my requests.



  • @dobbel , I don’t think the issue is on the request but on electron’s access to the file system through the fs library.



  • @aquinch
    Then createReadStream should give an error

     let stream = fs.createReadStream(fileName);
     stream.on("error", err => console.log(err));
     data.append('lx02', stream ) // <- NOT WORKING
    

    found that here:
    https://www.codota.com/code/javascript/functions/fs/createReadStream



  • I don’t get any errors, but Laravel tells me that the lx02 param is being passed as a String instead of a file object:

          const stream = fs.createReadStream('C:/Users/Ingo/Downloads/LX02_805_2020726_94611.xlsx')
          stream.on('error', err => console.log(err))
          data.append('lx02', stream)
    

Log in to reply