feat: undo upload

index.js

@@ -65,8 +65,9 @@ ipcMain.on('addFile', async (event) => {
     event.sender.send('addedFile', metadata, file);
 });
 
+let filename, category;
 ipcMain.on('upload', (event, arg) => {
-    const filename = crypto.randomBytes(8).toString('hex');
+    filename = crypto.randomBytes(8).toString('hex');
     // compress
     sharp(fs.readFileSync(file), { quality: 85, reductionEffort: 6 })
     .toFile(`./${filename}.webp`, (err) => { 
@@ -80,13 +81,17 @@ ipcMain.on('upload', (event, arg) => {
 
         // upload
         cloudinary.v2.uploader.upload(`./${filename}.webp`, {
-            folder: 'photos/' + arg.category.toLowerCase()
-        }, async (err) => {
+            folder: 'photos/' + arg.category.toLowerCase(),
+            use_filename: true
+        }, async (err, res) => {
             fs.unlinkSync(`./${filename}.webp`);
             if (err) {
                 return event.sender.send('message', 'Failed to upload image');
             }
 
+            cloudinary_id = res.asset_id;
+            category = arg.category;
+
             // add to db
             const { error } = await supabase
             .from('newimages')
@@ -101,12 +106,32 @@ ipcMain.on('upload', (event, arg) => {
             if (error) { 
                 event.sender.send('message', 'Failed to add image to database');
             } else {
-                event.sender.send('message', 'Success');
+                event.sender.send('message', 'Uploaded successfully');
             }
         });
     });
 });
 
+ipcMain.on('undo', (event) => { 
+    cloudinary.v2.uploader.destroy('photos/' + category.toLowerCase() + '/' + filename, {
+        invalidate: true
+    }, async (err) => {
+        if (err) {
+            return event.sender.send('Failed to delete image');
+        }
+
+        const { error } = await supabase
+        .from('newimages')
+        .delete()
+        .match({ filename: filename });
+
+        if (error) { 
+            event.sender.send('message', 'Failed to delete image from database');
+        } else {
+            event.sender.send('message', 'Removed successfully');
+        }
+    });
+});
 
 ipcMain.on('titlebar', (_event, arg) => { 
     switch (arg) {  

public/index.css

@@ -46,12 +46,17 @@ select {
     border-radius: 5px;
 }
 
+::selection {
+    background: var(--tab-active);
+}
+
 /* titlebar */
 body {
     padding: 0px;
     margin: 0px;
     background: var(--background);
     color: var(--modal-text);
+    user-select: none;
 }
 
 #title-bar {

public/index.html

@@ -46,6 +46,7 @@ <h1>Uploader</h1>
         <input type='text' id='model' name='model'>
         <br/><br/>
         <button onClick='upload()' id='upload'>Upload</button>
+        <button onClick='undo()' id='undo'>Undo</button>
         <br/><br/>
         <span id='message'></span>
         <script src='index.js'></script>

public/index.js

@@ -18,6 +18,7 @@ photodiv.style.display = 'none';
 ipcRenderer.on('addedFile', async (_event, arg, arg2) => { 
     photodiv.style.display = 'block';
     document.getElementById('upload').disabled = false;
+    document.getElementById('undo').disabled = true;
     document.getElementById('photo').src = arg2;
 
     // make sure it doesn't say something like Canon Canon EOS 1300D 
@@ -139,10 +140,19 @@ const upload = async () => {
 }
 
 ipcRenderer.on('message', (_event, arg) => {
-    if (arg === 'Success') {
+    if (arg === 'Uploaded successfully') {
+        document.getElementById('undo').disabled = false;
+    } else if (arg === 'Removed successfully') {
         document.getElementById('upload').disabled = false;
     }
     document.getElementById('message').innerText = arg;
 });
 
-document.getElementById('upload').disabled = true;
+const undo = async () => {
+    document.getElementById('undo').disabled = true;
+    document.getElementById('message').innerText = '';
+    ipcRenderer.send('undo');
+}
+
+document.getElementById('upload').disabled = true;
+document.getElementById('undo').disabled = true;