Comments (9)
You can add the port if you want with generateUrl
from uppy.
It's me again. I solved the issue by using relativeLocation
Here is also my final nginx.conf
for good measure. Thank you for the guidance @Murderlon . I didn't get to generateUrl
.
# Define the number of worker connections
events {
worker_connections 1024; # Maximum number of simultaneous connections per worker process
}
# Main HTTP server configuration block
http {
# Include MIME types definitions
include /etc/nginx/mime.types;
# Set default MIME type if not detected
default_type application/octet-stream;
server {
listen 80; # Listen on port 80 for HTTP connections
root /usr/share/nginx/html; # Set the root directory for serving files
index index.html; # Specify the default index file
# This handles the client-side routing for Single Page Applications (SPA)
location / {
try_files $uri $uri/ /index.html; # Try to serve the requested URI, then fall back to index.html
}
# Cache static assets for better performance
location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
expires 1y; # Set expiration time to 1 year
add_header Cache-Control "public, max-age=31536000, immutable"; # Add cache control headers
}
# Enable gzip compression for specified file types
gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
# Proxy configuration for API requests
location /api-example-restlike {
# Forward requests to the backend service
proxy_pass http://node-example-restlike:6502;
# Options required for file uploads (TUS protocol)
proxy_request_buffering off; # Disable request buffering
proxy_buffering off; # Disable response buffering
proxy_http_version 1.1; # Use HTTP 1.1 for proxying
# Add X-Forwarded-* headers for proper handling behind a reverse proxy (TUS protocol)
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Proto $scheme;
client_max_body_size 0; # Remove limit on the request body size (TUS protocol)
}
}
}
from uppy.
Vue.js uppy snippet:
uppyDashboard.value = new Uppy({
debug: true,
autoProceed: false,
})
.use(DashboardPlugin, {
id: "vueDashboard",
inline: true,
target: "#uppyDashboard",
hideUploadButton: true,
proudlyDisplayPoweredByUppy: false,
fileManagerSelectionType: "both",
})
.use(Tus, {
endpoint: "/api-example/files/",
retryDelays: [0, 1000, 3000, 5000],
});
Tus Backend Side
const { Server } = require("@tus/server");
const { FileStore } = require("@tus/file-store");
const nfs = require("fs/promises");
const setupTusServer = async (fastifyServer, getTemporaryDirectoryFullPath) => {
const tusServer = new Server({
path: "/api/files",
respectForwardedHeaders: true,
datastore: new FileStore({
directory: await getTemporaryDirectoryFullPath(),
}),
});
fastifyServer.addContentTypeParser(
"application/offset+octet-stream",
(_, __, done) => done(null)
);
fastifyServer.all("/api/files", (req, res) => {
tusServer.handle(req.raw, res.raw);
});
fastifyServer.all("/api/files/*", (req, res) => {
tusServer.handle(req.raw, res.raw);
});
fastifyServer.delete("/api/fileops/", async (req, res) => {
try {
const temporaryFilesDirectoryFullPath =
await getTemporaryDirectoryFullPath();
const tusIdsArray = req.body;
for (const id of tusIdsArray) {
try {
const fullFilePath = `${temporaryFilesDirectoryFullPath}/${id}`;
const fullJsonPath = `${temporaryFilesDirectoryFullPath}/${id}.json`;
await nfs.unlink(fullFilePath);
await nfs.unlink(fullJsonPath);
} catch (err) {
console.error(`Failed to delete ${id}`, err);
}
}
res.send({
message: "File deletion process completed",
files: tusIdsArray,
});
} catch (err) {
console.error(err);
res.code(500).send(err);
}
});
};
module.exports = { setupTusServer };
nginx configuration
events {
worker_connections 1024;
}
http {
proxy_headers_hash_max_size 512;
proxy_headers_hash_bucket_size 64;
server {
listen 80;
location / {
proxy_pass http://frontend;
}
location /api-example {
proxy_pass http://backend:6502;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
rewrite ^/api-example(.*) /api$1 break;
proxy_request_buffering off;
proxy_buffering off;
proxy_http_version 1.1;
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Proto $scheme;
client_max_body_size 0;
}
}
}
from uppy.
Sorry if this doesn't represent a bug and I've mangled some configuration. The Community Forum doesn't load at all for me.
EDIT: tus/tus-node-server#520 (comment) , so the location
header from the initial post needs to be re-written ?
EDIT 2: respectForwardedHeaders
is true, so there's something wrong with the nginx configuration. Likely not a bug.
from uppy.
Hi, you are setting /api-example/files/
on the client but /api/files
on the server, this needs to be the same. And as you mentioned yourself you need respectForwardedHeaders
and a correct nginx configuration.
from uppy.
@Murderlon I can't get it working. Do you happen to have any examples for node-tus-server ? I've tried both caddy and nginx in the last hours.
from uppy.
Are you sure you set /api-example
or /api/files
everywhere and you are not mixing them?
from uppy.
Are you sure you set
/api-example
or/api/files
everywhere and you are not mixing them?
No. Frontend calls /api-example/
which gets rewritten by the reverse proxy to /api/
. Backend everything is /api/
. Right now I'm attempting to use /api-example/
everywhere both frontend and backend.
from uppy.
Are you sure you set
/api-example
or/api/files
everywhere and you are not mixing them?No. Frontend calls
/api-example/
which gets rewritten by the reverse proxy to/api/
. Backend everything is/api/
. Right now I'm attempting to use/api-example/
everywhere both frontend and backend.
Even with all this, the location response header does not include the port I use for the ingress nginx.
Thanks for the help. I'm going to take a break from looking at this.
from uppy.
Related Issues (20)
- i18n "Shared with me" etc HOT 1
- Allow streaming upload also for unknown length streams HOT 1
- @uppy/companion: include origin in dynamic customer credentials
- Using Vue2 to integrate uppy caused a strange mistake HOT 2
- aws-nodejs-example | Multipart complete api | Throws 400 bad requests. HOT 5
- title.value is not accessible inside uppy.upload in vue HOT 1
- I get this error "ResizeObserver loop completed with undelivered notifications" when I set width and height 100% in Angular HOT 5
- Uncaught TypeError: Cannot read properties of null (reading 'postMessage') in Companion's Callback Endpoint HOT 10
- Fix TypeScript sins HOT 5
- v4: typescript error for `uppy.setFileState()`
- Typescript error for 'new Uppy().use(AwsS3, {})' HOT 2
- XHR plugin expects upload response to be a valid JSON HOT 8
- companionAllowedHosts is not implemented in RemoteSources preset
- Uppy companion server error HOT 4
- Uppy 4.0.5 error HOT 5
- getTemporarySecurityCredentials() docs for S3 missing
- `Complete` event is not fired if one or more files are removed before they are uploaded using XHRUpload
- ThumbnailGenerator: Failed to execute 'createObjectURL' on 'URL': Overload resolution failed.
- Paste from clipboard support on Drag & Drop module HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from uppy.