0

I'm new to Aurelia, and also still a beginner with Node JS. I'm struggling to put together a fully functional file upload. I've read a several tutorials (e.g. this one here: http://www.petermorlion.com/file-upload-with-aurelia), tried out various things. But it's rather confusing to dive through all those libraries with funny names, and figure out how something as simple as a file uploader can be pulled together.

I've a small test app based on the navigation skeleton: https://github.com/aurelia/skeleton-navigation/tree/master/skeleton-esnext

What I'm asking for is preferably a complete small file upload example based on the Aurelia skeleton.

For what it's worth, below is my code.

This is upload.html:

<template>
  <require from="./blob-to-url"></require>
  <require from="./file-list-to-array"></require>
  <require from="./upload"></require>

  <section class="au-animate">
    <h2>${heading}</h2>
    <div>
      <div class="col-md-2">
        <ul class="well nav nav-pills nav-stacked">
          <li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
            <a href.bind="row.href">${row.title}</a>
          </li>
        </ul>
      </div>
      <div class="col-md-10" style="padding: 0">
        <input type="file" multiple accept="image/*" files.bind="selectedFiles" change.delegate="onSelectFile($selectedFiles)"></input>
          <ul>
            <li repeat.for="file of selectedFiles | fileListToArray">
              <img src.bind="file | blobToUrl" />
              <p>${file.name}: ${file.type} ${file.size / 1000} kb</p>
              <p>Last Modified: ${file.lastModifiedDate}</p>
            </li>
          </ul>
      </div>
    </div>
  </section>
</template>

This is upload.js:

export class UploadRouter {
  heading = 'Upload Form';
  //upload = multer({ dest: 'uploads/' });
  //selectedFiles;

  fileListToArr(fileList) {
    let files = [];
    if (!fileList) {
      return files;
    }
    for(let i = 0; i < fileList.length; i++) {
      files.push(fileList.item(i));
    }
    return files;
  }

  onSelectFile(selectedFiles)
  {
    let formData = new FormData()
    let fileArray = this.fileListToArr(selectedFiles)

    for (let i = 0; i < fileArray.length; i++) {
      formData.append('images', fileArray[i]);
    }

    console.log("Uploaded successfully...");

    return http.fetch(url + "/", {
      method: 'put',
      body: formData,
    })
      .then(response => {
        console.log("Uploaded successfully...");
        return response
      })
      .catch(error => {
        console.log("Some Failure...");
        throw error.content;
      })
  }
}

file-list-to-array.js:

export class FileListToArrayValueConverter {
  toView(fileList) {
    let files = [];
    if (!fileList) {
      return files;
    }
    for(let i = 0; i < fileList.length; i++) {
      files.push(fileList.item(i));
    }
    return files;
  }
}

blob-to-url.js:

export class BlobToUrlValueConverter {
  toView(blob) {
    return URL.createObjectURL(blob);
  }
}
benjist
  • 2,740
  • 3
  • 31
  • 58

1 Answers1

0

I used Orkhan Alikhanov's answer @How to Upload Image Via WebApi

I use the spoonx Aurelia-api which is a wrapper around the Aurelia-fetch-client and neither seem to work well if at all with multi-part-form-data, I tried for hours to get a proper post request formatted with no luck. Sending the file as a byte array in a json object did the trick nicely, of course you need do some length checks but very simple easy and effective solution.

Community
  • 1
  • 1
John Benford
  • 1