example.file-upload.md

Upload a file

Uploading a file is different for React and React Native. Both methods are similar.

• React
• React Native
  • React Native TypeScript

React

const UploadFile = (props) => {
    const [file, setFile] = useState(undefined);
    const myUpload = useApiData('myUpload');
    const uploadFile = () => {
        let formDataToUpload = new FormData();
        formDataToUpload.append('otherPostVariable', 'value');
        formDataToUpload.append('myFile', file);
        myUpload.perform({}, formDataToUpload);
    }

    return (
        <>
            <input
                type="file"
                onChange={event => {
                    if (event.target.files && event.target.files.length > 0) {
                        setFile(event.target.files[0]);
                    }
                }}
            />
            <button onClick={uploadFile}></button>
        </>
    );
}

React Native

In React Native you also need a FormData object to upload a file, however here it requires other properties: uri, type and name.

• uri url of the file, this may be a local file path, it should include the filename.
• type mime-type of the file.
• name name of the file.

const MyComponent = () => {
    const fileUri = '';
    const fileContentType = '';
    const fileName = '';

    const formData = new FormData();
    formData.append('myFile', {
        uri: fileUri,
        type: fileContentType,
        name: fileName
    });

    const editArticle = useApiData('editArticle', { id: props.articleId });

    return <Button onPress={() => editArticle.perform({}, formData)} title='Upload image'>;
}

React Native TypeScript

To make all TypeScript typings correct you should also create a global.d.ts in the root of your app and add this:

interface FormDataRNFile {
    uri: string;
    name: string;
    type: string;
}

interface FormData {
    append(name: string, value: FormDataRNFile, fileName?: string): void;
    set(name: string, value: FormDataRNFile, fileName?: string): void;
}