[$50] Uploaded photo is not displayed

[sdgun]

Target URL

https://frontend.app.cloud.gov/dashboard/10

Steps to Reproduce

1. Open the URL https://frontend.app.cloud.gov/
2. Login as a valid User [Admin]
3. Click Search button
4. Enter 'Branch of service' as US NAVY
5. Click 'Update Results' button
6. Click on any record > https://frontend.app.cloud.gov/dashboard/10
7. Click on 'Upload' button and upload an image with a Caption
8. Click on 'Photos' section
9. Click on the image (You can't see the image as a thumbnail or inside the article

Actual Result(s)

• Uploaded photo is not displayed

Expected Result(s)

• Must display the uploaded photo inside the story

Frequency

• 5/5

Environment Details

• Device(s): Laptop
• Operating System: Windows 7 64bit
• Browser(s): Chrome 67.0.3396.87 (Official Build) (64-bit)

Image(s)/Video(s)/Console Log/Crash Log

[ramillim]

This is working locally when uploading the photos to my local rest-api server.

I did notice that the API is handling uploads by storing them in local storage under the server's /public/upload/ so that is something that will need to be addressed when they figure out the architecture for where to store images.

[ramillim]

I confirmed that on the frontend.app.cloud.gov, the issue is actually broken links to the stores URLs. For example:
https://frontend.app.cloud.gov/upload/7ff363a98b99d59c5e1817b33cdacd72
Is not accessible, either due to configuration that is keeping /public/upload from being viewed or the file actually doesn't exist.

[ramillim]

I think that there should be separate config for development and production to allow development uploads to be stored locally on the rest-api server while production config points to a cloud file storage provider.

[ramillim]

Looks properly configured in the rest-api https://github.com/topcoderinc/va-online-memorial-rest-api/blob/master/app.js#L39 so not sure why. If someone could inspect the server and see if that file is in public/upload

[sdgun]

@ramillim @dustinWeaver Hope this is what you are looking for;

[ramillim]

Oh, I'm sorry @sdgun I should've clarified that I needed to see the directory for API server. The one at https://rest-api.app.cloud.gov/api
Do you happen to have ssh access to that one also?

[sdgun]

Hope this is the one; @ramillim

[ramillim]

@sdgun Yes, that looks correct. Can you ls public/upload?

[sdgun]

@ramillim > After ssh to the server I am in home/vcap, so doing a ls from there I can't see public/upload. Sorry if I am confusing you @dustinWeaver is the best person for this I think :)

You mean ls /app/public/upload/ ? check below

[ramillim]

@sdgun Correct, /app/public/upload/

[sdgun]

@ramillim Please check above two screenshots > #30 (comment)

[ramillim]

@sdgun The file named 7ff363a98b99d59c5e1817b33cdacd72 doesn't exist so I wonder if it's a mismatch between what's stored in the database and what's on the server. That could happen if a new server was provisioned (since all files are stored locally), but using the existing database.

I pulled down one of the more recent uploads and it looks like something you uploaded:
https://frontend.app.cloud.gov/upload/fe6f1f22a19831cda19223b11bca4984
(changed extension to .jpg after downloading to view file)

Is the image displaying for the post you created with that image upload? If so, the issue is just that the old files that the database has references to don't exist anymore.

[sdgun]

@ramillim Yes

[ramillim]

@sdgun Great, that solves the mystery of this bug. The fix will be to:

1. Not store images locally in production.
2. Remove references to images that no longer exist in the production database (or just reset the database).

[ramillim]

Thanks so much for your help @sdgun

[sdgun]

@ramillim 👍

[dustinWeaver]

@ramillim and @sdgun, I think the fix for this will be to allow the upload URL to be a configuration option so we could store them externally to the frontend app.

[ramillim]

@dustinWeaver @dustinTopcoder I really don't think I will be able to get this done before the challenge deadline, but can we make the assumption that the file storage will be Amazon S3? I discovered that the frontend client is hosted on AWS.

[dustinTopcoder]

How much of an extension would you need? But yes, I think S3 is a good assumption for now.

[ramillim]

@dustinTopcoder Probably until noon eastern tomorrow since I have to work on another project for the next few hours. I wrapped work on the other 2 issues today. I know there's one other person working on challenge 6 so maybe he will have it all submitted today :)

[dustinTopcoder]

Let's see what gets submitted and go from there.

cc: @ksmacleod99

[ramillim]

@dustinTopcoder @ksmacleod99

topcoderinc/va-online-memorial-rest-api#5

Work in progress, but I wanted to get something out as promised by noon today, but have to timebox it since I need to head out for the rest of the day. Spent too much time trying to figure out how to get this middleware that the app was using to handle multipart forms to work with S3 (https://www.npmjs.com/package/multer).

The good news is S3 uploads and file deletion from are working for Photos, and I need to extend for the 2 other models that also have file uploads (NOK Requests and Veteran avatars).
topcoderinc/va-online-memorial-rest-api#5
Then we probably need to have some conversation about how configuration should be handled (I opted to use dotenv).

[ramillim]

I guess technically that PR would fix Issue #30 since the bug report is only about the Photos, but I think we might as well fix it across the board and I don't think there are other issues open for the NOK requests and avatars.

[dustinTopcoder]

Contest https://www.topcoder.com/challenges/30069643 has been created for this ticket.

[dustinTopcoder]

Contest https://www.topcoder.com/challenges/30069643 has been updated - the new changes has been updated for this ticket.

[dustinTopcoder]

Contest https://www.topcoder.com/challenges/30069643 has been updated - the new changes has been updated for this ticket.

[dustinTopcoder]

Contest https://www.topcoder.com/challenges/30069643 has been updated - the new changes has been updated for this ticket.