Uploading images using aurelia to asp.net core backend

Question

I have been searching for a solution for this but none of the guides are updated or suited for my intention. I need a user uploaded image to be loaded into javascript/aurelia which then sends it to the asp.net core backend using its http fetch client so the image is saved on disk(not in a database). I'm currently using the following code but I'm getting the following error and no images are being saved.

extract from html code being used to upload image

<input class="hiddenButton" id="images" type="file" accept=".jpeg" file.bind="image"> 
<button class="upload" onclick="document.getElementById('images').click()">
    <i class="fa fa-pencil" style="color:green"></i>
</button>

extract of javascript code used to invoke saving

save() {
    this.api.saveEmployee(this.employee).then(employee => this.employee = employee);

    this.ea.publish(new EmployeeAdded(this.employee));

    this.api.saveImage(this.image);

    return this.employee;
}

Javascript/aurelia code

saveImage(image) {
    var form = new FormData()
    form.append('image', image)

    this.http.fetch('/api/Images', {
        method: 'POST',
        //headers: { 'Content-Type': image.type },
        body: form
    })
    .then(response => {
        return response
    })
    .catch(error => {
        console.log("Some Failure...");
        throw error.content;
    })

    return true;
}

Asp.net core MVC code(backend)

[HttpPost]
public async Task<IActionResult> SaveImage(IFormFile file)
{
    Console.WriteLine("Images controller");
    var filePath = Path.Combine(Directory.GetCurrentDirectory(),"Image");
    using (var stream = new FileStream(filePath, FileMode.Create))
    {
        await file.CopyToAsync(stream);
    }

    return Ok();
}

error message

This is a server error, wrap the server code in `try{} catch{}` and so some debugging. Then post the error here — haldo, Feb 26 '19 at 21:49
As suggested I added the try{} catch{} which eliminated the error without introducing any new ones on the console. An image file is now even being created as required but it appears that the file being saved is corrupted as when im saving it as either png or jpg and try to open it on windows 10 it says "it appears that we dont support this file format. Do you know what could be the cause of as my debugging isn't giving me an indication of this? — Blaze, Feb 27 '19 at 17:38
Adding to my previous comment: no bytes are being written to the file created — Blaze, Feb 27 '19 at 17:49
can you show the HTML for your image and the call to `saveImage`? — haldo, Feb 27 '19 at 18:20
thanks for the direction. apparently it is null and file.length is <= 0. Do you have any directions of what could be wrong with my aurelia code then if the file isn't being received correctly? — Blaze, Feb 27 '19 at 18:30

score 2 · Accepted Answer · answered Feb 27 '19 at 18:48

The HTML element <input type="file" /> does not have a property file, the correct property is files, so it sounds like the problem is with aurelia/javascript and binding.

Since the property files is a FileList (collection) you will need to access the first file in the collection. Even though you haven't used multiple I think files will still be a collection.

You could try this:

// html 
<input class="hiddenButton" id="images" type="file" accept=".jpeg" files.bind="image">
//                                                                     ^ files

// jss/aurelia
saveImage(image) {
    var form = new FormData();
    form.append('image', image[0]);    // access the first image in collection image[0]

    // the other code remains the same
    //...
}

PS I haven't used aurelia so can't be 100% sure this is the issue but hopefully points you in the correct direction.

PPS: since files is a collection, technically image in your view model is a collection too, so you could consider renaming it to images to make it clearer (even if you're only using one image). It should still work using image[0] but images[0] would be clearer.

That changed worked! Thanks! Originally it was like that but I had changed it to see if it was the cause of another problem and forgot the undo the change. — Blaze, Feb 27 '19 at 18:51
@JurgenAquilina I'm glad it worked. Please up vote too if it helped :) — haldo, Feb 27 '19 at 18:53

Uploading images using aurelia to asp.net core backend

1 Answers1