Main library

The main page for the product photography uploader

Example screenshot

Actions within section

Location of action Action Validation rules
Top level action (primary) When this action is selected, a new page is loaded to complete the add photos flow.
Top level action (secondary)
  • The button is disabled until a checkbox is selected.
  • When this action is selected, the edit photos modal pops up - depending on whether one photo was selected or multiple determines the type of edit modal that is presented.
  • The text within the button changes based on the number of checkboxes selected:
    • "Edit 0 Photos" when no checkboxes are selected.
    • "Edit 1 Photo" when one checkbox is selected.
    • "Bulk Edit # Photos" when more than one checkbox is selected.
Top level action (secondary)
  • The button is disabled until a checkbox is selected.
  • When this action is selected, the delete photos modal pops up.
  • The text within the button changes based on the number of checkboxes selected:
    • "Delete 0 Photos" when no checkboxes are selected.
    • "Delete 1 Photo" when one checkbox is selected.
    • "Delete # Photos" when more than one checkbox is selected.
In-line table row text link (within the Filename column) Single clicking text within a cell of the Filename column When this action is selected, the single edit photos modal pops up. Since this is a single edit action, you will be able to replace the photo image and image details within the edit modal.
Table interactivity Option to change the number of rows shown within the table per page. Options include 10, 25, 50, 100.
Table interactivity Reset Filters Option to zero out any changes to the table filters. Does not affect the sort or checkboxes.
Table interactivity Default sort
  • Upon load, the table includes two sort orders:
    • Primary - Uploaded Date, newest to oldest.
    • Secondary - Filename, A to Z.
  • Thumbnail is not sortable.
Table interactivity Filter options
  • Thumbnail - none
  • Filename - Input field
  • Product Type - Select menu
  • Product Family - Select menu
  • Product Model - Input field
  • Shot Angle - Select menu
  • Shot Composition - Select menu
  • Upload Date - Date picker, date range
  • Uploaded by - Input field

Add New Photos:

Browse files

The page where users can browse/add photos to the product photography library. These are the specs for the initial load.

Example screenshot upon load

Actions within section

Location of action Action Validation rules
Top level action When this action is selected (button or input field), the browser will provide a prompt to select files from your device. After files are selected, it will populate within a table below.
Secondary action View documentation When this action is selected, it opens the formal documenation stored in the DAM for further reference.

Duplicates found

After you have selected files for upload, we run a file duplicate check against the current upload session and the DAM. If duplicates are found, they are not added to the upload queue and an error alert pops up listing the duplicates and where the duplicates are already located. This modal does not include the x and user must click the Okay button to dismiss.

Example screenshot of error modal

Actions within section

Location of action Action Validation rules
Modal action When this action is selected, the modal closes and any files that are not duplicates are added to the upload table queue for review.

Edit photo information for upload

This section is below the file picker that populates with photos that are queued to be uploaded. At this point you can edit photo details before uploading to the library.

Example screenshot after selecting files for upload

Form label Required? Validation rules
Product Type Yes Upon upload, the data for this field will be automatically parsed. If no data can be pulled, the field and row becomes red. The text within the select menu will read "Choose Product Type".
Product Family Yes Upon upload, the data for this field will be automatically parsed. If no data can be pulled, the field and row becomes red. The text within the select menu will read "Choose Product Family".
Product Model Yes Upon upload, the data for this field will be automatically parsed. If no data can be pulled, the field and row becomes red. The text within the input field will read "Type Product Models".
Shot Angle Yes Upon upload, the data for this field will be automatically parsed. If no data can be pulled, the field and row becomes red. The text within the select menu will read "Choose Shot Angle".
Shot Composition Yes Upon upload, the data for this field will be automatically parsed. If no data can be pulled, the field and row becomes red. The text within the select menu will read "Choose Shot Composition".

Actions within section

Location of action Action Validation rules
Top level action When this action is selected (button or input field), the browser will provide a prompt to select files from your device. Any files selected after inital browse will be added to the current table.
Secondary action View documentation When this action is selected, it opens the formal documenation stored in the DAM for further reference.
Secondary action
  • The button is disabled until a checkbox is selected.
  • When this action is selected, the edit photos modal pops up - depending on whether one photo was selected or multiple determines the type of edit modal that is presented.
  • The text within the button changes based on the number of checkboxes selected:
    • "Edit 0 Photos" when no checkboxes are selected.
    • "Edit 1 Photo" when one checkbox is selected.
    • "Bulk Edit # Photos" when more than one checkbox is selected.
Secondary action
  • The button is disabled until a checkbox is selected.
  • When this action is selected, the delete photos modal pops up.
  • The text within the button changes based on the number of checkboxes selected:
    • "Delete 0 Photos" when no checkboxes are selected.
    • "Delete 1 Photo" when one checkbox is selected.
    • "Delete # Photos" when more than one checkbox is selected.
In-line table row text link (within the Filename column) Single clicking text within a cell of the Filename column When this action is selected, the single edit photos modal pops up. Since this is a single edit action, you will be able to replace the photo image and image details within the edit modal.
In-line table row edits Some row cells can be edited in-line.
  • Thumbnail - Not editable
  • Filename - Not editable, but selecting text will prompt the single edit modal
  • Product Type - Editable by select menu
  • Product Family - Editable by select menu
  • Product Model - Editable by input field
  • Shot Angle - Editable by select menu
  • Shot Composition - Editable by select menu
Table interactivity Reset Filters Option to zero out any changes to the table filters. Does not affect the sort or checkboxes.
Table interactivity Default sort
  • Upon load, the table sorts by Filename, A to Z.
  • Thumbnail is not sortable.
Table interactivity Filter options
  • Thumbnail - none
  • Filename - Input field
  • Product Type - Select menu
  • Product Family - Select menu
  • Product Model - Input field
  • Shot Angle - Select menu
  • Shot Composition - Select menu
Purpose of action Action Validation rules
Primary action
  • If all data has been correctly entered and this button is selected, the photos begin their process of being added to the photo library. A loading symbol may be present and then the photo library page will load with the upload success alert at the top of the library table.
  • If the user selects this button with missing data of required fields, the cannot delete error modal will pop up listing the photos with incomplete data. No photos have been uploaded yet.
Secondary action When this button is selected, no photos are uploaded and the user is returned to the photography library.

Edit Photos:

Single file edit

This modal pops up when the user selects a single photo checkbox then selects the Edit 1 Photo button, or selects the linked Filename for that photo row.

Example screenshot of single file edit modal

Form label Required? Validation rules
Product Type Yes
  • If information is missing within this field, it becomes red. The text within the select menu will read "Choose Product Type".
  • If user tries to submit the form without this information, error helper text below the field will read "One or more photos are missing a product type. Changing the 'Product Type' here will overwrite the existing selections for these photos."
Product Family Yes
  • If information is missing within this field, it becomes red. The text within the select menu will read "Choose Product Family".
  • If user tries to submit the form without this information, error helper text below the field will read "One or more photos are missing a product family. Changing the 'Product Family' here will overwrite the existing selections for these photos."
Product Model Yes
  • If information is missing within this field, it becomes red. The text within the input field will read "Type Product Model".
  • If user tries to submit the form without this information, error helper text below the field will read "One or more photos are missing a product model. Changing the 'Product Model' here will overwrite the existing selections for these photos."
Shot Angle Yes
  • If information is missing within this field, it becomes red. The text within the select menu will read "Choose Shot Angle".
  • If user tries to submit the form without this information, error helper text below the field will read "One or more photos are missing a shot angle. Changing the 'Shot Angle' here will overwrite the existing selections for these photos."
Shot Composition Yes
  • If information is missing within this field, it becomes red. The text within the select menu will read "Choose Shot Composition".
  • If user tries to submit the form without this information, error helper text below the field will read "One or more photos are missing a shot composition. Changing the 'Shot Composition' here will overwrite the existing selections for these photos."

Actions within section

Location of action Action Validation rules
Modal action When this action is selected (button or image), the browser will provide a prompt to select a file from your device. After a file is selected, it will prepare to update the image thumbnail and its renditions. The associated photo data is not automatically updated. Filename is also not changed.
Modal actions
  • If the Cancel or x action is selected, the modal will close and no data will be changed.
  • If the Save Edits action is selected, the error alert will pop up at the top of the modal "Please complete the required fields prior to saving changes", and the error checkbox with the statement "I understand that replacing this image will generate new renditions for all file formats (jpg, png, tiff)." will become visible. Once the box is checked, alert will be removed from the top of the modal and the checkbox. The user must re-select the Save Edits action. At this point the modal closes and the photo table is updated. The user cannot progress past the modal if the checkbox is not selected.
  • If the Save Edits action is selected and errors exist within the modal, the missing fields will turn red with their respective error messages and user must fix errors before saving.
  • If the Save Edits action is selected and no errors are present, the data is saved, the modal closes, and the photo table is updated. The edit success alert shows at the top of the table.
Modal actions Editable fields
  • Product Type - Select menu
  • Product Family - Select menu
  • Product Model - Input field
  • Shot Angle - Select menu
  • Shot Composition - Select menu

Bulk/multiple file edit

This modal pops up when the user checks multiple photo checkboxes then selects the Edit # Photos button.

Example screenshot of single file edit modal

Form label Required? Validation rules
Product Type Yes
  • If the selected photos have varying data for this field, the field will read "Multiple Values". However, "Multiple Values" is not a selectable option from the dropdown.
  • If information is missing within this field, it becomes red. The text within the select menu will read "Choose Product Type".
  • If user tries to submit the form without this information, error helper text below the field will read "One or more photos are missing a product type. Changing the 'Product Type' here will overwrite the existing selections for these photos."
Product Family Yes
  • If the selected photos have varying data for this field, the field will read "Multiple Values". However, "Multiple Values" is not a selectable option from the dropdown.
  • If information is missing within this field, it becomes red. The text within the select menu will read "Choose Product Family".
  • If user tries to submit the form without this information, error helper text below the field will read "One or more photos are missing a product family. Changing the 'Product Family' here will overwrite the existing selections for these photos."
Product Model Yes
  • If the selected photos have varying data for this field, the field will read "Multiple Values". However, "Multiple Values" is not a selectable option from the dropdown.
  • If information is missing within this field, it becomes red. The text within the input field will read "Type Product Model".
  • If user tries to submit the form without this information, error helper text below the field will read "One or more photos are missing a product model. Changing the 'Product Model' here will overwrite the existing selections for these photos."
Shot Angle Yes
  • If the selected photos have varying data for this field, the field will read "Multiple Values". However, "Multiple Values" is not a selectable option from the dropdown.
  • If information is missing within this field, it becomes red. The text within the select menu will read "Choose Shot Angle".
  • If user tries to submit the form without this information, error helper text below the field will read "One or more photos are missing a shot angle. Changing the 'Shot Angle' here will overwrite the existing selections for these photos."
Shot Composition Yes
  • If the selected photos have varying data for this field, the field will read "Multiple Values". However, "Multiple Values" is not a selectable option from the dropdown.
  • If information is missing within this field, it becomes red. The text within the select menu will read "Choose Shot Composition".
  • If user tries to submit the form without this information, error helper text below the field will read "One or more photos are missing a shot composition. Changing the 'Shot Composition' here will overwrite the existing selections for these photos."

Actions within section

Location of action Action Validation rules
Modal actions Display the filenames of the # photos to edit If selected, the collapse is triggered and it shows/hides each file to be edited as a line item within a bulleted list.
Modal actions
  • If the Cancel or x action is selected, the modal will close and no data will be changed.
  • If the Save Edits action is selected and errors exist within the modal, the missing fields will turn red with their respective error messages and user must fix errors before saving.
  • If the Save Edits action is selected and no errors are present, the data is saved, the modal closes, and the photo table is updated. The edit success alert shows at the top of the table.
Modal actions Editable fields
  • Product Type - Select menu
  • Product Family - Select menu
  • Product Model - Input field
  • Shot Angle - Select menu
  • Shot Composition - Select menu

Delete Photos

This modal pops up when the user checks a single or multiple photo checkboxes then selects the Delete # Photo(s) button.

Example screenshot of delete modal

Actions within section

Location of action Action Validation rules
Modal actions
  • If the No, do not delete or x action is selected, the modal will close and no data will be changed.
  • If the Yes, delete action is selected, the modal closes, the photos are deleted, and the photo table is updated. The delete success alert shows at the top of the table.

Alert Examples

We have many types of alert messaging. Below are examples of each type and where they might surface.

This type of alert is triggered when an action - or series of actions - fail and require attention from the user before that action can be completed. An example would be when a user tries to save photos, but at least one photo has incomplete data.

Example of a modal alert - verify action

This type of alert is triggered when an action is not easily reversable and requires user to verify they want to follow through with the selected action. An example would be when a user tries to delete photos.

Examples of in-line table alerts

Form error

This visual cue alerts the user that the photo has at least one failed field validation.

Added row

This visual cue alerts the user that a new row has been added to the photo table. The green coloration disappears after 5 seconds.

In-page success alerts

These alerts show when the uploader has successfully completed a task. These alerts are dismissable if the user clicks the x; however, if no actions were taken by the user, the alert will automatically disappear after 10 seconds unless noted otherwise.

Add new photo - task completed

This alert shows after you have selected Save # photos from the sticky footer and the task of creating those photos has finished. You're then redirected to the product photography library page where this alert is shown at the top of the table. The text for the alert changes based on the number of photos uploaded.

Edit photo - task completed

This alert shows above the photo table after the user has selected the Save Edits button within the Edit Photos modal. The text for the alert changes based on the number of photos edited.

Delete - task completed

This alert shows above the photo table after the user has confirmed their delete from the Delete Photos modal. The text for the alert changes based on the number of photos deleted.

Uploader ready to add photos to library - task can be started

This alert shows above the photo table after the user has selected files for upload, information has been parsed from the filename, and there is no missing data for the photos. This alert is not dismissable by the user and stays on the page until user saves from the sticky footer or there is a new detectable error.

In-page error alerts

These alerts show when the uploader will not start a task, because there are errors on the page. These alerts are not dismissable by the user, and stay on the page until all errors are fixed.

Cannot add photos to library - task on hold

This alert shows above the photo table after you have selected files to upload, information has been parsed from the filename, and there is missing data on at least one photo. There is a counter within the alert that keeps track of fixed errors. Once all errors are fixed, this alert disappears and the Uploader ready to add photos to library alert takes its place. The text for the alert changes based on the number of photos with errors.

Loading Messaging

The loading message shows when the uploader is processing data. The message within the loading modal can differ based on the actions taken. The loading symbol also appears in place of the thumbnail within a table until the thumbnail is fully loaded.

General Loading

Triggered upon inital load of product photography library.

Loading

Saving

Triggered when user selects the Save # photos button.

Saving

Uploading Progress

Shows progress of photos being uploaded to the library.

25% Complete
Uploading Photos: 1/4