How to receive file upload from Angular Reactive Form?

Question

I have module to upload file in Angular 7 Reactive Forms ( I need reactive form because I need to upload files and some other information together)

I follow this article: https://medium.com/@amcdnl/file-uploads-with-angular-reactive-forms-960fd0b34cb5

the code as follow: https://pastebin.com/qsbPiJEX

onFileChange(event) {
    const reader = new FileReader();

    if(event.target.files && event.target.files.length) {
      const [file] = event.target.files;
      reader.readAsDataURL(file);

      reader.onload = () => {
        this.formGroup.patchValue({
          file: reader.result
       });

        // need to run CD since file load runs outside of zone
        this.cd.markForCheck();
      };
    }
}

as far I know, I will receive the file as text inside the json data. But I have no idea how to receive this as a file or convert the json data to file. The file could be images, pdf or other docs (excel, docs, or other formats)

I am using Dotnet Core 2.2 and Angular 7 Any idea how to receive the file ?

Please make some effort to format your question in a way that makes it legible. — ProgrammingLlama
– ProgrammingLlama, Commented Mar 22, 2019 at 1:06

Ushmi Dave · Accepted Answer · 2019-03-22 05:43:42Z

4

I'm having a form in which i want to post image through formData, i got fileobject in my FormControl just by putting this attribute writeFile="true". This can write the FileList object in your FormControl as value. To Achieve this you need to install the package of '@rxweb/reactive-form-validators' and register the 'RxReactiveFormsModule' module. That's it.

here is my html code :

<form  [formGroup]="userFormGroup">       

        <label>Profile Photo</label>
        <input type="file" [writeFile]="true" formControlName="profilePhoto" multiple />        

      <button [disabled]="!userFormGroup.valid" class="btn btn-primary">Submit</button>
    </form>

Please refer this example : Stackblitz

answered Mar 22, 2019 at 5:43

Ushmi Dave

2861 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

nightingale2k1 Over a year ago

it seems I have to use formdata to send file. can I send multiple file at once or do I need to send one by one the file? I need to send the data in reactiveform (json) as well.

Ushmi Dave Over a year ago

@nightingale2k1 Yes you can post the multiple files to the server by just using multiple attributes on file control and regarding posting data in json form, you can post it but before posting the data you have to convert it filelist object base64 string. I am just sharing for your info: Base64 string is not the recommended way of doing.

nightingale2k1 Over a year ago

thanks for your answer. Should I post the data in formData or should I just use json for data (other than files) and post the files after that ?

Tong Over a year ago

This worked for me. Even though I set multiple to false, I had to grab the first element since it passes an array.

Martian99 Over a year ago

Do you still need to append the file to a form data? Do you have any info on the controller method on the other end?

Thivanka Saranatha · Accepted Answer · 2019-03-26 17:46:49Z

0

we are sending the file in request-body of the request so we can get the file in request using the below code. So we can access file in our request using below code

using System.IO;  
var filelocation = Path.GetTempFileName();
foreach (var FileData in Request.Form.Files)  
{ 
 if (FileData.Length > 0)  
  {  
    using (var inputStream = new FileStream(filelocation , FileMode.Create))  
    { 

          // read file to stream  
            await FileData.CopyToAsync(inputStream);  
             // stream to byte array  
              byte[] array = new byte[inputStream.Length];  
               inputStream.Seek(0, SeekOrigin.Begin);  

                inputStream.Read(array, 0, array.Length);  
     // get file name  
     string fName = formFile.FileName;  
  }

}
}

edited Mar 26, 2019 at 17:46

answered Mar 22, 2019 at 1:40

Thivanka Saranatha

3624 silver badges11 bronze badges

Collectives™ on Stack Overflow

How to receive file upload from Angular Reactive Form?

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related