feat: implement websocket-based uploads

eliminating the need for PHP/PHP-FPM.

Author: tomeon

.setup/gateway

@@ -63,33 +63,12 @@ server{
     proxy_set_header X-Forwarded-User $remote_user;
   }
 
-  # enable and configure PHP
-  location ~* \.php$ {
-    fastcgi_split_path_info ^(.+\.php)(.*)$;
- 
-    # typically the fpm.sock is used, but check to make sure by using:
-    # sudo grep -ri "listen = " /etc/php
-    # should get something like: 
-    #  /etc/php/7.3/fpm/pool.d/www.conf:listen = /run/php/php7.3-fpm.sock
-    # then you know it's fpm.sock
-    fastcgi_pass unix:/run/php/PHPFPMSOCK;   #uncomment if PHP runs on fpm.sock
-    #fastcgi_pass 127.0.0.1:9000;            #uncomment if PHP is running on port 9000
- 
-    fastcgi_index index.php;
-    fastcgi_param SCRIPT_FILENAME /home/pi/gateway/www$fastcgi_script_name;
-    fastcgi_param QUERY_STRING $query_string;
-    fastcgi_param REQUEST_METHOD $request_method;
-    fastcgi_param CONTENT_TYPE $content_type;
-    fastcgi_param CONTENT_LENGTH $content_length;
-    include fastcgi_params;
-  }
- 
   # redirect server error pages to the static page /50x.html
   error_page 500 502 503 504 /50x.html;
   location = /50x.html {
       root html;
   }
- 
+
   ## Disable viewing .htaccess & .htpassword
   location ~ /\.ht {
       deny all;

.setup/gatewaysetup.sh

@@ -108,9 +108,6 @@ sudo apt-get -y install git apache2-utils
 echo -e "${CYAN}************* STEP: Install latest NGINX *************${NC}"
 sudo apt-get -y install nginx
 
-echo -e "${CYAN}************* STEP: Install latest PHP *********************${NC}"
-sudo apt-get -y install php-common php-cli php-fpm
-
 echo -e "${CYAN}************* STEP: Install nodeJS & npm *************${NC}"
 #install latest NodeJS --- https://www.raspberrypi.org/forums/viewtopic.php?t=141770
 sudo wget -O - https://raw.githubusercontent.com/audstanley/NodeJs-Raspberry-Pi/master/Install-Node.sh | sudo bash
@@ -179,10 +176,6 @@ echo -e "${YLW}Done. You can add/change http_auth credentials using ${RED}htpass
 
 echo -e "${CYAN}************* STEP: Copy gateway site config to sites-available *************${NC}"
 cp -rf $APPSRVDIR/.setup/gateway /etc/nginx/sites-available/gateway
-#determine php-fpm version and replace in gateway site config
-phpfpmsock=$(grep -ri "listen = /" /etc/php) #search for file containing "listen =" in php path
-phpfpmsock=${phpfpmsock##*/}                 #extract everything after last /
-sudo sed -i "s/PHPFPMSOCK/${phpfpmsock}/g" /etc/nginx/sites-available/gateway  #replace PHPFPMSOCK with it in site config file
 cd /etc/nginx/sites-enabled
 sudo rm /etc/nginx/sites-enabled/default
 sudo ln -s /etc/nginx/sites-available/gateway

gateway.js

@@ -777,6 +777,25 @@ io.sockets.on('connection', function (socket) {
     console.log('PI SHUTDOWN REQUESTED from ' + address);
     require('child_process').exec('sudo /sbin/shutdown now "GATEWAY SHUTDOWN REQUEST"', function (msg) { console.log(msg) });
   });
+
+  // https://socket.io/how-to/upload-a-file
+  socket.on('UPLOADIMAGE', function (name, buffer, callback) {
+    if (!name) {
+      callback(null, "missing file name");
+      return;
+    }
+
+    if (!buffer) {
+      callback(null, "missing file data");
+      return;
+    }
+
+    target = path.join(userImagesDir, name);
+
+    fs.writeFile(target, buffer, function(err) {
+      callback(name, err);
+    });
+  });
 });
 
 //entries should contain the node list and also a node that contains the order (if this was ever added)

www/index.html

@@ -2285,35 +2285,33 @@ <h2>' + (nodeResolveString(node.label||'', node.metrics) || node._id) + ' ' + re
     $("#changeNodeIcon_OK").click("tap", function(event) {
       if ($("#nodeIconUpload").val()) {
         event.preventDefault();
-        var file_data = $('#nodeIconUpload').prop('files')[0];   
-        var form_data = new FormData();                  
-        form_data.append('file', file_data);
-        $.ajax({
-          type: "POST",
-          url: "upload.php",
-          enctype: 'multipart/form-data',
-          dataType: 'json',
-          cache: false,
-          contentType: false,
-          processData: false,
-          data: form_data,
-          success: function (data, textStatus, jqXHR) {
-            data['status'];
-            if (data['status']=='success')
+
+        var file = $('#nodeIconUpload').prop('files')[0];
+
+        var types = ['image/jpeg', 'image/png', 'image/gif'];
+        if (!types.includes(file.type)) {
+          alert('Invalid file type; only JPG/JPEG/PNG/GIF are allowed');
+          return;
+        }
+
+        if ((file.size || 0) > 500000) {
+          alert('File too large (>500K)');
+          return;
+        }
+
+        socket.emit('UPLOADIMAGE', file.name, file, function(filePath, err) {
+          if (err) {
+            alert('Upload failed: ' + err.message);
+          }
+          else {
+            if (filePath)
             {
-              if (data['filePath'])
-              {
-                $('#nodeDetailImage').attr('src', 'images/'+data['filePath']);
-                nodes[selectedNodeId].icon = data['filePath'];
-                socket.emit('REFRESHICONS');
-                $.mobile.navigate('#nodedetails');
-              }
-              else alert('Expected filePath back, got nothing');
+              $('#nodeDetailImage').attr('src', 'images/'+filePath);
+              nodes[selectedNodeId].icon = filePath;
+              socket.emit('REFRESHICONS');
+              $.mobile.navigate('#nodedetails');
             }
-            else alert(data['message']||'Upload failed');
-          },
-          error: function (data, textStatus, msg) {
-            alert(msg||'Upload failed');
+            else alert('Expected filePath back, got nothing');
           }
         });
       }