Multimedia Manager is a useful tool for organizing your audio and video multimedia files for a CommCare application. It allows you to upload, preview, and replace your audio and image files, verify that no files are missing, and enables one-click download of all your media files, with the correct file names.  When preparing your media files, be sure to follow the guidelines on the CommCare help site for audio and image file types and sizes.

You can add multimedia in the Form Builder, or you can add them in the Multimedia Manager.

STEP 1: Adding a multimedia reference 

  1. Inside the form builder, chose the question or label where you want an image to be displayed, or from which you want an audio file to be playable.
  2. In the Question Properties box you will find a section called Media which presents the option to add image, audio, or video files:

3. If you click on any of these buttons, you will see a file-path automatically generated. Here you can see what the Media section looks like with an image file-path added:

4. At this point you have the option of uploading an image direction into the form builder. Alternatively, you can just leave this reference and add the media through the Multimedia Manager. Note that if you add a reference but do not add a media file, your application will show the file-path instead of any image, so it is important to upload files for each reference you create. Don't worry, this is why the Multimedia Manager is there.

5. You can remove the reference by clicking on the red X.

6. You can also manually change the file-path by clicking on the Advanced: Show Path button.

7. Save the Form when you've finished your changes.

Note: You can also add multimedia (image, audio) in the module menu and the form menu using the same instructions found above for adding multimedia to a form.

 

Each language of display text gets its own set of file-paths in case you want separate files, so this can be useful when you want to use different images for each language.  However, by default the automatically generated file-paths are the same for all languages; you'll have to manually adjust them if you want support for more than one language.  The file path automatically uses the Question ID, so here is what it looks like for an image for the question labeled hemoglobin_low_counsel: 

jr://file/commcare/image/data/hemoglobin_low_counsel.png

Images are automatically given the file type "png" and audio files "mp3"

 

STEP 2: Uploading Files

Option 1: Form Builder

  1. You can add files directly in the form builder, if you choose to. If you do that, you will be able to see the files you have uploaded when viewing the Multimedia Manager. To upload a file, simply click on "Upload Image/Video/Audio" button in the Media Section of Question Properties.

 

Option 2: Multimedia Manager - Manual Upload

Before you use the multimedia manager, make sure that you have followed Step 1 for all files that you want to upload. That means that for any question for which you want a media file, you should have added the reference in the form builder.

You can find the Multimedia Manager for your application on the left-hand pane, just below the Settings link. After clicking on "Multimedia" you will see the following:

You will use "Download ZIP" later to grab all of your files at once.  Below that there is a list of how many references are missing files. Click on the blue "Multimedia Reference Checker" button to upload files for all the references.

A new window will open that will look like this:

Again, you can see the number of missing files, and have the option to download a ZIP of all the multimedia files. 

Let's try uploading an image file.

  1. If you have not yet uploaded any files, after clicking on "Image References" you will see something like this:

2. The manager alerts you that each file is missing, and you will need to select the green button "Upload or select Image."  There is one row for each missing file.  After clicking on "Upload or select Image" you will see something like this:

3. Click on "Select Image" to find the appropriate file on your computer.  You can also enter a key word into the search box and try to find a relevant image in our shared images library (not yet operational, as of September 2012)

4. After you select a file, you will have the option to "Change File" if it was not the correct file or to "Upload the Image."  Before uploading, if you are willing to share the media file and it is open source, you can check the box next to "Share this media" and enter some relevant keywords.  This will allow future CommCare users to use the media file.

5. After you have uploaded the media file, your list will no longer have red "missing" tags, but green "found" tags.  It should look more like this:

6. As you can see, your options from the Multimedia Manager have now changed.  You can preview the file by hovering your cursor over "Preview Image," or clicking on "Preview Image" to open the file in a new window (you'll have to open a new window to hear an uploaded audio file!).  If you want to change the image, click on "Replace Image" and follow the same instructions as before.  

 

Option 3: Multimedia Manager - Bulk Media Upload

In order to bulk upload your multimedia, you will need to do the following:

  1. Label your multimedia files with the relevant question ID eg. if question ID=woman_name, then label the audio/image file as woman_name
    1. Once all your multimedia files are correctly labeled (with the relevant question ID), you now have the option to bulk upload your files (images/audio/video)
  2. Place all your images/audio files into a directory structure that mirrors the file path
    1. You can see the file path in the Media section of the form builder by clicking on Advanced Show path  (see below)
      1. In the example below, the file path for the audio file is file/commcare/audio/data/anc_visit1
      2. In the below example, the file path for the image files is file/commcare/image/data/anc_visit1

 

 

3. The directory structure/folder structure for those files will look like the following

commcare\image\data\anc_visit1

Such that the file called anc_visit1 is in a folder called data.The data folder is in a folder called image and the image folder is in a folder called commcare (top level)

NB:  You can add all the relevant audio or image files into the appropriate data folder and now you can bulk upload them

Finally, you will need to make a Zip version of the commcare folder before proceeding to bulk upload on HQ.

 

4. Click on Multimedia from the left hand menu of CommCare HQ (see below)

 

5.  A new window will appear and you can now click on multimedia reference checker.

6. The multimedia reference checker page will open and you can now click on Go to bulk upload (see below)

 

 

7. Now click on Select Files and then Begin upload (see below)

 

Bulk uploading multiple languages:

If your app has multiple languages, it is still possible to bulk upload your multimedia files (audio/video). For the following, you should already have added the various languages to your app

Steps to take:

1. Go to the media section for a relevant question in your form

2. Click on the relevant section audio/video and you will see something like the below

 

(You will notice that the file path for the audio file is the same for French and English)

3. You will need to modify the file paths  for the audio files in the form

In the below example, we have added -en at the end of the English audio file and -fr at the end of the French audio file

4. You will also have to name the corresponding audio/video files in the same way e.g nom_femme-en and nom_femme-fr

You should then be able to follow the steps above for bulk upload!

 

 

STEP 3: Download Your Media Files!

Once you have uploaded all of your media files you can easily download all of them in one click, with all the correct file names.  You can choose to download the Media ZIP from several locations on CommCareHQ:

  1. On the main application page under "Multimedia"
  2. In the Multimedia Manager main page (see above)
  3. In the release manager of your application after clicking "deploy"
  4. The file will be downloaded as a ZIP and you will have to unzip the file in order to use it.  By storing and transmitting it as a ZIP is a good idea so that you don't lose any of those media files!

Important Notes: