Vercel blob with react and nodejs .

[sahil-1912]

Hi, i am trying to upload images from react to vercel blob storage and use it in node js server, as payload limit i tried blob client but not sure how it should be used with react and nodejs. I am doing simple process in backend that is to convert incoming image into tiff file.

[luismeyer]

Hey @sahil-1912 , using client uploads with node is rather straight forward. You need to expose a POST endpoint in your server that issues tokens for your client. Here is an example with express:

const app = express();
app.use(express.json());

app.post("/blob", async (request, res) => {
  try {
    const jsonResponse = await handleUpload({
      body: request.body,
      request,
      onBeforeGenerateToken: async (
        pathname
        /* clientPayload */
      ) => {
        // Generate a client token for the browser to upload the file
        // ⚠️ Authenticate and authorize users before generating the token.
        // Otherwise, you're allowing anonymous uploads.

        return {
          allowedContentTypes: ["image/jpeg", "image/png", "image/gif"],
          tokenPayload: JSON.stringify({
            // optional, sent to your server on upload completion
            // you could pass a user id from auth, or a value from clientPayload
          }),
        };
      },
      onUploadCompleted: async ({ blob, tokenPayload }) => {
        // Get notified of client upload completion
        // ⚠️ This will not work on `localhost` websites,
        // Use ngrok or similar to get the full upload flow

        console.log("blob upload completed", blob, tokenPayload);
      },
    });

    return res.json(jsonResponse);
  } catch (error) {
    res.status(400);
    return res.json({ error: error.message });
  }
});

In your React client you can then call the upload method with this new endpoint:

const blob = upload("express/test.png", file, {
  access: "public",
  handleUploadUrl: "http://localhost:3000/blob",
});

If you want to do some processing to your files, but can't do that before the upload because of payload limits, you should hook into the onUploadCompleted function. There you can download the blob to the server, process and upload it again under the same or a new key. Make sure to use a tunnel service locally if you want to test this: https://vercel.com/docs/storage/vercel-blob/client-upload#testing-your-page