Uploading images to S3 in Ember.js – Part 3: Extracting a form component

 // app/components/band-form.js
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 import fetch from 'fetch';
 
 const MAX_IMAGE_SIZE_MB = 1;
 const MAX_IMAGE_SIZE = MAX_IMAGE_SIZE_MB * 1024 * 1024;
 
export default class BandFormComponent extends Component {
  @tracked name;
  @tracked imagePreviewSrc;
  imageToUpload;

  @tracked validationError;

  @action
  updateName(event) {
    this.name = event.target.value;
  }

  @action
  didUploadImage(event) {
    this.validationError = '';
    let [file] = event.target.files;
    if (file.size > MAX_IMAGE_SIZE) {
      this.validationError = `Image should be smaller than ${MAX_IMAGE_SIZE_MB}MB.`;
      return;
    }
    this.imageToUpload = file;
    this.imagePreviewSrc = URL.createObjectURL(file);
  }

  @action
  async saveBand(event) {
    event.preventDefault();
    let response = await fetch('/presign-aws-request', {
      method: 'POST',
    });
    let { url, url_fields: urlFields } = await response.json();
    let bandProperties = {
      name: this.name,
    };

    let formData = new FormData();
    for (let field in urlFields) {
      formData.append(field, urlFields[field]);
    }
    formData.append('file', this.imageToUpload);

    let imageUploadResponse = await fetch(url, {
      method: 'POST',
      body: formData,
    });

    if (imageUploadResponse.ok) {
      bandProperties['image-url'] = imageUploadResponse.headers.get('Location');
      URL.revokeObjectURL(this.imageToUpload);
      this.imageToUpload = null;
    }

    return await this.args.onSave(bandProperties);
  }
}

 // app/controllers/bands/new.js
 import Controller from '@ember/controller';
 import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
 
 export default class BandsNewController extends Controller {
   @service catalog;
   @service router;
 
  constructor() {
    super(...arguments);
    this.router.on('routeWillChange', (transition) => {
      if (transition.isAborted) {
        return;
      }
      if (this.confirmedLeave) {
        return;
      }
      if (transition.from?.name === 'bands.new') {
        if (this.name) {
          let leave = window.confirm('You have unsaved changes. Are you sure?');
          if (leave) {
            this.confirmedLeave = true;
          } else {
            transition.abort();
          }
        }
      }
    });
  }

  G@action
  async saveBand(properties) {
    let band = await this.catalog.create('band', properties);
    this.confirmedLeave = true;
    this.router.transitionTo('bands.band.songs', band.id);
  }
}

// app/routes/bands/edit-band.js
export default class BandsEditBandRoute extends Route {
  @service catalog;

  model(params) {
    return this.catalog.find('band', (band) => band.id === params.id);
  }
}

 // app/controllers/band/edit-band.js
 import Controller from '@ember/controller';
 import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
 
 export default class BandsEditBandController extends Controller {
   @service catalog;
   @service router;
 
  @action
  async updateBand(band, attributes) {
    await this.catalog.update('band', band, attributes);
    this.router.transitionTo('bands.band.details', band.id);
  }
}

 // app/components/band-form.js
 export default class BandFormComponent extends Component {
   // (...)
   constructor() {
     super(...arguments);
     if (!this.args.band) {
       return;
     }
     let { name, imageUrl } = this.args.band;
    this.name = name;
    this.imagePreviewSrc = imageUrl;
  }
}

 // app/services/catalog.js
 export default class CatalogService extends Service {
   // (...)
   async update(type, record, attributes) {
     // (...)
     let response = await fetch(url, {
       method: 'PATCH',
       headers: {
         'Content-Type': 'application/vnd.api+json',
      },
      body: JSON.stringify(payload),
    });
    let json = await response.json();
    return this.load(json);
  }

  add(type, record) {
    let collection = type === 'band' ? this.storage.bands : this.storage.songs;
    let existingIndex = collection.findIndex((r) => record.id === r.id);
    if (existingIndex === -1) {
      collection.push(record);
    } else {
      collection.splice(existingIndex, 1, record);
    }
  }
}