Add ajax_upload example

PUBLISHED_FROM=c5691d4321fff2e03f689b0195abd1ec6a188418

Add ajax_upload example
066be0fe · Alexander Alashkin · Cesanta Bot · 380e87dd · 066be0fe · 066be0fe
Commit 066be0fe authored 8 years ago by Alexander Alashkin Committed by Cesanta Bot 8 years ago
--- a/examples/ajax_upload/Makefile
+++ b/examples/ajax_upload/Makefile
+PROG = ajax_upload
+MODULE_CFLAGS = -DMG_ENABLE_HTTP_STREAMING_MULTIPART
+include ../examples.mk
--- a/examples/ajax_upload/ajax_upload.c
+++ b/examples/ajax_upload/ajax_upload.c
+// Copyright (c) 2017 Cesanta Software Limited
+// All rights reserved
+#include "mongoose.h"
+static const char *s_http_port = "8000";
+static struct mg_serve_http_opts s_http_server_opts;
+static void ev_handler(struct mg_connection *nc, int ev, void *p) {
+  if (ev == MG_EV_HTTP_REQUEST) {
+    mg_serve_http(nc, (struct http_message *) p, s_http_server_opts);
+  }
+}
+static void upload_handler(struct mg_connection *nc, int ev, void *p) {
+  (void) nc;
+  struct http_message *hm = (struct http_message *) p;
+  if (ev == MG_EV_HTTP_REQUEST) {
+    char file_name[256];
+    FILE *f = NULL;
+    if (mg_get_http_var(&hm->query_string, "file_name", file_name,
+                        sizeof(file_name)) <= 0) {
+      mg_printf(nc, "%s",
+                "HTTP/1.1 500 File name is not specified\r\n"
+                "Content-Length: 0\r\n\r\n");
+      nc->flags |= MG_F_SEND_AND_CLOSE;
+      goto cleanup;
+    }
+    printf("Saving file %s, size %d bytes\n", file_name, (int) hm->body.len);
+    f = fopen(file_name, "w");
+    if (f == NULL) {
+      mg_printf(nc, "%s",
+                "HTTP/1.1 500 Failed to open a file\r\n"
+                "Content-Length: 0\r\n\r\n");
+      nc->flags |= MG_F_SEND_AND_CLOSE;
+      goto cleanup;
+    }
+    if (fwrite(hm->body.p, 1, hm->body.len, f) != hm->body.len) {
+      mg_printf(nc, "%s",
+                "HTTP/1.1 500 Failed to write to a file\r\n"
+                "Content-Length: 0\r\n\r\n");
+      nc->flags |= MG_F_SEND_AND_CLOSE;
+      goto cleanup;
+    }
+    mg_printf(nc, "%s",
+              "HTTP/1.1 200 OK\r\n"
+              "Content-Type: text/html\r\n"
+              "Connection: close\r\n"
+              "\r\n"
+              "File upload successfully");
+    nc->flags |= MG_F_SEND_AND_CLOSE;
+    printf("Done.\n");
+  cleanup:
+    if (f != NULL) {
+      fclose(f);
+    }
+  }
+}
+int main(void) {
+  struct mg_mgr mgr;
+  struct mg_connection *nc;
+  mg_mgr_init(&mgr, NULL);
+  printf("Starting web server on port %s\n", s_http_port);
+  nc = mg_bind(&mgr, s_http_port, ev_handler);
+  if (nc == NULL) {
+    printf("Failed to create listener\n");
+    return 1;
+  }
+  mg_register_http_endpoint(nc, "/upload", upload_handler MG_UD_ARG(NULL));
+  // Set up HTTP server parameters
+  mg_set_protocol_http_websocket(nc);
+  s_http_server_opts.document_root = ".";  // Serve current directory
+  s_http_server_opts.enable_directory_listing = "yes";
+  for (;;) {
+    mg_mgr_poll(&mgr, 1000);
+  }
+  mg_mgr_free(&mgr);
+  return 0;
+}
--- a/examples/ajax_upload/index.html
+++ b/examples/ajax_upload/index.html
+<!DOCTYPE html>
+<html>
+<head>
+  <title>AJAX Upload Example</title>
+  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
+  <script type="text/javascript">
+    function updateProgress(evt) {
+      if (evt.lengthComputable) {
+        document.getElementById("output").textContent =
+              "Uploaded " + evt.loaded + " of " + evt.total + " bytes";
+      }
+    }
+    function uploadFile() {
+      var file_name = $('input[type=file]').val().split('\\').pop();
+      console.log("uploadFile: ", file_name)
+      var file_data = document.getElementById('file').files[0];
+      $.ajax({
+        url: "/upload?file_name=" + file_name,
+        type: "POST",
+        data: file_data,
+        processData: false,
+        contentType: false,
+        cache: false,
+        xhr: function() {
+          myXhr = $.ajaxSettings.xhr();
+          if(myXhr.upload){
+            myXhr.upload.addEventListener('progress',updateProgress, false); // for handling the progress of the upload
+          }
+          return myXhr;
+        },
+      }).done(function(data) {
+          document.getElementById("output").textContent = "Result: " + data;
+      });
+      return false;
+    }
+  </script>
+</head>
+<body>
+  <form method="post" id="filename" name="filename" onsubmit="return uploadFile();">
+    <label>Select a file:</label><br>
+    <input type="file" id="file" name="file" required />
+    <input type="submit" value="Upload" />
+  </form>
+  <br><br><div id="output"></div>
+</body>
+</html>