32. Subiendo archivos frontend

file-uploads-frontend.md

Add to views/pages/things/available-things.ejs:

Replace <div class="photo-upload-field"...> and everything inside with:

<div class="photo-upload-field row d-flex align-items-center" :class="!uploadFormData.previewImageSrc ? 'justify-content-center' :  'justify-content-start'" >
  <div class="photo-preview col">
    <div class="image-wrapper" :class="!uploadFormData.previewImageSrc ? 'd-flex align-items-center justify-content-center' : ''">
      <img v-if="uploadFormData.previewImageSrc" alt="A preview of the selected item" :src="uploadFormData.previewImageSrc"/>
      <span v-else class="placeholder-icon fa fa-picture-o"></span>
    </div>
  </div>
  <div class="col d-flex-column justify-content-center">
    <span class="file-upload-button btn btn-sm" :class="[formErrors.photo ? 'btn-outline-danger' : !uploadFormData.previewImageSrc ? 'btn-outline-success' : 'btn-outline-secondary mr-3']">
      <span class="button-text" v-if="!uploadFormData.previewImageSrc">Select image</span>
      <span class="button-text" v-else>Change image</span>
      <input type="file" :disabled="syncing" accept="image/*" class="file-input" @change="changeFileInput($event.target.files)"/>
    </span>
    <p class="image-advice text-muted" v-if="!formErrors.photo"><strong>Tip</strong>: Make sure the item is front and center in the photo, so people know exactly what you're offering to share.</p>
    <p class="image-advice text-danger" v-if="formErrors.photo">A photo is required in order to add a new item.</p>
  </div>
</div>

Add to assets/js/pages/things/available-things.page.js:

In data:

uploadFormData: {
  photo: undefined,
  label: '',
  previewImageSrc: ''
},

In methods:

changeFileInput: function(files) {
  if (files.length !== 1 && !this.uploadFormData.photo) {
    throw new Error('Consistency violation: `changeFileInput` was somehow called with an empty array of files, or with more than one file in the array!  This should never happen unless there is already an uploaded file tracked.');
  }
  var selectedFile = files[0];

  // If you cancel from the native upload window when you already
  // have a photo tracked, then we just avast (return early).
  // In this case, we just leave whatever you had there before.
  if (!selectedFile && this.uploadFormData.photo) {
    return;
  }

  this.uploadFormData.photo = selectedFile;

  // Set up the file preview for the UI:
  var reader = new FileReader();
  reader.onload = (event)=>{
    this.uploadFormData.previewImageSrc = event.target.result;

    // Unbind this "onload" event.
    delete reader.onload;
  };
  // Clear out any error messages about not providing an image.
  this.formErrors.photo = false;
  reader.readAsDataURL(selectedFile);

},