Why this upload component doesn’t show the result(Vue)

Hello,

I have written this component to upload files. I want when it tries to upload a file shows the: uploading, and at the end, shows the result. It uploads well but doesn’t show the result.
Where is wrong?

  <template>

    <h1>Uploading an Image!</h1>

    <p>This component demonstrates Uploading Image to server.</p>
    <p v-if="!uploadResult"><em>uoloading...</em></p>



    <div v-if="uploadResult">{{this.uploadResult}} </div>
    <div>
        <form>
            <!--<input type="text" value="" v-model="projectName" placeholder="please enter the project name." />-->
            <input type="file" v-on:change="getFile($event)" />
            <button v-on:click="submitForm($event)">Upload</button>
        </form>

    </div>

</template>
<script>


    export default {

        name: "Upload1",
        data() {
            return {

                //projectName: "",
                selectedFile: " ",
                uploadResult: " ",
                fileList: []
            }
        },

        methods: {

            getFile(event) {
                this.selectedFile = event.target.files[0];
                console.log(this.file);
            },

            submitForm(event) {
                event.preventDefault();
                let formData = new FormData();
                formData.append("ImageData.File", this.selectedFile);



                fetch('/api/Image', {
                    method: 'POST',
                    body: formData
                }).then(resposne => resposne.json())
                    .then(data => {
                        console.log(data);
                        this.uploadResult=  "File " + data.fileName + " successfully uploaded."

                        this.getList();

                    });

            },

            getList() {
                fetch('api/Image')
                    .then(response => response.json())
                    .then(data => this.fileList = data)

            }

        },
        mounted() {
            this.getList();
        }

    };

</script>

please inform.

regards,
Saeed

I tried your code and it works: https://codepen.io/jenovs/pen/eYgPayR (I mocked out the file upload).
Check the browser console to see if there are any errors.

You mean the code is correct and has no problems?

I mean the part of the code you posted works in itself. The problem could be with the backend response or on the frontend when parsing that response (the part I’ve commented out).

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.