Form support in Vue Uploader component

11 Jun 202424 minutes to read

The uploader component works with HTML form like default file input.
The following configuration is must to make the uploader work inside the form.

*   `saveUrl` and `removeUrl` must be null.
*   `autoUpload` must be disabled.
*   `name` attribute must be added in input element.

The selected or dropped files are received as a collection in form action when the form is submitted. The form action handles the server-side operations that manage the file upload process. When you reset the form, the file list and data will be cleared.

Composition API (~/src/App.vue)

<template>
    <div>
        <div class="col-lg-12 control-section form-support">
            <div class="control_wrapper" id="control_wrapper">
                <!-- Initialize Uploader -->
                <form id="form1" action="saveFiles.ashx" method="post">
                    <h4 class="form-title">Photo Contest</h4>
                    <div class="form-group" style="padding-top: 11px;">
                        <div class="e-float-input">
                            <input type="text" id="name" name="Name" data-required-message="* Enter your name" required=""
                                data-msg-containerid="nameError">
                            <span class="e-float-line"></span>
                            <label class="e-float-text e-label-top" for="name">Name</label>
                        </div>
                        <div id="nameError"></div>
                    </div>
                    <div class="form-group" style="padding-top: 11px;">
                        <div class="e-float-input">
                            <input type="email" id="email" name="Email" data-validation="email"
                                data-required-message="* Enter your email" required="" data-msg-containerid="mailError">
                            <span class="e-float-line"></span>
                            <label class="e-float-text e-label-top" for="email">Email</label>
                        </div>
                        <div id="mailError"></div>
                    </div>
                    <div class="form-group" style="padding-top: 11px;">
                        <div class="e-float-input">
                            <input type="text" id="mobileno" name="MobileNo"
                                data-required-message="* Enter your mobile number" required=""
                                data-msg-containerid="noError">
                            <span class="e-float-line"></span>
                            <label class="e-float-text e-label-top" for="mobileno">Mobile No</label>
                        </div>
                        <div id="noError"></div>
                    </div>
                    <div class="form-group" style="padding-top: 11px;">
                        <div class="e-float-input upload-area">
                            <input type="text" id="upload" name="upload" readonly=""
                                data-required-message="* Select any file" required="" data-msg-containerid="uploadError">
                            <ejs-uploader id='fileupload' name="UploadFiles" :autoUpload="isAuto" :selected="onFileSelect"
                                allowedExtensions="image/*" :dropArea="dropElement" :multiple='false'></ejs-uploader>
                            <button id="browse" class="e-control e-btn e-info">Browse...</button>
                            <span class="e-float-line"></span>
                            <label class="e-float-text e-label-top" for="upload">Choose a file</label>
                        </div>
                        <div id="uploadError"></div>
                    </div>
                    <div class="form-group" style="padding-top: 11px;">
                        <div class="e-float-input">
                            <textarea class="address-field" rows="4" id="Address" name="Address"></textarea>
                            <span class="e-float-line"></span>
                            <label class="e-float-text e-label-top" for="address">Address</label>
                        </div>
                    </div>
                </form>
                <div class="submitBtn">
                    <button class="submit-btn e-btn" id="submit-btn">Submit</button>
                    <div class="desc"><span>*This button is not a submit type and the form submit handled from
                            externally.</span></div>
                </div>
                <ejs-dialog id='uploadAlert' :header='header' showCloseIcon=true :width='width' :content='dlgContent'
                    :target='dlgTarget' :isModal='Modal' :visible="false" :animationSettings='animation' ref="dialogObj">
                </ejs-dialog>
            </div>
        </div>
    </div>
</template>
<script setup>

import { UploaderComponent as EjsUploader } from '@syncfusion/ej2-vue-inputs';
import { FormValidator } from '@syncfusion/ej2-inputs';
import { DialogComponent as EjsDialog } from '@syncfusion/ej2-vue-popups';
import { onMounted, ref } from 'vue';

const dialogObj = ref(null);

let formObj = '';
const dropElement = '.control-fluid';
const isAuto = false;
const header = 'Success';
const animation = { effect: 'zoom' };
const Modal = true;
const dlgTarget = '.control_wrapper';
const dlgContent = 'Your details have been updated successfully, Thank you.';
const width = '335px';
const options = {
    //Initialize the CustomPlacement.
    customPlacement: function (inputElement, errorElement) {
        inputElement = inputElement.closest('.form-group').querySelector('.error');
        inputElement.parentElement.appendChild(errorElement);
    },
    rules: {
        'Name': {
            required: true
        },
        'Email': {
            required: true
        },
        'upload': {
            required: true
        }
    }
};

onMounted(() => {
    document.getElementById('browse').onclick = () => {
        document.getElementsByClassName('e-file-select-wrap')[0].querySelector('button').click();
        return false;
    };

    document.getElementById('submit-btn').onclick = function () {
        onFormSubmit();
    };
    formObj = new FormValidator('#form1', options);
});

const onFormSubmit = () => {
    let formStatus = formObj.validate();
    if (formStatus) {
        formObj.element.reset();
        dialogObj.value.show();
    }
};
const onFileSelect = (args) => {
    let inputElement = document.getElementById('upload');
    inputElement.value = args.filesData[0].name;
};

</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";

#container {
    visibility: hidden;
    padding-left: 5%;
    width: 100%;
}

#loader {
    color: #008cff;
    font-family: 'Helvetica Neue', 'calibiri';
    font-size: 14px;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

.form-support .control_wrapper {
    max-width: 400px;
    margin: auto;
}

.form-support .address-field {
    max-height: 50px;
    resize: none;
}

.form-support #control_wrapper {
    max-width: 500px;
    margin: auto;
    border: 0.5px solid #BEBEBE;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.36);
    padding: 1% 4% 2%;
    background: #f9f9f9;
}

.highcontrast .form-support #control_wrapper {
    background: #000000;
}

.form-support .upload-area,
.e-bigger .form-support .upload-area {
    width: 73%;
}

.form-support .e-error {
    padding-top: 3px;
}

.form-support .e-upload {
    width: 100%;
    position: relative;
    margin-top: 15px;
}

.form-support .control_wrapper .e-upload .e-upload-drag-hover {
    margin: 0;
}

.form-support .submit-btn {
    margin-top: 15px;
}

.form-support .submitBtn .desc {
    margin: 2% 20% 0% 18%;
}

@media only screen and (max-width: 500px) {
    .form-support .submitBtn .desc {
        margin: 12px;
    }

    .form-support .upload-area,
    .e-bigger .upload-area {
        width: 60%;
    }
}

.form-support .submitBtn {
    position: relative;
    text-align: center;
}

.form-support .success .successmsg {
    border: 0.5px solid green;
    padding: 10%;
    color: green;
}

.form-support form#form1 {
    position: relative;
    top: 14%;
}

.form-support .e-upload {
    display: none;
}

.form-support input.choose-file {
    width: 60%;
}

.form-support button#browse {
    float: right;
    margin-right: -115px;
    margin-top: -29px;
    position: relative;
}

.e-bigger.bootstrap .form-support button#browse {
    top: -12px;
}

.e-bigger.material .form-support button#browse {
    top: -8px;
}

.e-bigger.fabric .form-support button#browse,
.e-bigger.highcontrast .form-support button#browse {
    top: -11px;
    left: 2%;
}

.fabric .form-support #browse,
.highcontrast .form-support #browse {
    top: -3px;
}

.bootstrap .form-support #browse {
    top: -6px;
}

.form-support .form-title {
    text-align: center;
}

#form1 .e-float-input:not(.e-input-group),
#form1 .e-float-input.e-control-wrapper:not(.e-input-group) {
    display: inherit;
}
</style>

Options API (~/src/App.vue)

<template>
    <div>
        <div class="col-lg-12 control-section form-support">
            <div class="control_wrapper" id="control_wrapper">
                <!-- Initialize Uploader -->
                <form id="form1" action="saveFiles.ashx" method="post">
                    <h4 class="form-title">Photo Contest</h4>
                    <div class="form-group" style="padding-top: 11px;">
                        <div class="e-float-input">
                            <input type="text" id="name" name="Name" data-required-message="* Enter your name" required=""
                                data-msg-containerid="nameError">
                            <span class="e-float-line"></span>
                            <label class="e-float-text e-label-top" for="name">Name</label>
                        </div>
                        <div id="nameError"></div>
                    </div>
                    <div class="form-group" style="padding-top: 11px;">
                        <div class="e-float-input">
                            <input type="email" id="email" name="Email" data-validation="email"
                                data-required-message="* Enter your email" required="" data-msg-containerid="mailError">
                            <span class="e-float-line"></span>
                            <label class="e-float-text e-label-top" for="email">Email</label>
                        </div>
                        <div id="mailError"></div>
                    </div>
                    <div class="form-group" style="padding-top: 11px;">
                        <div class="e-float-input">
                            <input type="text" id="mobileno" name="MobileNo"
                                data-required-message="* Enter your mobile number" required=""
                                data-msg-containerid="noError">
                            <span class="e-float-line"></span>
                            <label class="e-float-text e-label-top" for="mobileno">Mobile No</label>
                        </div>
                        <div id="noError"></div>
                    </div>
                    <div class="form-group" style="padding-top: 11px;">
                        <div class="e-float-input upload-area">
                            <input type="text" id="upload" name="upload" readonly=""
                                data-required-message="* Select any file" required="" data-msg-containerid="uploadError">
                            <ejs-uploader id='fileupload' name="UploadFiles" :autoUpload="isAuto" :selected="onFileSelect"
                                allowedExtensions="image/*" :dropArea="dropElement" :multiple='false'></ejs-uploader>
                            <button id="browse" class="e-control e-btn e-info">Browse...</button>
                            <span class="e-float-line"></span>
                            <label class="e-float-text e-label-top" for="upload">Choose a file</label>
                        </div>
                        <div id="uploadError"></div>
                    </div>
                    <div class="form-group" style="padding-top: 11px;">
                        <div class="e-float-input">
                            <textarea class="address-field" rows="4" id="Address" name="Address"></textarea>
                            <span class="e-float-line"></span>
                            <label class="e-float-text e-label-top" for="address">Address</label>
                        </div>
                    </div>
                </form>
                <div class="submitBtn">
                    <button class="submit-btn e-btn" id="submit-btn">Submit</button>
                    <div class="desc"><span>*This button is not a submit type and the form submit handled from
                            externally.</span></div>
                </div>
                <ejs-dialog id='uploadAlert' :header='header' showCloseIcon=true :width='width' :content='dlgContent'
                    :target='dlgTarget' :isModal='Modal' :visible="false" :animationSettings='animation' ref="dialogObj">
                </ejs-dialog>
            </div>
        </div>


    </div>
</template>
<script>

import { UploaderComponent } from '@syncfusion/ej2-vue-inputs';
import { FormValidator } from '@syncfusion/ej2-inputs';
import { DialogComponent } from '@syncfusion/ej2-vue-popups';

export default {
    name: "App",
    components: {
        "ejs-uploader": UploaderComponent,
        "ejs-dialog": DialogComponent
    },
    data: function () {
        return {
            path: {
                saveUrl: 'https://services.syncfusion.com/vue/production/api/FileUploader/Save',
                removeUrl: 'https://services.syncfusion.com/vue/production/api/FileUploader/Remove'
            },
            dropElement: '.control-fluid',
            extensions: '.jpg, .png',
            isAuto: false,
            formObj: '',
            header: 'Success',
            animation: { effect: 'zoom' },
            Modal: true,
            dlgTarget: '.control_wrapper',
            dlgContent: 'Your details have been updated successfully, Thank you.',
            width: '335px',
            options: {
                //Initialize the CustomPlacement.
                customPlacement: function (inputElement, errorElement) {
                    inputElement = inputElement.closest('.form-group').querySelector('.error');
                    inputElement.parentElement.appendChild(errorElement);
                },
                rules: {
                    'Name': {
                        required: true
                    },
                    'Email': {
                        required: true
                    },
                    'upload': {
                        required: true
                    }
                }
            }
        }
    },
    mounted: function () {
        document.getElementById('browse').onclick = () => {
            document.getElementsByClassName('e-file-select-wrap')[0].querySelector('button').click();
            return false;
        };
        let localObj = this;
        document.getElementById('submit-btn').onclick = function () {
            localObj.onFormSubmit();
        };
        this.formObj = new FormValidator('#form1', this.options);
    },
    methods: {
        onFormSubmit: function () {
            let formStatus = this.formObj.validate();
            if (formStatus) {
                this.formObj.element.reset();
                this.$refs.dialogObj.show();
            }
        },
        onFileSelect: function (args) {
            let inputElement = document.getElementById('upload');
            inputElement.value = args.filesData[0].name;
        },
    }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";

#container {
    visibility: hidden;
    padding-left: 5%;
    width: 100%;
}

#loader {
    color: #008cff;
    font-family: 'Helvetica Neue', 'calibiri';
    font-size: 14px;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

.form-support .control_wrapper {
    max-width: 400px;
    margin: auto;
}

.form-support .address-field {
    max-height: 50px;
    resize: none;
}

.form-support #control_wrapper {
    max-width: 500px;
    margin: auto;
    border: 0.5px solid #BEBEBE;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.36);
    padding: 1% 4% 2%;
    background: #f9f9f9;
}

.highcontrast .form-support #control_wrapper {
    background: #000000;
}

.form-support .upload-area,
.e-bigger .form-support .upload-area {
    width: 73%;
}

.form-support .e-error {
    padding-top: 3px;
}

.form-support .e-upload {
    width: 100%;
    position: relative;
    margin-top: 15px;
}

.form-support .control_wrapper .e-upload .e-upload-drag-hover {
    margin: 0;
}

.form-support .submit-btn {
    margin-top: 15px;
}

.form-support .submitBtn .desc {
    margin: 2% 20% 0% 18%;
}

@media only screen and (max-width: 500px) {
    .form-support .submitBtn .desc {
        margin: 12px;
    }

    .form-support .upload-area,
    .e-bigger .upload-area {
        width: 60%;
    }
}

.form-support .submitBtn {
    position: relative;
    text-align: center;
}

.form-support .success .successmsg {
    border: 0.5px solid green;
    padding: 10%;
    color: green;
}

.form-support form#form1 {
    position: relative;
    top: 14%;
}

.form-support .e-upload {
    display: none;
}

.form-support input.choose-file {
    width: 60%;
}

.form-support button#browse {
    float: right;
    margin-right: -115px;
    margin-top: -29px;
    position: relative;
}

.e-bigger.bootstrap .form-support button#browse {
    top: -12px;
}

.e-bigger.material .form-support button#browse {
    top: -8px;
}

.e-bigger.fabric .form-support button#browse,
.e-bigger.highcontrast .form-support button#browse {
    top: -11px;
    left: 2%;
}

.fabric .form-support #browse,
.highcontrast .form-support #browse {
    top: -3px;
}

.bootstrap .form-support #browse {
    top: -6px;
}

.form-support .form-title {
    text-align: center;
}

#form1 .e-float-input:not(.e-input-group),
#form1 .e-float-input.e-control-wrapper:not(.e-input-group) {
    display: inherit;
}
</style>

You can also explore Vue File Upload feature tour page for its groundbreaking features. You can also explore our Vue File Upload example to understand how to browse the files which you want to upload to the server.