delete local file upload when file deleted

packages/builder/src/components/common/Dropzone.svelte

@@ -27,7 +27,7 @@
       size,
     }))
 
-    const response = await api.post(`/api/files/process`, {
+    const response = await api.post(`/api/attachments/process`, {
       files: filesToProcess,
     })
     const processedFiles = await response.json()
@@ -35,7 +35,8 @@
     selectedImageIdx = 0
   }
 
-  function removeFile() {
+  async function removeFile() {
+    const response = await api.delete(`/api/attachments/${selectedImage.fileName}`)
     files.splice(selectedImageIdx, 1)
     files = files
   }

packages/server/src/api/controllers/deploy/aws.js

@@ -120,21 +120,22 @@ exports.uploadAppAssets = async function({
   const db = new PouchDB(instanceId)
   const fileUploads = await db.get("_local/fileuploads")
   if (fileUploads) {
-    fileUploads.awaitingUpload.forEach((file, idx) => {
+    for (let file of fileUploads.uploads) {
+      if (file.uploaded) continue
 
         const attachmentUpload = prepareUploadForS3({
           filePath: file.path,
-        s3Key: `assets/${appId}/${file.name}`,
+          s3Key: `assets/${appId}/attachments/${file.name}`,
           s3,
           metadata: { accountId }
         })
 
         uploads.push(attachmentUpload)
 
-      // move the pending upload to the uploaded array
-      fileUploads.awaitingUpload.splice(idx, 1);
-      fileUploads.uploaded.push(awaitingUpload);
-    })
+        // mark file as uploaded
+        file.uploaded = true
+    }
+
     db.put(fileUploads);
   }
 

packages/server/src/api/controllers/static/index.js

@@ -21,6 +21,21 @@ exports.serveBuilder = async function(ctx) {
   await send(ctx, ctx.file, { root: ctx.devPath || builderPath })
 }
 
+exports.deleteLocalFileUpload = async function(ctx) {
+  try {
+    const db = new CouchDB(ctx.user.instanceId);
+    let fileUploads = await db.get("_local/fileuploads")
+    fileUploads.uploads = fileUploads.uploads.filter(upload => upload.fileName !== ctx.fileName)
+    // TODO: possibly remove the file as well
+    await db.put(fileUploads);
+    ctx.body = {
+      message: `${ctx.fileName} deleted.`
+    }
+  } catch (err) {
+    ctx.throw(500, err)
+  }
+}
+
 exports.processLocalFileUpload = async function(ctx) {
   const { files } = ctx.request.body
 
@@ -36,6 +51,7 @@ exports.processLocalFileUpload = async function(ctx) {
 
     return {
       ...file,
+      fileName,
       extension: fileExtension,
       outputPath: join(attachmentsPath, fileName),
       clientUrl: join("/attachments", fileName),
@@ -59,11 +75,10 @@ exports.processLocalFileUpload = async function(ctx) {
       .then(data => fileUploads = data)
       .catch(() => fileUploads = {
         _id: "_local/fileuploads",
-        awaitingUpload: [],
-        uploaded: []
+        uploads: []
       })
 
-    fileUploads.awaitingUpload = [...filesToProcess, ...fileUploads.awaitingUpload]
+    fileUploads.uploads = [...filesToProcess, ...fileUploads.uploads]
     await db.put(fileUploads)
 
     ctx.body = filesToProcess 

packages/server/src/api/routes/static.js

@@ -23,7 +23,8 @@ if (env.NODE_ENV !== "production") {
 }
 
 router
-  .post("/api/files/process", authorized(BUILDER), controller.processLocalFileUpload)
+  .post("/api/attachments/process", authorized(BUILDER), controller.processLocalFileUpload)
+  .delete("/api/attachments/:fileName*", authorized(BUILDER), controller.deleteLocalFileUpload)
   .get("/componentlibrary", controller.serveComponentLibrary)
   .get("/assets/:file*", controller.serveAppAsset)
   .get("/attachments/:file*", controller.serveAttachment)