Uploading image files & retrieving and display stored images : how it works - lan-solo-capstone/freeshare GitHub Wiki

Image Upload --- completed as of 03/21/21

  1. User will upload images using "attach file" on the item upload page. ( Can be single or multiple files).
  2. Selection of file will update the NewItemForm component local state.
  3. handleSubmit button in NewItemForm component will feed the local state to thunk in redux store
  4. In redux store, postNewItems thunk function will convert both form data & form files using FormData()method. FormData() will convert the actual images into blob data. Once the process is done, the form data (both form text data and files) are supplied to Axios call to trigger API/POST request.
  5. Testing of the FormData() object is tricky. You would only see an empty object from console.log. Instead, the object is passed to local HTML space. This allows us to see what is inside of the form data passed in the Axios call. There is a code to visualize the converted form in the thunk function and it is kept in there for debugging purposes.
  6. In API, form text data are saved first in the Item table. This will generate an Item for the uploaded item. Item's user ID is also saved in this process, so that item data is associated with the user who uploaded the item.
  7. Then, in the same API call, the file information is saved one by one, and at the end of each instance creation, magic method is invoked to associate each photo to the created item in the step 6.
  8. This completes the saving of the item and item's file data in the Item and ItemPhoto table.

Retrieving the File/Images - WIP as of 03/23/21

  1. Insread of saving file blob in the ItemPhoto BLOB field, it will be saved in the external file storage space (Firebase storage?).
  2. Immediately after saving in the external strage, the imagefileURL is retrived and passed back to the application.
  3. Application will send the imageUrl from step2, send it to API to save the url data in ItemPhoto imageURL field as text.
  4. Application front end (component) will call ItemPhoto.imageURL data to populate the images on UI.