> For the complete documentation index, see [llms.txt](https://readme.directual.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://readme.directual.com/data/file-storage/api-for-file-storage.md).

# API for File Storage

## Upload file with API Endpoints

### Step 1

Create a field type of `link` to `FileUpload` data structure

![Example structure with linked field.](/files/-M__sCOWYWUraS5gyQdB)

Create an API Endpoint which includes that field for POST requesting. Also, include `urlLink` field for reading to get url of the uploaded file.

![](/files/-M__sbkmdTaxKX4Ff-4z)

And now, you could send  `multipart/form-data` request with file (you could use any library for uploading a file to Directual)

```javascript
curl -X "POST" "https://api.directual.com/good/api/v5/data/test/testfileuploaded?appID=?&sessionID" \
     -H 'Content-Type: multipart/form-data; charset=utf-8' \
     -F "file="

```

And these API will return url to your file (if you include urlLink for GET-requesting):

```json
{
    "result":[
        {
            "file":
            {
                "urlLink":"https://api.directual.com/fileUploaded/evp/faec0620-8a6c-48a8-983b-2bb079536dc0.png"
            }
        }
    ],
    "status":"OK"
}
```

### Sample code for React JS

Explore Directual [boilerplate for ReactJS](/directual-react-js/boilerplate-for-react-js.md)

```javascript
// "file" — field name (link to FileUpload data structure)

const uploadHandler = (e) => {
        const file = e.target.files[0];
        const formData = new FormData();
        formData.append(
            "file", file
        );
        api
            .structure(fileStorage)
            .setData(fileEndpoint, formData,
                {
                    appID: APP_ID,
                    sessionID: auth.sessionID,
                })
            .then((response) => {                
                setResponse(response.result)
                setStatus(response.status)
                setLoading(false)
            })
            .catch((e) => {
                setLoading(false)
                console.log(e.response)
                setBadRequest({
                    httpCode: e.response.status,
                    msg: e.response.data.msg
                })
            })
    }
```

```html
<label htmlFor="upload_files">Upload Files</label>
<input type="file" id="upload_files" name="upload_files" onChange={uploadHandler}/>
```

### Legacy file-upload API

POST to <https://api.directual.com/good/api/v3/file/upload?source=others&appID=appID&appSecret=appSecret>