PHP Vue form formData 60: input text textarea file using ajax (axios)
Tags: php, vue, form, axios
Published: 2019-12-17 18:11:35

<hr />

<center>Happy Coding</center>

<hr />

Add external script in head tag.
First for vue, and second for axios ajax.

    <head>

        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.js"></script>

    </head>

In body, add div tag with id="myApp" for virtual DOM Vue

        <div id="myApp" >        

            <!-- v-on:submit.prevent -->
            <form method="post" action="process.php" @submit="submit" ref="formHTML" >

                Firstname: <input type="text" name="firstname" v-model="form.firstname" />
                <br />

    			Lastname: <input type="text" name="lastname" v-model="form.lastname" />
                <br />

                Description: <textarea name="description" v-model="form.description" rows="10" cols="50" ></textarea>
                <br />

                File Upload: <input type="file" name="upload" v-model="form.upload" /><br />
    			Preview: <img src="#" />
                <br />

    			<hr />

    			<input type="submit" value="Submit" />

            </form>

Script Vue

        <script>

            let vm = new Vue({

                el: "#myApp",

                data: {
                    form: {},
                    result: {}
                },

                methods: {

                    submit: async function (event) {

                        event.preventDefault();


                        var formHTML = event.target; // this.$refs.formHTML

    					console.log( formHTML ); // formHTML element


                        // https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects
    					var formData = new FormData( formHTML );

    					console.log( formData );


                        // https://github.com/axios/axios

                        /* AJAX request */
                        this.ajax( formHTML, formData ); // ajax( form, data, destination = null )

                    },

                    ajax: async function ( form, data, destination = null ) {

                        await axios( {

                            method: form.method,
                            url: form.action,

                            data: data,

                            config: {
                                headers: { "Content-Type": "multipart/form-data" }
                            }

                        } )

                        /* handle success */
                        .then( result => {

                            this.result = result.data;

                            console.log(result);
                            console.log(result.data);

                        } )

                        /* handle error */
                        .catch( error => {

                            console.error(error)

                        } );

                    }

                }

            });

        </script>

add onchange event in input with file type, then display it with img tag

		<script>

			/* preview image */
			document.querySelector( "input[type='file']" ).addEventListener( "change", function () {

				var preview = document.querySelector( "img" );
				var file    = document.querySelector( "input[type='file']" ).files[0];
				var reader  = new FileReader();

				reader.addEventListener( "load", function () {
					preview.height = 100;
					preview.title  = file.name;
					preview.src    = reader.result;
				}, false );

				if (file)
				{
					reader.readAsDataURL(file);
				}

				console.log( reader );

			} );

		</script>

<hr />

process.php

    $data = array(
        "post"  => $_POST,
        "files" => $_FILES
    );

    var_dump($data);

<hr />

Demo <a href="https://repl.it" >repl.it</a>

<ul>
  <li><a href="https://repl.it/@antelove19/PHP-Vue-form-formData-60" >Editor</a></li>
  <li><a href="https://PHP-Vue-form-formData-60.antelove19.repl.co" >Live</a></li>
</ul>

<hr/>

<center>Thank for reading :)</center>

<hr/>