Create a new module that allows a user to drag and drop images into whatever order they would like, then, upon pressing a button, display the order data.

This module could be used to ask users in what order, chronologically, they believe a set of photos were taken, and submit this data to an app.

This will be included with Other Modules.

Add an Edit button to the file displays in the Collective Memory homepage form.

Clicking such an edit button should re-open the add file modal, but filled with the data from the hidden form inputs for the associated file.

Trouble so far has been caused by the file input. For security reasons, the value of file inputs cannot be copied. To circumvent this, the code moves the file input DOM element from the hidden form to the modal when opening the modal, and back when closing it. The problem occurs when a user clicks the edit button (opening the modal and moving the file input to the modal), changes the file, but then cancels the edit (returning the file input to the form). Because a single file input exists and is relocated in the DOM, rather than copying value, this changes the file even though the user cancelled the action. The previous value cannot be saved to be restored, because file inputs' values cannot be copied. One possible solution would be to implement the following behavior:

• User clicks the edit button for file N (fN)
• The values of all metadata inputs for fN are copied to their associated inputs in the modal
• The text field of the modal's file input group is changed to display the file in fN
• A new file input is created in the modal's file input group
• An event handler is created to change the value of the text field of the modal's file input group when the new file input is changed
• If the user saves the edit:
  • Delete the file input for fN
  • Move the new file input to the hidden form where the fN file input was previously
  • Add the appropriate name and id to the new file input ("fN-file")
  • Change the file display's text field to display the new file name
• If the user cancel's the edit:
  • Delete the new file input
  • Make sure the file display's text field is the file name of fN

Also consider that the modal's title should be "Edit File" instead of "Add File", and the modal's primary button should be "Save" instead of "Add", when editing a file.

Also consider that moving data-file-id from the delete button to the display div containing the delete button and the edit button will allow both buttons to use the same data attribute and keep the code more DRY.

Add a Google Maps API map to collect the file's location metadata in the add file modal of the Collective Memories homepage. This should look and function like the map already implemented in the main form of the Collective Memories homepage, but should not interfere with that map's function. As such, many parts of map.js may need to be refactored and made more generic.

This will require new hidden inputs for each file (i.e. "fN-location-lat" and "fN-location-lng") which will replace the "fN-location" text input. The database and submit.php must be modified to accept this new location format.

Currently, in submit.php, database queries that do not take user input still use prepared statements. Investigate:

• Are prepared statements necessary for queries with no user input?
• If not, is there any detriment (performance, standards) to using them anyway? Note always using them makes the code more uniform.
• If so, what is the best way to perform queries with no user input?

After investigation, if a better solution is discovered, implement that solution.

Currently, fileCollection.js contains a constant, MAX_FILES, set to 5 by default. However, both the Collective Memory homepage and submit.php expect there to be a maximum of 5 files. Handle up to an arbitrary number of files based on MAX_FILES in fileCollection.js. This will require:

• Generating MAX_FILES hidden file input groups in the Collective Memory homepage form, preferably via fileCollection.js
• Generating MAX_FILES input display groups in the Collective Memory homepage form, preferably via fileCollection.js
• Passing MAX_FILES to submit.php
• Handling checking up to MAX_FILES file submissions and adding them to the database appropriately in submit.php (Note that in the current implementation, submitted files' may not be in numeric order. e.g. file 2 may be submitted even if file 1 is not)

Files should be given the identifiers "f1" through "f[MAX_FILES]" for consistency. That includes names and ids in the Collective Memory homepage (f1-file, f1-title, etc.) and variable names in submit.php.

Currently, in the Collective Memory app, input to the database uses prepared statements, but no sanitation or validation of user inputs is performed. Sanitation and validation should be performed in submit.php.