Загрузка файлов, предварительный просмотр с использованием React JS и PHP-сервера

Question

Я пытаюсь загрузить файлы в ReactJs. Мне нужно реализовать небольшой предварительный просмотр файла, где пользователь может видеть файл, который он собирается загрузить. К сожалению, этот предварительный просмотр не работает, потому что я не получаю относительный путь к файлу с компьютера пользователя из моего массива файлов. Вот мой код для функции добавления файла

onFilesAdded(files) {
    console.log(files);
    this.setState(prevState => ({
      files: prevState.files.concat(files)
    }));   
}

вот мой рендер с моей зоной сброса с идеей прикрепления моих файлов

   return (
        <Card className="space-above">
            <CardBody>
                <form name="form" onSubmit={this.handleSubmit}>
                   <div className="Upload">
                    <span className="Title">Change Profile Picture</span>
                    <div className="Content">
                      <div>
                        <Dropzone
                          onFilesAdded={this.onFilesAdded}

                        />
                      </div>
                      <div className="Files">
                             <Fragment>
                                {this.state.files.map(file => {
                                  return (
                                    <div key={file.name} className="Row">
                                        <img
                                            alt="Preview"
                                            key={file.name}
                                            src={file.name}
                                            style={previewStyle}
                                          />
                                          {console.log(file)}
                                        <span className="Filename">{file.name}</span>
                                        {this.renderProgress(file)}
                                    </div>
                                  );
                                })}
                            </Fragment>
                        </div>
                    </div>
                </div>

С разделом предварительного просмотра.

Во-вторых, когда я отправляю эти файлы на мой сервер PHP, я не могу получить файлы. Возвращает не найденные файлы, так как значение файла является пустым массивом.

Вот мой код для всего процесса. Любая помощь по этому вопросу будет принята с благодарностью или указатели.

import React, { Component,Fragment } from 'react';
import {Button, Card, CardBody} from 'mdbreact';
import request from 'superagent';
import Dropzone from "./dropzone/Dropzone";
import { Line } from 'rc-progress';
import Progress from "./progress/Progress";
import { Trans} from '@lingui/macro';
import { apiConstants } from '../_constants';
import { connect } from 'react-redux';

//this component is to upload a file into my server
class Muzikolupload extends Component {

     constructor(props) {
    super(props);
    this.state = {
      files: [],
      uploading: false,
      uploadProgress: {},
      successfullUploaded: false
    };

    this.onFilesAdded = this.onFilesAdded.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

    onFilesAdded(files) {
        console.log(files);
        this.setState(prevState => ({
          files: prevState.files.concat(files)
        }));   
    }

    //Handling Submision
    handleSubmit(event) {
        event.preventDefault();
        const {user} = this.props;
        let authKey = user.auth_key;
        const {files} = this.state;

        if (files.length>0) {
            this.setState({ submitted: true,nofile:false });
            //sent to my server now using
            let req = request.post(apiConstants.API_GENERAL_URL+'changepbackpic?access-token='+authKey);
            req.on('progress', event => {
                let percent = Math.floor(event.percent);
                if (percent >= 100) {
                    this.setState({ percent: 100 });
                } else {
                    this.setState({ percent: percent });
                }
            });
            const that = this;
            req.send(this.state);
            req.end((err, res) => {
                if(err){
                    console.log('error occured during file uploading', err);
                    this.setState({
                        completed:true,
                        message:'Field During Upload',
                        submitted:false,
                        files:[]
                    })
                }
                 if(res){
                     console.log('successfullUploaded', res);
                    this.setState({
                        completed:true,
                        message:'File succesfully uploaded',
                        submitted:false,
                        files:[]
                    })
                }
            });
        }
        else{
            this.setState({ nofile: true, submitted: false });
        }
    }

    renderProgress(file) {
        const uploadProgress = this.state.uploadProgress[file.name];
        if (this.state.uploading || this.state.successfullUploaded) {
          return (
            <div className="ProgressWrapper text-center">
              <Progress progress={uploadProgress ? uploadProgress.percentage : 0} />
              Drag and Drop or open to Change Picture

            </div>
          );
        }
  }

    render() {
        const previewStyle = {
          display: 'inline',
          width: 100,
          height: 100,
        };
        return (
            <Card className="space-above">
                <CardBody>
                    <form name="form" onSubmit={this.handleSubmit}>
                       <div className="Upload">
                        <span className="Title">Change Profile Picture</span>
                        <div className="Content">
                          <div>
                            <Dropzone
                              onFilesAdded={this.onFilesAdded}

                            />
                          </div>
                          <div className="Files">
                                 <Fragment>
                                    {this.state.files.map(file => {
                                      return (
                                        <div key={file.name} className="Row">
                                            <img
                                                alt="Preview"
                                                key={file.name}
                                                src={file.name}
                                                style={previewStyle}
                                              />
                                              {console.log(file)}
                                            <span className="Filename">{file.name}</span>
                                            {this.renderProgress(file)}
                                        </div>
                                      );
                                    })}
                                </Fragment>
                            </div>
                        </div>
                    </div>
                    {this.state.submitted &&
                        <Line percent={this.state.percent} strokeWidth='1' strokeColor='#2db7f5' strokeLinecap='square' />
                    }
                    {this.state.completed &&
                        <div className="help-block">
                            {this.state.message}
                        </div>
                    }
                    {this.state.nofile &&
                        <div className="help-block">
                           Please Attach a Picture
                        </div>
                    }
                    <div >
                        <Button type="submit" onClick={this.handleSubmit} className=" site-secondary-back btn-block"  ><Trans>Submit</Trans></Button>
                    </div>
                    </form>
                </CardBody>
            </Card>
        );
    }
}

function mapStateToProps(state) {
    const {user} = state.authentication;
    return {
        user,
    };
}

export default connect(
  mapStateToProps,
)(Muzikolupload)