Here's a more concise version of the documentation with a focus on examples:

To upload files on the front end, you can either use a form action or direct call a server action

'use client';

import {uploadFile }from'./file.action';

exportfunction UploadFileViaForm() {

return (

<formaction={uploadFile}>

<inputtype="file"name="file" />

<buttontype="submit">Upload via form action</button>

</form>

);

}

'use client';

import {objectToFormData }from'@davstack/action';

import {uploadFile }from'./file.action';

exportdefaultfunction UploadFileViaActionCall() {

return (

<button

onClick={async ()=> {

const file=newBlob([], { type:'text/plain' });

awaituploadFile(objectToFormData({file }));

}}

>

upload via direct action call

</button>

);

}

When directly calling a server action is is essential to wrap the input in`objectToFormData` as otherwise next.js will not send the file to the backend.

'use server';

import {action,zodFile }from'@davstack/action';

exportconst uploadFile=action()

.input({

file:zodFile({ type:'image/*' }),

})

.mutation(async ({input,ctx })=> {

console.log('FILE UPLOADING!');

const file=input.file;

});

Under the hood, davstack action converts formdata to objects so you can use the input as a normal object, no need for`formData.get`.

const imageFile=zodFile({ type:'image/*' });

const audioFile=zodFile({ type:'audio/*' });

const videoFile=zodFile({ type:'video/*' });

const pdfFile=zodFile({ type:'application/pdf' });

const textFile=zodFile({ type:'text/*' });

const specificTypes=zodFile({ type: ['image/jpeg','image/png'] });

const customType=zodFile({ type:'application/custom' });

const limitedSize=zodFile({ type:'*', maxSizeMb:5 });

The`zodFile` validator allows you to specify the expected file type and maximum size:

- Use`type: 'image/*'`,`type: 'audio/*'`,`type: 'video/*'`, etc., to accept files of a specific category.

- Use`type: 'application/pdf'`,`type: 'text/*'`, etc., to accept files of a specific type.

- Use an array of types, like`type: ['image/jpeg', 'image/png']`, to accept multiple specific types.

- Use a custom type string, like`type: 'application/custom'`, to accept a custom file type.

The`zodFile` validator returns a`ZodFile` object with properties and methods for working with the uploaded file.

importServiceReadMefrom'@davstack/action/README.md';

<ServiceReadMe />