shuvosd's avatar

Problems with uploading file using Vue.js and Laravel

Vue template (File upload): This input field is generated from another module, Where the from generated by drag and drop input field.

<input type="file" @change="uploadFile(data,$event)" class="custom-file-input" id="validatedCustomFile">

Script Vuejs:

    data () {
        return {
            //baseform
            baseForm: new Form({
                form:this.data ? JSON.parse(this.data.dataForm) : '',
            }),
        }
    },


    methods: {

        uploadFile(data,e){
            let file = e.target.files[0];
            data.value = file;
        },

        // form data submit
        formSubmit() {
          const config = {
            headers: {'Content-Type': 'multipart/form-data'}
          }
          
          let formData = new FormData();
          formData.append('form',JSON.stringify(this.baseForm.form));
          axios.post('/api/order-data',formData, config)
            .then((order)=>{
                //
            }).catch(()=>{
                //
            })
        }
    },

Controller: Here is the controller code

public function store(Request $request)
{
    $formData = json_decode($request->form, true);
    foreach ($formData as $key) {
        if($key['field'] == 'fileUpload') {
            dd($key['value']);
        }
    }
    
}

I am getting empty value after die dump $key['value']

0 likes
2 replies
Wraith's avatar
foreach ($formData as $key => $value) {
        if($key[$value] == 'fileUpload') {
            dd($key['value']);
        }
    }

Please or to participate in this conversation.