Headless WordPress: Uploading with DropZone | https://www.ibenic.com/headless-wordpress-uploading-with-dropzone

App.scss

// ...

.components-drop-zone__provider {
	min-height: 100px;
	height: auto;
	width: 100%;
	position: relative;
	padding: 1em;
	text-align: center;
	background: rgba( 0, 0, 0, 0.05 );
}

meta.php

<?php

/**
 * Plugin Name: Headless WP - Add User Meta
 */

if ( function_exists( 'register_meta' ) ) {
    register_meta( 'user', 'avatar', [ 'show_in_rest' => true ]);
    register_meta( 'user', 'avatar_id', [ 'show_in_rest' => true ]);
}

profile.js

// ...
import { getImage } from './../functions/users';
const axios = require('axios');

function Profile( { user }) {
    return <div className="jumbotron">
        Welcome { user.nickname }
        <p>I think your name is { user.first_name } { user.last_name}</p>
        { getImage( user ) }
    </div>;
}

// ...

settings-2.js

class Settings extends React.Component {
    constructor( props ) {
        super( props );
        this.state = { user: props.user, update: {} };
        this.updateUser = this.updateUser.bind(this);
        this.fileUpload = this.fileUpload.bind(this);
    }
  
    fileUpload( files ) {
        var _this = this;
        forEach( files, ( file ) => {
            var media = createMediaFromFile( file, {}, this.props.token, this.props.url );
            media.then( function (response) {
                if ( response.data ) {
                    let { update, user } = _this.state;
                    // Set meta to update object.
                    if ( ! update.meta ) {
                        update['meta'] = { avatar: [], avatar_id: [] };
                    }
                    // Set meta to user object.
                    if ( ! user.meta ) {
                        user['meta'] = { avatar: [], avatar_id: [] };
                    }
                    
                    // Set meta to what we update.
                    update['meta']['avatar'] = response.data.source_url;
                    update['meta']['avatar_id']= response.data.id;
                  
                    // Set meta to user on how it is retrieved.
                    user['meta']['avatar'][0] = response.data.source_url;
                    user['meta']['avatar_id'][0] = response.data.id;
                    _this.setState( { user, update } );
                }
            })
        });
    }
    // ... code
}

settings-3.js

// ...

class Settings extends React.Component {
    // ...
  
    render() {
        const { user, update } = this.state;
       
        return (

            <div className="settings">
                <TextControl className="form-group" 
                    label="First Name"
                    value={ this.getValue( 'first_name', user, update ) }
                    onChange={ (value) => { 
                        var update = { first_name: value }; 
                        this.setState( { update: { ...this.state.update, ...update } } );
                     } }
                />
                <DropZoneProvider>
                    <div>
                        { getImage( user ) }
                        <DropZone 
                            onFilesDrop={ ( files, position ) => { this.fileUpload( files ); } }
                        />
                    </div>
	            </DropZoneProvider>
                <Button isPrimary onClick={ this.updateUser }>Update</Button>
            </div>
        );
    }
}

export default Settings;

settings.js

import React from 'react';
import { TextControl, Button, DropZoneProvider, DropZone } from '@wordpress/components';
import { addSnackbar } from '../../functions/notices';
import { getImage, createMediaFromFile } from './../../functions/users';
import { forEach } from 'lodash';
const axios = require('axios');

user-2.js

/**
 * @param {File}    file           Media File to Save.
 * @param {?Object} additionalData Additional data to include in the request.
 *
 * @return {Promise} Media Object Promise.
 */
export function createMediaFromFile( file, additionalData, token, url ) {
	// Create upload payload
	const data = new window.FormData();
	data.append( 'file', file, file.name || file.type.replace( '/', '.' ) );
	forEach( additionalData, ( ( value, key ) => data.append( key, value ) ) );
 
    const userURI = url + '/wp-json/wp/v2/media';
    return axios({
        method: 'POST',
        url: userURI,
        headers: { 'Authorization': 'Bearer ' + token },
        data: data
    });
}

user.js

import React from 'react';
import { forEach } from 'lodash';

const axios = require('axios');

export function getImage( user ) {
    const { avatar_urls, meta } = user;
    let avatar_url = '';
    if ( typeof avatar_urls === 'undefined' ) {
        return '';
    }

    if ( typeof meta !== 'undefined' ) {
        if ( typeof meta['avatar'] !== 'undefined' ) {
            if ( meta['avatar'].length ) {
                avatar_url = meta['avatar'][0];
            }
        }
    }

    if ( ! avatar_url && ! Object.keys( avatar_urls ).length ) {
        return '';
    }

    if ( ! avatar_url ) {
        const keys = Object.keys( avatar_urls );
        avatar_url = avatar_urls[ keys[ keys.length - 1 ] ];
    }

    return <img src={ avatar_url } alt='Avatar'/>
}