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

Encountering type-checking errors in the root query due to the specific types assigned to my root nodes in a GraphQL and TypeScript application built using Express

Tips for Resolving TypeScript Error 7053 when using the handleChange function in a React Form

ESLint is reminding you that the `parserOptions.project` setting must be configured to reference the tsconfig.json files specific to your

Perform a series of database queries one after the other, ensuring they are completed before

Instructions on transferring information from the app.component to its child components

Exploring the power of TypeScript for authenticating sessions with NextJS

Customizing the renderInput of the Material UI DatePicker

Conditional types can be used as type guards

Leveraging ZOD's discriminatedUnion() method to differentiate among three different forms

Exploring the possibilities of utilizing JavaScript within TypeScript

The process of assigning a local variable to a JSON response in Angular 2

NextAuth is failing to create a session token for the Credential provider

Every time I attempt to destructure the state object in react typescript, I encounter the error message stating 'Object is possibly undefined'

What could be the reason for Typescript attempting to interpret files in the `./build` directory as input files?

Typescript: The art of selectively exporting specific types

What is the process of launching an Angular component in a new browser tab?

Saving Data in an Angular Material Table: A How-to Guide

Exclude weekends from DateTime

Using both Typescript and Javascript, half of the Angular2 application is built

Having an issue with forkJoin where the code seems to get stuck and does not continue execution after