chore: add docs about file upload #7338
Conversation
|
| export async function uploadFile( | ||
| context: IntegrationContext | ||
| ): Promise<CustomMethodResponse> { | ||
| const files = context.req.files; | ||
| const additionalParams = context.req.body; // Access additional parameters |
There was a problem hiding this comment.
this won't work?
| export async function uploadFile( | |
| context: IntegrationContext | |
| ): Promise<CustomMethodResponse> { | |
| const files = context.req.files; | |
| const additionalParams = context.req.body; // Access additional parameters | |
| export async function uploadFile( | |
| context: IntegrationContext, | |
| additionalParams: any, | |
| ): Promise<CustomMethodResponse> { | |
| const files = context.req.files; |
There was a problem hiding this comment.
Why? This is exactly what I have in my poc and it does work.
export async function uploadFile(context: IntegrationContext): Promise<CustomMethodResponse> {
const files = context.req.files;
const params = context.req.body;
console.log("params", params);
console.log(params.test);
if (!files) {
throw new Error("No files were uploaded");
}
const formData = new FormData();
// Handle both multiple files and single file
if (Array.isArray(files)) {
files.forEach((file) => {
// Multer file objects contain buffer and originalname
formData.append("files", new Blob([file.buffer]), file.originalname);
});
}
return "well done";
}
There was a problem hiding this comment.
Your approach also works and I think it is a better way to do it. I will update the example
| All additional parameters will be automatically included in the multipart/form-data request. You can include any serializable data alongside your files. | ||
| :: | ||
|
|
||
| ## Framework-Specific Examples |
There was a problem hiding this comment.
I think we can remove this section. There is nothing Alokai-specific here, so it's not worth to maintain such docs. (also the Next.js part looks quite weird to me)
There was a problem hiding this comment.
If you think it is not needed then I will remove it. Also, I am not sure what is weird as I do not have that much experience in react to write non-weird stuff, whatever it is.
There was a problem hiding this comment.
I did that section to have a real world example.
There was a problem hiding this comment.
sure, I don't blame you Bartosz :D I suggest removing it, if users will struggle with implementing file input form, we can think again of adding it, but I don't think that we have capacity and ambition to learn customers React / Vue. I think its fair to assume that if we show customers how to use the newly created method to upload file, they will be capable to implement the remaining ui part.
And regarding the "weird Next.js part":
- For Next.js we use now the App router and here is how to create a handler https://nextjs.org/docs/app/building-your-application/routing/route-handlers
- But anyway, there is no need to create it - we could just put this logic inside a React component
| ## Usage with Middleware | ||
|
|
||
| ::success | ||
| To read more about how to use file upload with the Middleware, please refer to the [File Upload Middleware Guide](https://docs.alokai.com/middleware/guides/file-upload). | ||
| :: |
There was a problem hiding this comment.
If we want to split the guides into two places (middleware and sdk pages), I would move this reference to the top of the docs, as the middleware part has to be implemented first. But imo it would be better to have everything described in one place.. (but then - which one? - idk, maybe the Storefront docs?)
There was a problem hiding this comment.
I think that there are 2 places that we can use:
- general guides https://docs.alokai.com/guides - i think that these guides are more general than the upload file problem
- storefronts https://docs.alokai.com/storefront - this might be a best spot
I think that storefronts might be the best place.
Once we go through this CR iteration I will merge both md into one and I will put them in the storefront docs
| ```typescript | ||
| const formData = new FormData(); | ||
| formData.append("files", fileInput.files[0]); | ||
| formData.append("userId", "12345"); |
There was a problem hiding this comment.
@bartoszherba did this get updated? I recall I couldn't pass formData from the frontend via the SDK. Cool if it does work.
There was a problem hiding this comment.
i removed that
|
|
@jagoral @rohrig |
closing: ES-1361