CODEWITHSUNDEEP
.netasp.net-mvcreactjsaxios
SkyeBoniwell
SkyeBoniwell

Reputation: 7122

using Axios to post uploaded image results in empty file collection

   const fd = new FormData();
    fd.append('image', this.state.selectedFile, this.state.selectedFile.name);
    const postData = {
        method: 'POST',
        credentials: 'include',
        body: fd
    }

    //this correctly shows the image object and name:
    console.log('selected image file name: ', this.state.selectedFile.name);
    console.log('select image: ', this.state.selectedFile);

    axios({
        method: 'post',
        url: `/api/gameStats/profileImage/${this.props.profileId}/files/upload`,
        postData
    })
    .then(function (response) {
        console.log('then: ', response);
    })
    .catch(function (response) {
        console.log('catch: ', response);
    });


   [HttpPost("upload")]
    public virtual async Task<IActionResult> PostMulti(Int64 parentId, ICollection<IFormFile> fileData)
    {
        'fileData is always empty... :(

        TParent parent;

        using (var tran = Session.BeginTransaction()) {
            parent = Repository.GetParent(parentId);
            if (!Security.CanCreate(CurrentUser, parent, null))
                return StatusCode(HttpStatusCode.Forbidden);
            tran.Rollback();
        }

        foreach (var file in fileData) {
            await SaveFile(file, parent);
        }

        return Created("", Map(Repository.Get(parentId)));
    }

Upvotes: 0

Views: 2302

Answers (1)

Karen Grigoryan
Karen Grigoryan

Reputation: 5432

You should pass required data field in your axios request object as outlined here

// data is the data to be sent as the request body // Only applicable for request methods 'PUT', 'POST', and 'PATCH' // When no transformRequest is set, must be of one of the following types: // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams // - Browser only: FormData, File, Blob // - Node only: Stream, Buffer data: { firstName: 'Fred' },

axios({
        method: 'post',
        url: `/api/gameStats/profileImage/${this.props.profileId}/files/upload`,
        data: postData
    })

P. S. you don't need to pass file name, when appending to FormData, since it's derived from it automatically if it is of type File as outlined here.

The filename reported to the server (a USVString), when a Blob or File is passed as the second parameter. The default filename for Blob objects is "blob". The default filename for File objects is the file's filename.

fd.append('image', this.state.selectedFile);

Upvotes: 1

Related Questions