XHR/Axios Progress with Server Actions
Hello,
I'm looking into a way to use the NextJS 15 Server Actions to upload files to an S3 bucket (which I have implemented and is working); however I am now trying to get the progress of the file upload and use that in a progress bar.
I have tried looking into XHR and Axios but have only been able to find the solution for API routes and not Server Actions....
Solution:
I have figured a possible solution? However, I'm unsure if it makes sense to do so or just seems redundant?
But I have created an API route to effectively collect the data; then send it to a controller to separate the
formData and create different variables for the files and the payload; then I pass that controller data down to the server action.
This does seem to be working....Uploading successful in local host but not vercel.
Hi Guys, I'm new. I noticed that my uploadthing only works on local host but not on vercel (it loads infinitely in the dropdown box provided by uploadthing).
Anyone have any pointers? I am currently on version 7.0.2 I am going to attempt to update this to 7.2.0.
Thank you in advanced...
Solution:
For some reason I updated by key to 7.2.0 and it now works 😮
Can I combo Tanstack query and Server component on Nextjs?
I was using Tanstack query for server state management with Nextjs, But I was concerned that almost all my components are getting 'use client ' so Is therr any design pattern or way to benefit both world ?
UploadThing Callback Failing on Localhost with useUploadThing Hook
I'm experiencing an issue where UploadThing successfully uploads images, but the callback to my local application fails. As a result, uploaded images are not being reflected in my application's UI. The callback error indicates a transport issue when attempting to POST to http://localhost:3000/api/uploadthing.
Error Logs:
```js
✓ Compiled /api/uploadthing in 1068ms (3228 modules)...
Facing issue when adding graphql to nextjs
This is my root layout file but when I use this I am getting runtime error
```
import localFont from "next/font/local";
import "./globals.css";
import { ApolloClient, InMemoryCache, ApolloProvider } from "@apollo/client";...
Anyone tracking theo's unlisted youtube live links?
It is hard to explain but I've seen a code snippet in one of theo's live stream, maybe it was the one when uploadthing was down due to KV issues, if anyone have the link, that'd be great!
Is tRPC still recommended?
I'm new to next.js/t3 stack and I have a hard time deciding if I need/want to use tRPC for my app (nothing super complex, just several forms and few possibly large tables where paging would be probably needed).
Now, as far as I understand it, tRPC used to be a big DX improvement before the introduction of server actions. But is it still needed today or are server actions sufficient replacement?
The t3 stack websites still mentions that tRPC is great, but Theo does not use it in his introductory video (creating t3gallery) and doesn't really explain the decision (maybe I have just missed it). ...
Is there an word wrap that works on editable contents? (not css)
I have an editable div on my landingpage that sends its textContext to a thermal printer which then prints it. I would like to have the exact line wrapping on my div as the thermal printer has, this means I cant use the css word wrap since that doesnt work with exact character count.
There are a bunch of npm packages that have word wrap in them but all of them seem to be word wrapping a static text instead of a editable text by the user.
Does anyone know if such a package exists or how to make it myself?...
Everywhere ctx.session.user in a router is used I get this error
all these three things and probably more return that same error:
``ts
[ Server ] Error: Route "/dashboard" used ...headers() or similar iteration. headers()` should be awaited before using its value. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis
...
React UseState interface and eslint - am I doing this right?
eslint no-unused-vars rule is failing on the variables in the interfaces for my react components.
I have n-number of components and I manage their state from the parent component, so I declare an interface in the component and pass the useState from the parent component to the child component using props.
Each component starts with an interface declaration like so...
Next.js 15 + Turbopack breaks TailwindCSS?
Does anyone else notice that TailwindCSS colors aren't applied in the hot reload until they magically get applied later? Even though I spam Ctrl+S/Cmd+S to save the file to reload the preview, TailwindCSS colors won't get applied.
You can replicate the phenomena by running
npm [email protected] and enable tailwindcss and turbopack, then applying bg-color, text-color, and border border-color to any JSX....
Next JS slow initial compile time
Hello! I was hoping someone could possibly give me some advice on what I should attempt, or what I should consider with an app that I am developing at work with Next.JS. I am currently running into an issue where the initial compile of my page takes like 10-12 seconds to compile and the user is left sitting there with no indicator that its compiling. I've read that this is common for next.js projects when you try hosting it yourself, but I thought I would ask you guys. Any tips on how to speed u...
Vercel Deployment failing on fresh create-next-app, no logs outside of saying public folder empty
https://github.com/codymurphyjones/bubble-experiments
This is the repo that I am trying to deploy, all I did was run npx create-next-app and follow the prompt and try to deploy it.
Is there a step I'm missing that has been added or is something wrong?...
One line param checking question
in javascript, you want to:
1. inside of a function (let's call this
functionA), run a function once (let's cal this function functionB)
2. check the return value of functionB
3. IF the return value of functionB is truthy or meets a certain criteria, you return from the parent scope that called it (functionA). ...unable to create app
I just signed up, but when I try to create an app and keep clicking the Create App button, nothing happens. I’ve tried logging in on different browsers and devices, but it still doesn’t work. Even if I leave it as is after clicking the button, there’s no loading or progress—nothing at all.
unable to create app
I just signed up, but when I try to create an app and keep clicking the Create App button, nothing happens. I’ve tried logging in on different browsers and devices, but it still doesn’t work. Even if I leave it as is after clicking the button, there’s no loading or progress—nothing at all. I really need help with this!
Flowbite vs tailwind UI vs shacdn vs ??
I want to create an application UI in React with:
* Dark/Light mode support
* Charts
* Paginated, searchable, and sortable tables
* A large collection of reusable components...
Solution:
Flowbite is not extensible like that, it comes with predefined class names alongside standard Tailwind classes, or actual Components if you use it with some framework (e.g. react)
However, you DO NOT own the code, you get the code bundled into your modules and can use it, but you CANT change it - the only way to change the style and behavior is through props. In that sense flowbite is a component library like MUI for example.
ShadCn works completely different from that, when you run the command to install a component, they put an actual .tsx file into your code that has exports that component (e.g. Button). ...
Links to FAQ does not work
QUESTIONS GO IN & support - also check the FAQ https://3.gg/faq
The link to FAQ does not work. I see no link to support as well...
Need a free cursor pagination API for testing
Need something like https://jsonplaceholder.typicode.com/ but supports cursor pagination. Anything like that exist?
Code eg for nextjs
I need help using the Uploadthing SDK. I couldn't find code eg for my use case in the docs
1. all images are public.
2. I don’t want any client level integration, such as uploads from the client using url.
3. All of the images are uploaded from the server....