> 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/createsrc.md).

# createSrc() 

> Here is an example:

#### Frontend:

```typescript
import { createUploader, createSrc } from '@magicjs.dev/frontend';
import getFileServer from './get-file.server'; // The backend server function for reading files

const fileSrc = createSrc(getFileServer);

return (
  <div>
    <img src={fileSrc.getLink('fileName.jpg')} alt="File Preview" />
  </div>
);
```

#### Backend `get-file.server`

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

export default createBackendFunction(async function (fileName: string) {
  return utils.readFileFromUserUploads('/path', fileName);
});
```

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