AngularJS with Web API: uploading files

Question

Good day,

I have beed following at tutorial on how to upload files using angularjs using WebAPI from this link https://code.msdn.microsoft.com/AngularJS-with-Web-API-22f62a6e#content It has been quite helpful,

In the tutorial there are four method

Task<IEnumerable<PhotoViewModel>> Get();
Task<PhotoActionResult> Delete(string fileName);
Task<IEnumerable<PhotoViewModel>> Add(HttpRequestMessage request);
bool FileExists(string fileName);

Now i need another method to get image by the image name, i have been trying with no result

//Task<PhotoActionResult> GetById(string fileName);

Please i need help on how to get file by id working

Thanks.

Answer 1

I have got the solution to the question, thanks to the author of the post @JayChase

I add a new method to IPhotoManager:

Task<PhotoViewModel> Get(string fileName);

The concrete implementation would be similar to the existing get but returning a single PhotoViewModel and having the query filter by filename as well:

public async Task<PhotoViewModel> Get(string fileName)
    {
        PhotoViewModel photo = new PhotoViewModel();

        DirectoryInfo photoFolder = new DirectoryInfo(this.workingFolder);

        await Task.Factory.StartNew(() =>
        {
            photo = photoFolder.EnumerateFiles()
                                        .Where(fi => new[] { ".jpg", ".bmp", ".png", ".gif", ".tiff" }.Contains(fi.Extension.ToLower())
                                            && fi.Name == fileName
                                        )                                            
                                        .Select(fi => new PhotoViewModel
                                        {
                                            Name = fi.Name,
                                            Created = fi.CreationTime,
                                            Modified = fi.LastWriteTime,
                                            Size = fi.Length / 1024
                                        })
                                        .FirstOrDefault();
        });

        return photo;
    }

Finally add the Get(string filename) method to the photo api:

    public async Task<IHttpActionResult> Get(string fileName)
    {
        var result = await photoManager.Get(fileName);
        return Ok(new { photo = result });
    }

Moreso, I have followed your sample project and also implement the getById method from the WebAPI and all work fine from you sample project, i try to replicate the project from a fresh ASP.Net Empty Web APi, after following the step in creating the project by copig the exact code to a new project, on testing the services, GetAll and POST Method work well, but the GetById and DELETE method do return 404 error but in your sample project all works well,

http://prntscr.com/6vp958 But if i point to a wrong filename i get an empty array of photo: http://prntscr.com/6vpa4q

I resolved the issues by adding

<!--add below sectio to allow DELETE method-->
<validation validateIntegratedModeConfiguration="false" />
<modules runAllManagedModulesForAllRequests="true">
  <remove name="WebDAVModule" />
</modules>

to the web.config file

The authour also comment:

If you are still getting 404 or 405 errors when trying to call the new get method then you may need to add the route attribute like below:

[Route("{fileName}")]
public async Task<IHttpActionResult> Get(string fileName)
{
  ...
}

Thanks all for the solution to the problem, hope this will help someone

Thanks.