Angular file upload on GCP causes strange characters to be shown in text-editor or encoding

I used following code to upload a image to Google cloud platform(GCP). The upload is successful but it's not opening after download. When inspected through Chrome browser "response" terminal. I see "--WebkitFormBoundar" at the end of the uploaded file which causes it corruped. Any ideas how to fix it?

<form method ="post" enctype="multipart/form-data" accept-charset="UTF-8">
<input title="upload" #fileInput type="file" class="display-none" (change)="onFileChange($event, item)" />
<button title="Manage Files" (click)="manageDialog($event, item)"></button>
<button icon="pi-upload" title="Upload File" (click)="fileInput.click()" ></button>
</form>

• Image uploaded on GCP directly through GCP portal [last stack trace only]:

• Image uploaded on GCP through angular application [last stack trace only]:

Original image size: 44.1 kb

Corrupted image size: 44.3 kb

It looks like dumb question or scenario but this 0.2 kb size diff causes corruption in Multipart/form-data file upload. Thanks for your help.

Continue reading...