diff --git a/package-lock.json b/package-lock.json
index 52fa908c..b3af31f6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
         "@types/react-dom": "^19.0.2",
         "antd": "^5.22.1",
         "blockly": "^11.1.1",
+        "jszip": "^3.10.1",
         "lucide-react": "^0.460.0",
         "re-resizable": "^6.10.1",
         "react": "^18.3.1",
@@ -3207,6 +3208,12 @@
         "toggle-selection": "^1.0.6"
       }
     },
+    "node_modules/core-util-is": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
+      "license": "MIT"
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.5",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.5.tgz",
@@ -3973,11 +3980,16 @@
         }
       ]
     },
+    "node_modules/immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
+      "license": "MIT"
+    },
     "node_modules/inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "dev": true
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
     "node_modules/is-alphabetical": {
       "version": "1.0.4",
@@ -4134,6 +4146,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
+      "license": "MIT"
+    },
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -4261,6 +4279,48 @@
         "graceful-fs": "^4.1.6"
       }
     },
+    "node_modules/jszip": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
+      "integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==",
+      "license": "(MIT OR GPL-3.0-or-later)",
+      "dependencies": {
+        "lie": "~3.3.0",
+        "pako": "~1.0.2",
+        "readable-stream": "~2.3.6",
+        "setimmediate": "^1.0.5"
+      }
+    },
+    "node_modules/jszip/node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "license": "MIT",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/jszip/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "license": "MIT"
+    },
+    "node_modules/jszip/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
     "node_modules/kleur": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
@@ -4270,6 +4330,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/lie": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
+      "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "immediate": "~3.0.5"
+      }
+    },
     "node_modules/lilconfig": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
@@ -4812,6 +4881,12 @@
       "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
       "dev": true
     },
+    "node_modules/pako": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
+      "license": "(MIT AND Zlib)"
+    },
     "node_modules/parse-entities": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-2.0.0.tgz",
@@ -5166,6 +5241,12 @@
         "node": ">=6"
       }
     },
+    "node_modules/process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
+      "license": "MIT"
+    },
     "node_modules/prompts": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.2.tgz",
@@ -6081,6 +6162,12 @@
         "compute-scroll-into-view": "^3.0.2"
       }
     },
+    "node_modules/setimmediate": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
+      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==",
+      "license": "MIT"
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -6987,8 +7074,7 @@
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-      "dev": true
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
     },
     "node_modules/vite": {
       "version": "6.1.0",
diff --git a/package.json b/package.json
index 3b577046..f7acd64d 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "@types/react-dom": "^19.0.2",
     "antd": "^5.22.1",
     "blockly": "^11.1.1",
+    "jszip": "^3.10.1",
     "lucide-react": "^0.460.0",
     "re-resizable": "^6.10.1",
     "react": "^18.3.1",
diff --git a/src/App.tsx b/src/App.tsx
index ac5d39ad..546e1dab 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -14,10 +14,12 @@ import {
   Tooltip,
   Tree,
   Typography,
-  theme
+  theme,
+  Upload
 } from 'antd';
 import type { InputRef } from 'antd';
 import type { TreeDataNode, TreeProps } from 'antd';
+import type { UploadProps } from 'antd';
 import {
   AppstoreAddOutlined as MechanismAddOutlined,
   AppstoreOutlined as MechanismOutlined,
@@ -348,7 +350,7 @@ const App: React.FC = () => {
       if (errorMessage) {
         setAlertErrorMessage('Unable to load the list of modules: ' + errorMessage);
         setAlertErrorVisible(true);
-        return
+        return;
       }
       if (array != null) {
         setModules(array)
@@ -894,17 +896,65 @@ const App: React.FC = () => {
     setOpenPopconfirm(true);
   };
 
-  const handleUploadClicked = () => {
-    messageApi.open({
-      type: 'success',
-      content: 'Not implemented yet .',
-    });
+  const uploadProps: UploadProps = {
+    accept: commonStorage.UPLOAD_DOWNLOAD_FILE_EXTENSION,
+    beforeUpload: (file) => {
+      const isBlocks = file.name.endsWith(commonStorage.UPLOAD_DOWNLOAD_FILE_EXTENSION)
+      if (!isBlocks) {
+        setAlertErrorMessage(file.name + ' is not a blocks file');
+        setAlertErrorVisible(true);
+        return false;
+      }
+      return isBlocks || Upload.LIST_IGNORE;
+    },
+    onChange: (info) => {
+    },
+    customRequest: ({ file, onSuccess, onError }) => {
+      const reader = new FileReader();
+      reader.onload = (event) => {
+        const dataUrl = event.target.result;
+        const uploadProjectName = commonStorage.makeUploadProjectName(file.name, getProjectNames());
+        storage.uploadProject(
+            uploadProjectName, dataUrl,
+            (success: boolean, errorMessage: string) => {
+              if (success) {
+                onSuccess('Upload successful');
+                afterListModulesSuccess.current = () => {
+                  const uploadProjectPath = commonStorage.makeProjectPath(uploadProjectName);
+                  setCurrentModulePath(uploadProjectPath);
+                };
+                setTriggerListModules(!triggerListModules);
+              } else {
+                onError(errorMessage);
+                setAlertErrorMessage('Unable to upload the project');
+                setAlertErrorVisible(true);
+              }
+            });
+      };
+      reader.onerror = (error) => {
+        onError(error);
+        setAlertErrorMessage('Unable to upload the project');
+        setAlertErrorVisible(true);
+      };
+      reader.readAsDataURL(file);
+    },
   };
 
   const handleDownloadClicked = () => {
-    messageApi.open({
-      type: 'success',
-      content: 'Not implemented yet .',
+    checkIfBlocksWereModified(() => {
+      storage.downloadProject(
+          currentModule.projectName,
+          (url: string | null, errorMessage: string) => {
+            if (errorMessage) {
+              setAlertErrorMessage('Unable to download the project: ' + errorMessage);
+              setAlertErrorVisible(true);
+              return;
+            }
+            const link = document.createElement('a');
+            link.href = url;
+            link.download = currentModule.projectName + commonStorage.UPLOAD_DOWNLOAD_FILE_EXTENSION;
+            link.click();
+          });
     });
   };
 
@@ -1083,16 +1133,20 @@ const App: React.FC = () => {
                     >
                     </Button>
                   </Tooltip>
-                  <Tooltip title="Upload">
-                    <Button
-                      icon={<UploadOutlined />}
-                      size="small"
-                      onClick={handleUploadClicked}
-                      style={{ color: 'white' }}
+                  <Tooltip title="Upload Project">
+                    <Upload
+                      {...uploadProps}
+                      showUploadList={false}
                     >
-                    </Button>
+                      <Button
+                        icon={<UploadOutlined />}
+                        size="small"
+                        style={{ color: 'white' }}
+                      >
+                      </Button>
+                    </Upload>
                   </Tooltip>
-                  <Tooltip title="Download">
+                  <Tooltip title="Download Project">
                     <Button
                       icon={<DownloadOutlined />}
                       size="small"
diff --git a/src/storage/client_side_storage.ts b/src/storage/client_side_storage.ts
index 9e7cda36..2a571bad 100644
--- a/src/storage/client_side_storage.ts
+++ b/src/storage/client_side_storage.ts
@@ -80,14 +80,17 @@ export function saveEntry(
       callback(true, '');
     }
   };
+  transaction.onabort = () => {
+    if (callback) {
+      callback(false, 'Save entry failed.');
+    }
+  };
   const entriesObjectStore = transaction.objectStore('entries');
   const getRequest = entriesObjectStore.get(entryKey);
   getRequest.onerror = (event: Event) => {
     console.log('IndexedDB get request failed:');
     console.log(getRequest.error);
-    if (callback) {
-      callback(false, 'Save entry failed. (getRequest error)');
-    }
+    throw new Error('getRequest error');
   };
   getRequest.onsuccess = (event: Event) => {
     let value;
@@ -102,9 +105,7 @@ export function saveEntry(
     putRequest.onerror = (event: Event) => {
       console.log('IndexedDB put request failed:');
       console.log(putRequest.error);
-      if (callback) {
-        callback(false, 'Save entry failed. (putRequest error)');
-      }
+      throw new Error('putRequest error');
     };
   };
 }
@@ -302,29 +303,36 @@ function _saveModule(
   transaction.oncomplete = (event: Event) => {
     callback(true, '');
   };
+  transaction.onabort = () => {
+    callback(false, 'Save module failed.');
+  };
   const modulesObjectStore = transaction.objectStore('modules');
   const getRequest = modulesObjectStore.get(modulePath);
   getRequest.onerror = (event: Event) => {
     console.log('IndexedDB get request failed:');
     console.log(getRequest.error);
-    callback(false, 'Save module failed. (getRequest error)');
+    throw new Error('getRequest error');
   };
   getRequest.onsuccess = (event: Event) => {
     let value;
     if (getRequest.result === undefined) {
+      // The module does not exist.
+      // Let's make sure that's what we expected.
       if (!moduleType) {
-        // Since moduleType is not truthy, we are trying to save an existing module.
-        // So it is unexpected that the getRequest.result is undefined.
-        throw new Error('Unable to save module ' + modulePath);
+        // If moduleType is not truthy, we are trying to save an existing module.
+        // It is unexpected that the module does not exist.
+        throw new Error('Unable to save module ' + modulePath + ' because the module does not exist.');
       }
       value = Object.create(null);
       value.path = modulePath;
       value.type = moduleType;
     } else {
+      // The module already exists.
+      // Let's make sure if that's what we expected.
       if (moduleType) {
-        // Since moduleType is truthy, we are trying to create an existing module.
-        // So it is unexpected that the getRequest.result is not undefined.
-        throw new Error('Unable to create module ' + modulePath);
+        // Since moduleType is truthy, we are trying to create a new module.
+        // It is unexpected that the module already exists.
+        throw new Error('Unable to create module ' + modulePath + ' because the module already exists.');
       }
       value = getRequest.result;
     }
@@ -334,7 +342,7 @@ function _saveModule(
     putRequest.onerror = (event: Event) => {
       console.log('IndexedDB put request failed:');
       console.log(putRequest.error);
-      callback(false, 'Save module failed. (putRequest error)');
+      throw new Error('putRequest error');
     };
   };
 }
@@ -360,6 +368,9 @@ function _renameOrCopyProject(
   transaction.oncomplete = (event: Event) => {
     callback(true, '');
   };
+  transaction.onabort = () => {
+    callback(false, errorMessage);
+  };
   const modulesObjectStore = transaction.objectStore('modules');
   // First get the list of modules in the project.
   const oldToNewModulePaths: {[key: string]: string} = {};
@@ -367,7 +378,7 @@ function _renameOrCopyProject(
   openCursorRequest.onerror = (event: Event) => {
     console.log('IndexedDB openCursor request failed:');
     console.log(openCursorRequest.error);
-    callback(false, errorMessage + ' Could not open cursor.');
+    throw new Error('openCursorRequest error');
   };
   openCursorRequest.onsuccess = (event: Event) => {
     const cursor = openCursorRequest.result;
@@ -393,12 +404,11 @@ function _renameOrCopyProject(
         getRequest.onerror = (event: Event) => {
           console.log('IndexedDB get request failed:');
           console.log(getRequest.error);
-          callback(false, errorMessage + ' (getRequest error)');
+          throw new Error('getRequest error');
         };
         getRequest.onsuccess = (event: Event) => {
           if (getRequest.result === undefined) {
-            callback(false, errorMessage + ' (project not found)');
-            return;
+            throw new Error('project not found');
           }
           const value = getRequest.result;
           value.path = newModulePath;
@@ -407,7 +417,7 @@ function _renameOrCopyProject(
           putRequest.onerror = (event: Event) => {
             console.log('IndexedDB put request failed:');
             console.log(putRequest.error);
-            callback(false, errorMessage + ' (putRequest error)');
+            throw new Error('putRequest error');
           };
           putRequest.onsuccess = (event: Event) => {
             if (!copy) {
@@ -415,7 +425,7 @@ function _renameOrCopyProject(
               deleteRequest.onerror = (event: Event) => {
                 console.log('IndexedDB delete request failed:');
                 console.log(deleteRequest.error);
-                callback(false, errorMessage + ' (deleteRequest error)');
+                throw new Error('deleteRequest error');
               };
               deleteRequest.onsuccess = (event: Event) => {
               };
@@ -476,6 +486,9 @@ function _renameOrCopyModule(
   transaction.oncomplete = (event: Event) => {
     callback(true, '');
   };
+  transaction.onabort = () => {
+    callback(false, errorMessage);
+  };
   const modulesObjectStore = transaction.objectStore('modules');
   const oldModulePath = commonStorage.makeModulePath(projectName, oldModuleName);
   const newModulePath = commonStorage.makeModulePath(projectName, newModuleName);
@@ -483,11 +496,11 @@ function _renameOrCopyModule(
   getRequest.onerror = (event: Event) => {
     console.log('IndexedDB get request failed:');
     console.log(getRequest.error);
-    callback(false, errorMessage + ' (getRequest error)');
+    throw new Error('getRequest error');
   };
   getRequest.onsuccess = (event: Event) => {
     if (getRequest.result === undefined) {
-      callback(false, errorMessage + ' (module not found)');
+      throw new Error('module not found');
       return;
     }
     const value = getRequest.result;
@@ -497,7 +510,7 @@ function _renameOrCopyModule(
     putRequest.onerror = (event: Event) => {
       console.log('IndexedDB put request failed:');
       console.log(putRequest.error);
-      callback(false, errorMessage + ' (putRequest error)');
+      throw new Error('putRequest error');
     };
     putRequest.onsuccess = (event: Event) => {
       if (!copy) {
@@ -505,7 +518,7 @@ function _renameOrCopyModule(
         deleteRequest.onerror = (event: Event) => {
           console.log('IndexedDB delete request failed:');
           console.log(deleteRequest.error);
-          callback(false, errorMessage + ' (deleteRequest error)');
+          throw new Error('deleteRequest error');
         };
         deleteRequest.onsuccess = (event: Event) => {
         };
@@ -531,6 +544,9 @@ function _deleteProject(
   transaction.oncomplete = (event: Event) => {
     callback(true, '');
   };
+  transaction.onabort = () => {
+    callback(false, 'Delete project failed.');
+  };
   const modulesObjectStore = transaction.objectStore('modules');
   // First get the list of modulePaths in the project.
   const modulePaths: string[] = [];
@@ -538,7 +554,7 @@ function _deleteProject(
   openCursorRequest.onerror = (event: Event) => {
     console.log('IndexedDB openCursor request failed:');
     console.log(openCursorRequest.error);
-    callback(false, 'Delete project failed. Could not open cursor.');
+    throw new Error('openCursorRequest error');
   };
   openCursorRequest.onsuccess = (event: Event) => {
     const cursor = openCursorRequest.result;
@@ -556,7 +572,7 @@ function _deleteProject(
         deleteRequest.onerror = (event: Event) => {
           console.log('IndexedDB delete request failed:');
           console.log(deleteRequest.error);
-          callback(false, 'Delete project failed. (deleteRequest error)');
+          throw new Error('deleteRequest error');
         };
         deleteRequest.onsuccess = (event: Event) => {
         };
@@ -590,13 +606,119 @@ export function deleteModule(
   transaction.oncomplete = (event: Event) => {
     callback(true, '');
   };
+  transaction.onabort = () => {
+    callback(false, 'Delete module failed.');
+  };
   const modulesObjectStore = transaction.objectStore('modules');
   const deleteRequest = modulesObjectStore.delete(modulePath);
   deleteRequest.onerror = (event: Event) => {
     console.log('IndexedDB delete request failed:');
     console.log(deleteRequest.error);
-    callback(false, 'Delete module failed. (deleteRequest error)');
+    throw new Error('deleteRequest error');
   };
   deleteRequest.onsuccess = (event: Event) => {
   };
 }
+
+export async function downloadProject(projectName: string, callback: StringCallback): void {
+  if (!db) {
+    _openDatabase((success: boolean, errorReason: string) => {
+      if (success) {
+        downloadProject(projectName, callback);
+      } else {
+        callback(null, 'Download project failed. (' + errorReason + ')');
+      }
+    });
+    return;
+  }
+
+  // Collect all the modules in the project.
+  const moduleContents: {[key: string]: string} = {}; // key is module name, value is module content
+  const openCursorRequest = db.transaction(['modules'], 'readonly')
+      .objectStore('modules')
+      .openCursor();
+  openCursorRequest.onerror = (event: Event) => {
+    console.log('IndexedDB openCursor request failed:');
+    console.log(openCursorRequest.error);
+    callback(null, 'Download project failed. Could not open cursor.');
+  };
+  openCursorRequest.onsuccess = async (event: Event) => {
+    const cursor = openCursorRequest.result;
+    if (cursor) {
+      const value = cursor.value;
+      if (commonStorage.getProjectName(value.path) === projectName) {
+        const moduleName = commonStorage.getModuleName(value.path);
+        moduleContents[moduleName] = value.content;
+      }
+      cursor.continue();
+    } else {
+      // The cursor is done. We have finished collecting all the modules in the project.
+      // Now create the blob for download.
+      const blobUrl = await commonStorage.produceDownloadProjectBlob(projectName, moduleContents);
+      callback(blobUrl, '');
+    }
+  };
+}
+
+export async function uploadProject(projectName: string, blobUrl: string, callback: BooleanCallback): void {
+  if (!db) {
+    _openDatabase((success: boolean, errorReason: string) => {
+      if (success) {
+        uploadProject(projectName, url, callback);
+      } else {
+        callback(false, 'Upload project failed. (' + errorReason + ')');
+      }
+    });
+    return;
+  }
+
+  // Process the uploaded blob to get the module types and contents.
+  let moduleTypes: {[key: string]: string}; // key is module name, value is module content
+  let moduleContents: {[key: string]: string}; // key is module name, value is module content
+  try {
+    [moduleTypes, moduleContents] = await commonStorage.processUploadedBlob(
+        projectName, blobUrl);
+  } catch (e) {
+    callback(false, 'Upload project failed. (' + e + ')');
+  }
+
+  // Save each module.
+  const transaction = db.transaction(['modules'], 'readwrite');
+  transaction.oncomplete = (event: Event) => {
+    callback(true, '');
+  };
+  transaction.onabort = () => {
+    callback(false, 'Upload project failed.');
+  };
+  const modulesObjectStore = transaction.objectStore('modules');
+
+  for (let moduleName in moduleTypes) {
+    const moduleType = moduleTypes[moduleName];
+    const moduleContent = moduleContents[moduleName];
+    const modulePath = commonStorage.makeModulePath(projectName, moduleName);
+    const getRequest = modulesObjectStore.get(modulePath);
+    getRequest.onerror = (event: Event) => {
+      console.log('IndexedDB get request failed:');
+      console.log(getRequest.error);
+      throw new Error('Unable to create module ' + modulePath
+          + '. (getRequest error)');
+    };
+    getRequest.onsuccess = (event: Event) => {
+      if (getRequest.result !== undefined) {
+        // The module already exists. That is not expected!
+        throw new Error('Unable to create module ' + modulePath + ' because the module already exists.');
+      }
+      const value = Object.create(null);
+      value.path = modulePath;
+      value.type = moduleType;
+      value.content = moduleContent;
+      value.dateModifiedMillis = Date.now();
+      const putRequest = modulesObjectStore.put(value);
+      putRequest.onerror = (event: Event) => {
+        console.log('IndexedDB put request failed:');
+        console.log(putRequest.error);
+        throw new Error('Unable to create module. (putRequest error)');
+      };
+    };
+  }
+}
diff --git a/src/storage/common_storage.ts b/src/storage/common_storage.ts
index 14d8a158..66342aed 100644
--- a/src/storage/common_storage.ts
+++ b/src/storage/common_storage.ts
@@ -19,6 +19,8 @@
  * @author lizlooney@google.com (Liz Looney)
  */
 
+import JSZip from 'jszip';
+
 import * as Blockly from 'blockly/core';
 
 import {Block} from "../toolbox/items";
@@ -62,6 +64,8 @@ const PARTS_INDEX_EXPORTED_BLOCKS = 1;
 const PARTS_INDEX_MODULE_TYPE = 2;
 const NUMBER_OF_PARTS = 3;
 
+export const UPLOAD_DOWNLOAD_FILE_EXTENSION = '.blocks';
+
 /**
  * Returns the module with the given module path, or null if it is not found.
  */
@@ -133,23 +137,6 @@ export function getModuleName(modulePath: string): string {
   return result[2];
 }
 
-/**
- * Returns the download file name for the given module path.
- */
-export function makeDownloadFileName(modulePath: string): string {
-  return getProjectName(modulePath) + '-' + getModuleName(modulePath) + '.wpilib_blocks';
-}
-
-export function makeUploadProjectName(uploadFileName: string): string {
-  // Check if the name is <project name>-<project name>.
-  const regex = new RegExp('^([a-z_][a-z0-9_]*)-([a-z_][a-z0-9_]*).wpilib_blocks$');
-  const result = regex.exec(uploadFileName);
-  if (!result || result[1] !== result[2]) {
-    throw new Error(uploadFileName + ' is not a valid file name for uploading as a project');
-  }
-  return result[2];
-}
-
 /**
  * Returns the module content for a new Project.
  */
@@ -324,3 +311,158 @@ export function extractModuleType(moduleName: string, moduleContent: string): Bl
   }
   return moduleType;
 }
+
+/**
+ * Produce the blob for downloading a project.
+ */
+export async function produceDownloadProjectBlob(
+    projectName: string, moduleContents: {[key: string]: string}): string {
+  const zip = new JSZip();
+  for (let moduleName in moduleContents) {
+    const moduleContent = moduleContents[moduleName];
+    const moduleContentForDownload = _processModuleContentForDownload(
+        projectName, moduleName, moduleContent);
+    zip.file(moduleName, moduleContentForDownload);
+  }
+  const content = await zip.generateAsync({ type: "blob" });
+  const blobUrl = URL.createObjectURL(content);
+  return blobUrl;
+}
+
+/**
+ * Process the module content so it can be downloaded.
+ */
+function _processModuleContentForDownload(
+    projectName: string, moduleName: string, moduleContent: string): string {
+  const parts = getParts(moduleContent);
+  let blocksContent = parts[PARTS_INDEX_BLOCKS_CONTENT];
+  if (blocksContent.startsWith(MARKER_BLOCKS_CONTENT)) {
+    blocksContent = blocksContent.substring(MARKER_BLOCKS_CONTENT.length);
+  }
+  let moduleType = parts[PARTS_INDEX_MODULE_TYPE];
+  if (moduleType.startsWith(MARKER_MODULE_TYPE)) {
+    moduleType = moduleType.substring(MARKER_MODULE_TYPE.length);
+  }
+
+  const module: Module = {
+    modulePath: makeModulePath(projectName, moduleName),
+    moduleType: moduleType,
+    projectName: projectName,
+    moduleName: moduleName,
+    dateModifiedMillis: 0,
+  };
+
+  // Clear out the python content and exported blocks.
+  const pythonCode = '';
+  const exportedBlocks = '[]';
+  return makeModuleContent(module, pythonCode, exportedBlocks, blocksContent);
+}
+
+/**
+ * Make a unique project name for an uploaded project.
+ */
+export function makeUploadProjectName(
+    uploadFileName: string, existingProjectNames: string[]): string {
+  const preferredName = uploadFileName.substring(
+      0, uploadFileName.length - UPLOAD_DOWNLOAD_FILE_EXTENSION.length);
+  let name = preferredName; // No suffix.
+  let suffix = 0;
+  while (true) {
+    var nameClash = false;
+    for (const existingProjectName of existingProjectNames) {
+      if (name == existingProjectName) {
+        nameClash = true;
+        break;
+      }
+    }
+    if (!nameClash) {
+      return name;
+    }
+    suffix++;
+    name = preferredName + suffix;
+  }
+}
+
+/**
+ * Process the uploaded blob to get the module types and contents.
+ */
+export async function processUploadedBlob(
+    projectName: string, blobUrl: string)
+    : [{[key: string]: string}, {[key: string]: string}] {
+  const prefix = 'data:application/octet-stream;base64,';
+  if (!blobUrl.startsWith(prefix)) {
+    throw new Error('blobUrl does not have the expected prefix.');
+  }
+  const data = blobUrl.substring(prefix.length);
+
+  const zip = await JSZip.loadAsync(data, {base64: true});
+  const promises = {};
+  zip.forEach((moduleName, zipEntry) => {
+    promises[moduleName] = zipEntry.async('text');
+  });
+
+  // Wait for all promises to resolve.
+  const files: {[key: string]: string} = {}; // key is file name, value is content
+  await Promise.all(
+    Object.entries(promises).map(async ([filename, promise]) => {
+      files[filename] = await promise;
+    })
+  );
+
+  // Process each module's content.
+  const moduleTypes: {[key: string]: string} = {}; // key is module name, value is module type
+  const moduleContents: {[key: string]: string} = {}; // key is module name, value is module content
+  for (let filename in files) {
+    const uploadedContent = files[filename];
+    let [moduleName, moduleType, moduleContent] = _processUploadedModule(
+        projectName, filename, uploadedContent);
+
+    moduleTypes[moduleName] = moduleType;
+    moduleContents[moduleName] = moduleContent;
+  }
+
+  return [moduleTypes, moduleContents];
+}
+
+/**
+ * Processes an uploaded module to get the module name, type, and content.
+ */
+export function _processUploadedModule(
+    projectName: string, filename: string, uploadedContent: string)
+    : [string, string, string] {
+  const parts = getParts(uploadedContent);
+  let blocksContent = parts[PARTS_INDEX_BLOCKS_CONTENT];
+  if (blocksContent.startsWith(MARKER_BLOCKS_CONTENT)) {
+    blocksContent = blocksContent.substring(MARKER_BLOCKS_CONTENT.length);
+  }
+  let moduleType = parts[PARTS_INDEX_MODULE_TYPE];
+  if (moduleType.startsWith(MARKER_MODULE_TYPE)) {
+    moduleType = moduleType.substring(MARKER_MODULE_TYPE.length);
+  }
+
+  const moduleName = (moduleType === MODULE_TYPE_PROJECT)
+      ? projectName : filename;
+
+  const module: Module = {
+    modulePath: makeModulePath(projectName, moduleName),
+    moduleType: moduleType,
+    projectName: projectName,
+    moduleName: moduleName,
+    dateModifiedMillis: 0,
+  };
+
+  // Generate the python content and exported blocks.
+  // Create a headless blockly workspace.
+  const headlessBlocklyWorkspace = new Blockly.Workspace();
+  headlessBlocklyWorkspace.options.oneBasedIndex = false;
+  Blockly.serialization.workspaces.load(
+      JSON.parse(blocksContent), headlessBlocklyWorkspace);
+  extendedPythonGenerator.setCurrentModule(module);
+  const pythonCode = extendedPythonGenerator.workspaceToCode(
+      headlessBlocklyWorkspace);
+  const exportedBlocks = JSON.stringify(
+      extendedPythonGenerator.getExportedBlocks(headlessBlocklyWorkspace));
+  const moduleContent = makeModuleContent(
+      module, pythonCode, exportedBlocks, blocksContent);
+  return [moduleName, moduleType, moduleContent];
+}