mirror of
https://github.com/cesanta/mongoose.git
synced 2025-08-06 13:37:34 +08:00
brought back 7.5 file-upload as file-upload-multiple-posts; updated to latest API
renamed form-upload to file-upload-html-form renamed file-upload to file-upload-single-post
This commit is contained in:
parent
3331ed2f49
commit
f4fc33d111
33
examples/file-upload-multiple-posts/main.c
Normal file
33
examples/file-upload-multiple-posts/main.c
Normal file
@ -0,0 +1,33 @@
|
||||
// Copyright (c) 2020 Cesanta Software Limited
|
||||
// All rights reserved
|
||||
|
||||
#include "mongoose.h"
|
||||
|
||||
// HTTP request handler function. It implements the following endpoints:
|
||||
// /upload - Saves the next file chunk
|
||||
// all other URI - serves web_root/ directory
|
||||
static void cb(struct mg_connection *c, int ev, void *ev_data, void *fn_data) {
|
||||
if (ev == MG_EV_HTTP_MSG) {
|
||||
struct mg_http_message *hm = (struct mg_http_message *) ev_data;
|
||||
if (mg_http_match_uri(hm, "/upload")) {
|
||||
mg_http_upload(c, hm, &mg_fs_posix, "/tmp");
|
||||
} else {
|
||||
struct mg_http_serve_opts opts = {.root_dir = "web_root"};
|
||||
mg_http_serve_dir(c, ev_data, &opts);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
int main(void) {
|
||||
struct mg_mgr mgr;
|
||||
struct mg_timer t1;
|
||||
|
||||
mg_mgr_init(&mgr);
|
||||
mg_log_set("3");
|
||||
mg_http_listen(&mgr, "http://localhost:8000", cb, NULL);
|
||||
|
||||
for (;;) mg_mgr_poll(&mgr, 50);
|
||||
mg_mgr_free(&mgr);
|
||||
|
||||
return 0;
|
||||
}
|
41
examples/file-upload-multiple-posts/web_root/app.js
Normal file
41
examples/file-upload-multiple-posts/web_root/app.js
Normal file
@ -0,0 +1,41 @@
|
||||
// Copyright (c) 2020 Cesanta Software Limited
|
||||
// All rights reserved
|
||||
|
||||
// Helper function to display upload status
|
||||
var setStatus = function(text) {
|
||||
document.getElementById('el3').innerText = text;
|
||||
};
|
||||
|
||||
// When user clicks on a button, trigger file selection dialog
|
||||
var button = document.getElementById('el2');
|
||||
button.onclick = function(ev) {
|
||||
input.click();
|
||||
};
|
||||
|
||||
// Send a large blob of data chunk by chunk
|
||||
var sendFileData = function(name, data, chunkSize) {
|
||||
var sendChunk = function(offset) {
|
||||
var chunk = data.subarray(offset, offset + chunkSize) || '';
|
||||
var opts = {method: 'POST', body: chunk};
|
||||
var url = '/upload?offset=' + offset + '&name=' + encodeURIComponent(name);
|
||||
setStatus(
|
||||
'sending bytes ' + offset + '..' + (offset + chunk.length) + ' of ' +
|
||||
data.length);
|
||||
fetch(url, opts).then(function(res) {
|
||||
if (chunk.length > 0) sendChunk(offset + chunk.length);
|
||||
});
|
||||
};
|
||||
sendChunk(0);
|
||||
};
|
||||
|
||||
// If user selected a file, read it into memory and trigger sendFileData()
|
||||
var input = document.getElementById('el1');
|
||||
input.onchange = function(ev) {
|
||||
if (!ev.target.files[0]) return;
|
||||
var f = ev.target.files[0], r = new FileReader();
|
||||
r.readAsArrayBuffer(f);
|
||||
r.onload = function() {
|
||||
ev.target.value = '';
|
||||
sendFileData(f.name, new Uint8Array(r.result), 4096);
|
||||
};
|
||||
};
|
36
examples/file-upload-multiple-posts/web_root/index.html
Normal file
36
examples/file-upload-multiple-posts/web_root/index.html
Normal file
@ -0,0 +1,36 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>example</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<style>
|
||||
#container { margin-right: auto; margin-left: auto; max-width: 480px; }
|
||||
#info { background: #e0f0f0; border-radius: .5em; padding: 2em; }
|
||||
#wrapper { margin-top: 1em; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="info">
|
||||
Mongoose always buffers a full HTTP message before invoking
|
||||
the MG_EV_HTTP_MSG event. A big POST request would require a lot
|
||||
of RAM to buffer everything. Therefore, in order to upload large
|
||||
files on memory-constrained systems, a large file should be sent
|
||||
in small chunks.
|
||||
<br/><br/>
|
||||
In this example, the JavaScript code on this page sends the chosen
|
||||
file in 4K chunks using the <code>/upload</code> endpoint.
|
||||
The uploaded file is stored in the <code>/tmp</code> directory by
|
||||
the helper API function <code>mg_http_upload()</code>
|
||||
</div>
|
||||
<div id="wrapper">
|
||||
<input type="file" id="el1" style="display: none"/>
|
||||
<button id="el2">choose file...</button>
|
||||
<div id="el3"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script src="app.js"></script>
|
||||
</html>
|
10
examples/file-upload-single-post/Makefile
Normal file
10
examples/file-upload-single-post/Makefile
Normal file
@ -0,0 +1,10 @@
|
||||
PROG ?= example
|
||||
|
||||
all: $(PROG)
|
||||
$(DEBUGGER) ./$(PROG)
|
||||
|
||||
$(PROG):
|
||||
$(CC) ../../mongoose.c -I../.. $(CFLAGS) $(EXTRA) -o $(PROG) main.c
|
||||
|
||||
clean:
|
||||
rm -rf $(PROG) *.o *.dSYM *.gcov *.gcno *.gcda *.obj *.exe *.ilk *.pdb log.txt
|
1
examples/file-upload-single-post/README.md
Normal file
1
examples/file-upload-single-post/README.md
Normal file
@ -0,0 +1 @@
|
||||
See detailed tutorial at https://mongoose.ws/tutorials/file-uploads/
|
Loading…
Reference in New Issue
Block a user