Search results

Add Additional Data on Upload in Vue Uploader component

03 Mar 2021 / 1 minute to read

The uploader component allows you to add the additional data on file upload which is used to get in the server end. By using uploading event and its customFormData argument, you can achieve this behavior.

In the following code snippet, explains about how to add additional data on file upload.

Copied to clipboard
<template>
  <div>
    <ejs-uploader ref="uploadObj" id='defaultfileupload' :uploading="onFileUpload" name="UploadFiles"  :autoUpload="autoUpload" :asyncSettings= "path"></ejs-uploader>
  </div>
</template>
<script>
import Vue from 'vue';
import { UploaderPlugin, SelectedEventArgs } from '@syncfusion/ej2-vue-inputs';
import { createElement } from '@syncfusion/ej2-base';
Vue.use(UploaderPlugin);

export default {
  data: function(){
        return {
          path:  {
            saveUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Save',
            removeUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Remove'
          },
            autoUpload: false,
            allowedExtensions: 'image/*'
        }
    },
    methods: {
        onFileUpload:function(args) {
            // add addition data as key-value pair.
            args.customFormData = [{'name': 'Syncfusion INC'}];
        }
    }
}
</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%;
}

</style>

Server side for adding additional data

Copied to clipboard
    // Get the additional data in server end by corresponding key.
    var data = HttpContext.Current.Request.Form["name"];