Vue vform File upload

user_2252356 0
Viewed 3152

I have form modal which switches between Edit and Create Post I need to upload a image and submit the form. There is am example to upload an image only field. Here I need to submit the file with other form fields

<form @submit.prevent="editmode ? updatePost() : createPost()">
<div class="modal-body">
     <div class="form-group">
        <input v-model="form.title" id="title" type="text" name="title"
            placeholder="Title"
            class="form-control" :class="{ 'is-invalid': form.errors.has('title') }">
        <has-error :form="form" field="title"></has-error>
    </div>


     <div class="form-group">
        <input v-model="form.featured" id="featured" type="file" name="featured"
            placeholder="Featured Image" @change="selectFile"
            class="form-control" :class="{ 'is-invalid': form.errors.has('featured') }">
        <has-error :form="form" field="featured"></has-error>
    </div>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
    <button v-show="editmode" type="submit" class="btn btn-success">Update</button>
    <button v-show="!editmode" type="submit" class="btn btn-primary">Create</button>
</div>
</form>

Here is the script I am calling to upload image file. I am using this.form.post('api/post') to post the data. How I need to submit multipart/form-data within the script

     export default {
    data() {
    },
    methods: {
    selectFile(e) {
        const file = e.target.files[0];
        this.form.featured = file;
    },
       createPost(){
            this.$Progress.start();
            this.form.post('api/post')
            .then(()=>{

                $('#addNew').modal('hide')

                this.$Progress.finish();

            })
            .catch(()=>{

            })
        }
laravel vue.js
1 Answers

With vform upload example you can upload files and still pass along other fields.

You need imported extra library call 'objectToFormData.js', To convert your object to FormData.

This should be work.

  1. You download the objectToFormData.js to local file put at /resources/js/objectToFormData.js

  2. in your app.js file add the following code.

    import objectToFormData from "./objectToFormData"; window.objectToFormData = objectToFormData;

  3. change your code as below, need to change from this.form.post to this.form.submit to adding the transformRequest.

    export default {
    data() {
},
methods: {
selectFile(e) {
    const file = e.target.files[0];
    this.form.featured = file;
},
   createPost(){
        this.$Progress.start();
        this.form.submit('post','api/stock-import', {

            // Transform form data to FormData
            transformRequest: [function (data, headers) {
                return objectToFormData(data)
            }]
        }).then(()=>{

            $('#addNew').modal('hide')

            this.$Progress.finish();

        })
        .catch(()=>{

        })
    }
user_1292090
Related