> For the complete documentation index, see [llms.txt](https://skyslit.gitbook.io/magicjs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://skyslit.gitbook.io/magicjs/api-references/frontend/createuploader.md).

# createUploader() 

> Here is an example for uploading a file:

#### Frontend:

```typescript
import { createUploader } from '@magicjs.dev/frontend';
import uploadServer from "./upload.server";

// The backend server function for handling file uploads
const { addFiles, upload, readyToUpload, uploadProgress, loading } = createUploader(uploadServer);

const handleUploadFile = () => {
  upload();
};

return (
  <div>
    <input
      type='file'
      onChange={(e) => {
        addFiles(e.target.files);
        // Adds selected files to the uploader instance
      }}
    />
    <button
      onClick={handleUploadFile}
      disabled={Boolean(readyToUpload) === false || loading === true}
    >
      {/* readyToUpload is a boolean variable; it becomes true if any images are selected,
      and false if none are chosen.
      The boolean variable loading becomes true while the API is in progress and turns false once the operation is complete. */}
      Upload
    </button>
    <div>{uploadProgress}</div>
    {/* The numeric variable uploadProgress indicates the progress of the upload,
    providing visibility into the ongoing upload process. */}
  </div>
);
```

#### Backend `upload.server`

```typescript
import { createBackendFunction, createRequestContext, useFunctionContext, utils } from '@magicjs.dev/backend';

export default createBackendFunction(async function () {
  createRequestContext(this)
    .uploader()
    .onFile((info, file) => {
      // Will get the file information from the parameter info.
      utils.saveFileToUserUploads('/upload-path', 'imageName.jpeg', file);
    });
})
```

[Click here to refer GitHub](https://github.com/skyslit/magicjs.dev/blob/main/packages/frontend/src/file-uploader.tsx#L4).