How to upload images (jpgs, pngs) from Vuejs to Asp.net core webservice

Recently I had to upload images from Vue Js to asp.net core API, a simple approach is to send the image as base 64 encoded string then save it on the database/Azure blob storage. If the application is not open to the public (internal app – office use) we can consider saving the file to disk, but that is only you host it in none cloud strange as Azure has limited disk space in the web hosting.

I will not post the code of the asp.net core app, as its a matter of getting the base 64 string and saving it to file/blob storage – pretty easy. I have posted similar in the past, or ask you good friend Google.

I will not post entire code here, but only the necessary code bits.

<template>
    <div class="col-lg-12">

            <form data-provide="validation" data-disable="false" novalidate="true" v-on:submit.prevent="onSave">
              
                            <div class="input-group form-type-fill file-group">                            
                              <input type="text" class="form-control file-value" v-bind:class="{ 'is-invalid': errors.has('Image') }" placeholder="Choose file..." readonly="">
                              <input type="file" accept="image/*" name="Image" id="Image" @change="onProfileImageChange" ref="projectImage">
                              <span class="input-group-btn">
                                <button class="btn btn-light file-browser" type="button"><i class="fa fa-paperclip"></i></button>                              
                              </span>                            
                            </div>                          
                            <div class="text-danger" v-show="errors.has('Image')">{{ errors.first('Image') }}</div>

                    <button class="btn btn-float btn-primary" title="Save changes" type="submit" :disabled="showLoading"><i class="ti-save"></i></button>

            </form>       
        <LoaderCard :show="showLoading"></LoaderCard>      
    </div>
</template>

Type script (.ts)

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import LoaderCard from "../../shared/LoaderCard.vue";
import { toasterService } from "../../../services/ToasterService";
import {
  IRestResponse,
  PostedFile
} from "../../../shared/models";
import { NotificationType, RouteURL } from "../../../shared/constants";
import { urlHelper } from "../../../shared/urlHelper";
import { base64ImageHelper } from "../../../shared/Base64ImageHelper"; 
declare var $: any;
@Component({
  components: {
    LoaderCard
  }
})
export default class MyProfileComponent extends Vue{
  showLoading: boolean = false;
  project: IProject = new Project();
  image: any;

  created() {
    
  }  

  onSave() {
    // now if you post it to the server, base 64 sting is part of the model
  }

  onProfileImageChange(e: any) {
    var files = e.target.files || e.dataTransfer.files;
    if (!files.length) 
      return;

    this.convertImage(files[0]);
  }

  convertImage(file: any) {
    var image = new Image();
    var reader = new FileReader();

    reader.onload = (e: any) => {    
      this.project.Image = new PostedFile(file.name, base64ImageHelper.truncateBase64String(e.target.result));
    };
    reader.readAsDataURL(file);
  }



}
</script>

export default class Base64ImageHelper {
    public truncateBase64String(data: string): string {
        return data.replace("data:image/jpeg;base64,", "").replace("data:image/png;base64,", "");    
    }    
}

export const base64ImageHelper: Base64ImageHelper = new Base64ImageHelper();