How to handle upload directly from Postman?

[BayBreezy]

Hello,

I was trying out the package earlier but was having difficulties getting an upload from Postman to work.

Is there an example anywhere of uploading files directly from an external source(Not the nuxt frontend)?

Or is it a case where we have to use the files from the frontend of the nuxt app?

[NyllRE]

are you sure that you're sending the files in Base64? If you're not sure check out the code for the fileInputHandler composable

[BayBreezy]

No. Postman sends the file as is. So I have access to the regular properties that are available when a file is uploaded to a server. In Nuxt 3, the readMultipartFormData utility gives me access to the file Buffer.

Do i need to convert said buffer to a base64 string?

[NyllRE]

yes, the files are currently being uploaded with Base64, I will add more settings to allow users to alternate between MultipartFormData and Base64

[NyllRE]

Hey, if it worked for you please let me know and if it worked please close this issue, thanks!

[NyllRE]

@BayBreezy Come on bro don't leave me on read like that 😅

[BayBreezy]

Hey yo! My fault. I am gonna test again today and share my results. I promise lolol.

I deleted the little app I was testing it out in and was out here trying out the better auth library

[BayBreezy]

So I got some time to try again but I am getting the error below Cannot find name storeFileLocally

Apparently the storeFileLocally util is not being picked up.

This is the code I am testing so far in the api endpoint

import { ServerFile } from "nuxt-file-storage";

export default defineEventHandler(async (event) => {
  const files = await readMultipartFormData(event);
  if (!files || !files.length) {
    throw createError({
      statusCode: 400,
      statusMessage: "File(s) not found",
    });
  }
  const uploaded = [];
  for (const file of files) {
    const { filename, name, type, data } = file;
    const newFile: ServerFile = {
      name: filename!,
      content: data.toString("base64"),
      size: data.length.toString(),
      type: type!,
      lastModified: new Date().toISOString(),
    };
    const response = await storeFileLocally(newFile);
    uploaded.push(response);
  }
  return { data: uploaded };
});

This is my nuxt.config

import path from "path";
import { fileURLToPath } from "url";
const __dirname = path.dirname(fileURLToPath(import.meta.url));

export default defineNuxtConfig({
  compatibilityDate: "2024-11-01",
  devtools: { enabled: true },
  modules: ["nuxt-file-storage"],
  fileStorage: { mount: path.join(__dirname, "uploads") },
});

Is there anything special I need to do to get the utility to show up in the api endpoint file? @NyllRE

[NyllRE]

File uploads with this module works with Base64 only, which means trying to retrieve files through readMultipartFormData won't work. Here is a working example: https://stackblitz.com/edit/nuxt-file-storage-example?file=app.vue

[BayBreezy]

The issue I am having is not with the format of the file.

The issue is that storeFileLocally does not exist.

Shouldn't this be autoImported?

[NyllRE]

I feel like this might be an issue on your side, try to run "nuxt prepare" or reinstall npm packages and if it still percists try to make a reproduction on Stackblitz so I can take a look at exactly what's causing it because it definitely should auto import. remember that you could import any autoimported module in nuxt by:

import { storeFileLocally } from "#imports" 

[JasonLinn]

same problem [unhandled] [500] storeFileLocally is not defined

[NyllRE]

@JasonLinn @BayBreezy Please provide reproductions using stackblitz similar to the one I made so I can properly identify the issue you are facing because as far as my reproductions went the functions are auto imported properly and I can't really understand why it's not being imported in your cases

[BayBreezy]

So after cleaning out everything and installing again, the error went away. @JasonLinn try adding this to your scripts

"clean": "rm -rf .nuxt dist .output node_modules package-lock.json && npm install"

Now I get this error but I am assuming that this new error is coming from the fact that I am not formatting the file in a way that the storeFileLocally functions want it

[nuxt] [request error] [unhandled] [500] Invalid data URL

So @NyllRE can a function be exposed to the server that allows us to convert the uploaded file to a format that can be passed to the storeFileLocally function as the 1st arg? Like i showed earlier, i tried constructing the file and pass it to the function but it gives me the Invalid data URL error.

[NyllRE]

You are trying to retrieve the file using multipartFormData as I said previously this is not supported by the library currently, there are plans to support both multipart and Base64 data but as of now you should convert the file to Base64 in order for the storeFileLocally function accept the file.

[BayBreezy]

I did convert the Buffer to a base64 string.

But I guess we can close this for now until a solution/function is available that can convert any uploaded file to the format that storeFileLocally needs it to be.

[NyllRE]

No need to close it, I will keep it as a reminder for what needs to be done for the next version, on the release of nuxt fs 1.0.0 I will make the module Multipart first, Base64 secondary

[BayBreezy]

@NyllRE please, no breaking change 🤣

We are still recovering from the nuxt v2 to v3 migration

[NyllRE]

absolutely not 😅 the thing that is making me take my time is to make sure everything is backwards compatible. the worst feeling I had is when I update some packages then some internal nuxt error shows and now I have to scan every module to find out what they changed 😂

that's mainly one of the reasons that motivated me to make the nuxt file storage module myself. I'm trying to find enough time to study how I can actually make this package cover all use cases for file uploads, even involving service handlers like cloudinary and others. of course nuxt hub had to step in and cover this usecase but I'm still thinking of implementing it for users who don't really need edge hosting