How to open and edit uploaded files in Vue Uploader

03 Sep 20266 minutes to read

The Uploader component allows you to modify the file after uploading it to the server, which can be achieved using the success event of the Uploader.

You can retrieve the saved file path in the Uploader’s success event and assign it to the custom attribute (data-file-name) value of the respective file list element to open the uploaded file. When you click the respective file element, a new request is created along with the saved file path using an HTTP header. On the server side, the file path is retrieved from the header, and the file is opened using the Process.Start method.

<template>
  <div>
    <ejs-uploader ref="uploadObj" id='defaultfileupload' :success="onUploadSuccess" name="UploadFiles" :asyncSettings= "path"></ejs-uploader>
  </div>
</template>
<script>

import { UploaderComponent, SelectedEventArgs } from '@syncfusion/ej2-vue-inputs';
import { createElement } from '@syncfusion/ej2-base';


export default {
  data: function(){
        return {
          path:  {
            saveUrl: 'YourHosedService/Home/Save',
            removeUrl: 'YourHosedService/Home/Remove'
          }
        }
    },
    methods: {
        onUploadSuccess: function(args) {
        let liElements = document.body.querySelectorAll('.e-upload-file-list');
        for (let i = 0; i < liElements.length; i++) {
            if (liElements[i].getAttribute('data-file-name') == args.file.name) {
                liElements[i].addEventListener('click', () => { this.openFile(args, event); });
                // The file path has to be updated from the server end in the response status description.
                liElements[i].setAttribute('file-path', args.e.target.statusText);
            }
        }
   },
   openFile: function(args, e) {
    if (!e.target.classList.contains('e-file-delete-btn') && !e.target.classList.contains('e-file-remove-btn'))
    {
        let ajax = new XMLHttpRequest();
        // create a new request to open the selected file
        ajax.open("POST", "YourHosedService/Home/openFile');
        let liElements = document.getElementsByClassName('e-upload')[0].querySelectorAll('.e-upload-file-list');
        for (let i = 0; i < liElements.length; i++) {
            if (liElements[i].getAttribute('data-file-name') == args.file.name) {
                // Add the file path in the header to retrieve it on the server side.
            ajax.setRequestHeader('filePath', liElements[i].getAttribute('file-path').toString());
            }
        }
        ajax.send();
    }
}
    }
}
</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 opening and editing the uploaded files

        public void Save()
        {
            var httpPostedFile = System.Web.HttpContext.Current.Request.Files["UploadFiles"];
            var currentPath = System.Web.HttpContext.Current.Server;
            var fileSave = currentPath.MapPath("UploadedFiles");
            var fileSavePath = System.IO.Path.Combine(fileSave, httpPostedFile.FileName);
            if (!System.IO.File.Exists(fileSavePath))
            {
                httpPostedFile.SaveAs(fileSavePath);
                HttpResponse Response = System.Web.HttpContext.Current.Response;
                Response.Clear();
                Response.ContentType = "application/json; charset=utf-8";
                Response.StatusDescription = fileSavePath;
                Response.End();
            }
        }

        [AcceptVerbs("Post")]
        public void openFile()
        {
            // Check whether the file is available in the corresponding location
            if (System.IO.File.Exists(Request.Headers.GetValues("filePath").First()))
            {
                // This will open the selected file from server location in desktop
                Process.Start(Request.Headers.GetValues("filePath").First());
            }
        }

Add the filePath in allow-headers in web.config file.

    <customHeaders>
        <add name="Access-Control-Allow-Headers" value="accept, maxdataserviceversion, origin, x-requested-with, dataserviceversion,content-type, chunk-index, Authorization, filePath" />
    </customHeaders>

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.