US11 - Cloudinary/RecipeImages

[gwittm]

As a user i want to have an image-cloud in order to upload images and show them at the dependent recipe

Description

Acceptance criteria

@ "MainPage":

• [ ] all recipes are shown, each with the depending Image or placeholder

@ "DetailPage":

• [ ] the recipe is shown with the depending Image or placeholder

@ "AddRecipePage":

• [ ] a placeholder is displayed
• [ ] with the browse-button, an Image can be selected from your device
• [ ] Preview of Image is shown after selected
• [ ] with the upload-button, the Image will be uploaded
• [ ] with the delete-button, the Image can be removed so a placeholder is displayed again

@ "EditPage":

• [ ] the recipe with the chosen image is displayed
• [ ] with the "change Image"-button, a new Image can be selected from your device
• [ ] Preview of Image is shown after selection
• [ ] with the upload-button, the Image will be uploaded
• [ ] with the delete-button, the Image can be removed, so a placeholder is displayed again

Task

• [ ] create a branch US11-Cloudinary/RecipeImages
• [ ] install packages ( npm i cloudinary / formidable )
• [ ] connection to database( env.local -> Cloudinary )
• [ ] create API / upload / index.js ( config )
• [ ] create post - method at API / index.js

implement the feched-Images at following pages:

• [ ] MainPage
• [ ] DetailsPage
• [ ] EditPage
• [ ] create "upload Image" & "delete Image" Button

[luederb]

Hey @StephanLippert great work! Nice, that you already implement cloudinary from our workshop yesterday in your app 💪 As I understood Peter yesterday, the Image is not directly displayed after the selection from your local files, though. There has to be a step afterwards. You need a button like "Submit", that actually sends the file to cloudinary after the selection from you local files and only after the upload, the image is showed in your app, right? I suggest that after the user clicks the "upload image" button and has selected an image, the file name of the image is displayed next to the "upload image" button and next to it appears a "submit" button. Maybe you also wanna make a wireframe for this in order to design the layout for the displayed filename and the submit button? Same for the "Edit" page of course. Maybe you decided against the extra "submit" - step and make an automatic upload directly after the selection of a local file? But as a user, I would prefer to check the selected file again, before I upload it to the web... just in case I accidentally selected the wrong file 😁 Other then that, great User Story. The rest looks good to me 👍

[StephanLippert]

Hi, thats's a good point...i'll think about that and ask my Team members what solution we want to implement. 👍🏼 Thank you for taking your Time 😇 Have a nice Weekend ✌🏼🙂

[BirkBee]

Hey @StephanLippert @gwittm @akyil88 your updated US looks very good to me 🙌

There is just a minor fix I would recommend: you wrote "die" instead of "the" in two sentences in the AddRecipePage "with the upload-button, die Image will be uploaded" and in the Edit page "with the upload-button, die Image will be uploaded".

LGTM 🚀