How can I access a file uploaded using dxFileUploader?

Question

How can I access a file uploaded using dxFileUploader?

I am facing an issue with retrieving a file from dxFileUploader (DevExpress) and not being able to read it in the code behind. The file is only appearing as an object. Here is My FileUploader :

 {
                    location: "before",
                    widget: "dxFileUploader",
                    options: {
                        multiple: false,
                        accept: "*",
                        value: [],
                        uploadMode: "instantly",
                        onValueChanged: (e) => {
                            $.ajax({
                                url: "api/CoordinateSystems/UploadFile",
                                type: "POST",
                                data: e.value,
                                error(xhr, textStatus, errorThrown) {
                                    DxExtensions.notifyAjaxError(xhr, textStatus, errorThrown);
                                    DxExtensions.error(errorThrown);
                                },
                                success(data) {
                                    dataSource.load();
                                }
                            });
                        }
                    }

Codebehind:

 [HttpPost]
    [Route("UploadFile")]
    public IActionResult UploadFile(dynamic file)
    {
        List<string> errors = new List<string>(); // added this just to return something

        if (file != null)
        {

            string physicalWebRootPath = System.IO.Path.Combine(Directory.GetCurrentDirectory(), "wwwroot");
            // do something
        }

        return  Ok();
    }

Could someone provide guidance on how to properly retrieve a file from dxFileUploader, save it on the server, and work with it?

typescript devexpress devextreme

Answer 1

Answer №1

This is an example of AngularJS code that can be adapted to suit your needs.

HTML

<div dx-file-uploader="{
                                buttonText: 'Select file',
                                labelText: 'Drop file here',
                                multiple: false,
                                uploadMode: 'instantly',
                                bindingOptions: { uploadUrl: 'UploadUrl' ,disabled : 'IsReadOnly'},
                                showFileList: false,
                                onUploaded: on_Uploaded,
                                onInitialized: on_Initialized
                            }"></div>

Setting the Upload URL

$scope.UploadUrl = CTHelper.ApiUrl() + '/Api/Case/PostFile';

API Endpoint

[Route("Api/Case/PostFile")]
        public async Task<IHttpActionResult> PostFile()
        {
            if (!Request.Content.IsMimeMultipartContent())
                throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);

            try
            {
                var provider = new MultipartMemoryStreamProvider();
                await Request.Content.ReadAsMultipartAsync(provider);
                string path = System.Web.HttpContext.Current.Server.MapPath(Api.Helper.Constants.PortalFilesVirtualDir);
                foreach (var file in provider.Contents)
                {
                    var filename = file.Headers.ContentDisposition.FileName.Trim('\"');
                    var buffer = await file.ReadAsByteArrayAsync();
                    File.WriteAllBytes(string.Format("{0}/{1}", path, filename), buffer);
                    //Do whatever you want with filename and its binary data.
                }
            }
            catch (Exception err)
            {
                HttpResponseMessage message = new HttpResponseMessage(HttpStatusCode.InternalServerError);
                message.Content = new StringContent(err.Message);
                throw new HttpResponseException(message);
            }
            return Ok();

        }

Answer 2

This is an example of AngularJS code that can be adapted to suit your needs.

HTML

<div dx-file-uploader="{
                                buttonText: 'Select file',
                                labelText: 'Drop file here',
                                multiple: false,
                                uploadMode: 'instantly',
                                bindingOptions: { uploadUrl: 'UploadUrl' ,disabled : 'IsReadOnly'},
                                showFileList: false,
                                onUploaded: on_Uploaded,
                                onInitialized: on_Initialized
                            }"></div>

Setting the Upload URL

$scope.UploadUrl = CTHelper.ApiUrl() + '/Api/Case/PostFile';

API Endpoint

[Route("Api/Case/PostFile")]
        public async Task<IHttpActionResult> PostFile()
        {
            if (!Request.Content.IsMimeMultipartContent())
                throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);

            try
            {
                var provider = new MultipartMemoryStreamProvider();
                await Request.Content.ReadAsMultipartAsync(provider);
                string path = System.Web.HttpContext.Current.Server.MapPath(Api.Helper.Constants.PortalFilesVirtualDir);
                foreach (var file in provider.Contents)
                {
                    var filename = file.Headers.ContentDisposition.FileName.Trim('\"');
                    var buffer = await file.ReadAsByteArrayAsync();
                    File.WriteAllBytes(string.Format("{0}/{1}", path, filename), buffer);
                    //Do whatever you want with filename and its binary data.
                }
            }
            catch (Exception err)
            {
                HttpResponseMessage message = new HttpResponseMessage(HttpStatusCode.InternalServerError);
                message.Content = new StringContent(err.Message);
                throw new HttpResponseException(message);
            }
            return Ok();

        }

How can I access a file uploaded using dxFileUploader?

Answer №1

Similar questions

"What sets apart the usage of `import * as Button` from `import {Button}`

Creating an array of objects in Angular 2

"Encountering a Bug in Angular 2 Related to Chart.js

Error in AngularX TS: Trying to invoke a type that does not have a callable signature

Unusual conduct exhibited by a 16th version Angular module?

Ways of utilizing a dynamic key for invoking a resource from prisma

Structured similar to a map with typed elements

Unidentified object type detected - Material UI

Guide to loading a minified file in Angular 2 with Gulp Uglify for TypeScript Bundled File minimization

Manipulate classes by adding or removing them on click events in Angular

The type '{ domain: any; domainDispatch: React.Dispatch<any>; }' cannot be assigned to a type 'string'

What is the best way to showcase a firebase "row" containing two columns within an Ionic 2 application?

Incorporating the non-typescript npm package "pondjs" into Meteor applications using typescript files

Angular 5 error handler does not support service calls

Converting JSON data types into TypeScript interface data types

The issue arises when using Angular Material as it seems that passing a data object to a matdialog dialog

Behavior of Shadow DOM role when using the <a> element without an href attribute

What leads to the inability to utilize environment variables in this TypeScript app built with Vue 3?

JavaScript Equivalent of Declaration in TypeScript

What steps can I take to prevent encountering a Typescript Error (TS2345) within the StatePropertyAccessor of the Microsoft Bot Framework while setting a property?