Jerga99

<form #registerForm="ngForm">
  <div class="form-group">
    <label for="username">Username</label>
    <input [(ngModel)]="formData.username"
          #username="ngModel"
           name="username"
           type="text"
           class="form-control"
           id="username"
           required>

Jerga99

const multer = require('multer');
const multerS3 = require('multer-s3');
const aws = require('aws-sdk');

aws.config.update({
    secretAccessKey: "ab7786ad6", // Not working key, Your SECRET ACCESS KEY from AWS should go here, never share it!!!
    accessKeyId: "ab7786ad6", // Not working key, Your ACCESS KEY ID from AWS should go here, never share it!!!
    region: 'us-east-1' // region of your bucket
});

Jerga99

const upload = multer({
  storage: multerS3({
    s3: s3,
    bucket: 'medium-test',
    acl: 'public-read',
    metadata: function (req, file, cb) {
      cb(null, {fieldName: file.fieldname});
    },
    key: function (req, file, cb) {
      cb(null, Date.now().toString())

Jerga99

const express = require("express");
const router = express.Router();
const upload = require('../services/multer');

const singleUpload = upload.single('image')

router.post('/image-upload', function(req, res) {
  singleUpload(req, res, function(err, some) {
    if (err) {
      return res.status(422).send({errors: [{title: 'Image Upload Error', detail: err.message}] });

Jerga99

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "bwm-ng"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [

Jerga99

{
  "name": "angular-starter",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.conf.json",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",

Jerga99

<label class="image-upload-container btn btn-bwm">
  <span>Select Image</span>
  <input #imageInput
         type="file"
         accept="image/*"
         (change)="processFile(imageInput)">
</label>

Jerga99

<label class="image-upload-container btn btn-bwm">
  <span>Select Image</span>
  <input #imageInput
         type="file"
         accept="image/*"
         (change)="processFile(imageInput)">
</label>

Jerga99

class ImageSnippet {
  pending: boolean = false;
  status: string = 'init';

  constructor(public src: string, public file: File) {}
}

@Component({
  selector: 'bwm-image-upload',
  templateUrl: 'image-upload.component.html',

Jerga99

class ImageSnippet {
  constructor(public src: string, public file: File) {}
}

@Component({
  selector: 'bwm-image-upload',
  templateUrl: 'image-upload.component.html',
  styleUrls: ['image-upload.component.scss']
})
export class ImageUploadComponent {