stargatesg1's avatar

File Upload with Dropzonejs and Laravel 5.3

When I upload the file using postman to test and see if the API is working. It works but when uploading with vue-dropzone it doesn't work. Here is my code. I can drag the file no problem and it appears but doesn't save it to the server. Now the other question. Does the form have to have a file upload component for the back-end to work?

Upload form code


<template>
    <div class="content-grid mdl-grid">
        <div class="mdl-grid">
            <div class="mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet">


                <form action="#" @submit="storeTrack(track)" v-on:submit.prevent autocomplete="false" enctype="multipart/form-data">


                    <h3>File</h3>


                   <dropzone id="fileDropZone"  url="api/track/upload" options="{headers:{'Token':{{tokenVal}}}}"></dropzone>



                    <!-- Raised button with ripple -->
                    <div class="mdl-textfield mdl-js-textfield" >
                        <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
                            Add
                        </button>

                    </div>
                </form>


            </div>
            <div class="mdl-cell mdl-cell--4-col mdl-cell--6-col-tablet"></div>
            <div class="mdl-cell mdl-cell--2-col mdl-cell--4-col-phone"></div>
        </div>


    </div>

</template>

<script>
    var data='';
    export default{

        data: function () {
            return {
                tkn:''
            }
        },

        actions: {

        },


        events: {
            'vdropzone-success': function (file) {
                console.log('A file was successfully uploaded' + file);
            }
        },

        methods:{



        },

        ready: function () {
            


        }



    }
</script>

Laravel Returns the following error

FatalErrorException in TracksController.php line 103: Call to a member function store() on null. Looks like the filename is null.

API Laravel Code

 /*Upload File  Controller*/
    public function uploadFile(){
        $file = request()->file('fileDropZone');
        $file->store('tracks');

        //return $file->getFilename();
    }

Route

 /*Upload files */
    Route::post('track/upload',[
        'uses' => 'TracksController@uploadFile'
    ]);

Now this upload all works in postman so not sure why it isn't working in the app. In case here are my dependencies.

{
  "private": true,
  "dependencies": {
    "@websanova/vue-auth": "^1.5.1-beta",
    "babel-core": "^6.17.0",
    "babel-eslint": "^7.0.0",
    "babel-loader": "^6.2.5",
    "babel-plugin-transform-runtime": "^6.12.0",
    "babel-preset-es2015": "^6.16.0",
    "babel-preset-stage-2": "^6.0.0",
    "bootstrap-sass": "^3.3.7",
    "css-loader": "^0.23.0",
    "dropzone": "^4.3.0",
    "gulp": "^3.9.1",
    "jquery": "^3.1.0",
    "laravel-elixir": "^6.0.0-9",
    "laravel-elixir-vue-2": "^0.2.0",
    "laravel-elixir-webpack-official": "^1.0.2",
    "lodash": "^4.16.2",
    "material-design-lite": "*",
    "path": "^0.12.7",
    "style-loader": "^0.13.0",
    "vue": "^1.0.26",
    "vue-hot-reload-api": "^2.0.6",
    "vue-html-loader": "1.2.3",
    "vue-loader": "8.5.4",
    "vue-mdl": "^0.9.4",
    "vue-resource": "^1.0.3",
    "vue-router": "^0.7.13",
    "vue-strap": "^1.0.11",
    "vue-style-loader": "^1.0.0",
    "vuex": "^1.0.0-rc.2",
    "webpack": "^1.12.2",
    "webpack-dev-server": "^1.16.1"
  },
  "devDependencies": {
    "babel-core": "^6.17.0",
    "babel-loader": "^6.2.5",
    "babel-preset-es2015": "^6.16.0"
  }
}

0 likes
1 reply
stargatesg1's avatar

So I figured it out it turns out that the request file needs to be file. Here is the working back-end code

  /*Upload File */
    public function uploadFile(Request $request){

        $file = $request->file('file');
        $file->store('tracks');


       return $file->getFilename();
    }

Please or to participate in this conversation.