Загрузить изображение из реагирующего компонента с carrierwave и реагировать на рельсы - PullRequest
Новая
       33

Загрузить изображение из реагирующего компонента с carrierwave и реагировать на рельсы

0 голосов
/ 01 октября 2018

С сегодняшнего утра у меня есть проблема, которая постоянно блокирует меня ... На самом деле я пытаюсь загрузить файл в AWS S3 с помощью carrierwave (я на сайте Reaction_on_rails).Он очень хорошо работает с конструктором рельсов, поэтому виноват не несущая волна, а мои компонентыact.js.

Мой компонент: 

import PropTypes from 'prop-types';
import React from 'react';
import { log } from 'util';
import { resolve } from 'upath';

export default class Form extends React.Component {
  static propTypes = {
    url: PropTypes.string.isRequired,
  };

  /**
   * @param props - Comes from your rails view.
   */
  constructor(props) {
    super(props);

    this.state = {
      sound: '',
    };
  }

  submitGroupForm = (event) => {
    event.preventDefault();

    fetch(this.props.url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
        'X-CSRF-Token': ReactOnRails.authenticityToken(),
        // 'Access-Control-Allow-Origin': '*'
      },
      body: JSON.stringify({
        band_music: {
          sound: this.state.sound,
        }
      }),
    }).then((response) => {
      console.log(response)
    }).then((err) => {
      console.log(err);
    })

  }

  onChange = (e) => {
    this.setState({ sound: e.target.files[0] });
  }

  render() {
    console.log(this.state)
    return (
      <div>
        <form onSubmit={this.submitGroupForm}>

          <div className="form-group">
            <label htmlFor="sound" className="color-primary">
                mp3 file
            </label>
            <div className="row justify-content-center align-items-center">
              <input
                  id="sound"
                  type="file"
                  name="sound"
                  onChange={(e) => this.onChange(e)} 
                />
            </div>
          </div>
          <div className="row justify-content-center">
            <input className="btn btn-lg bg-button color-white mt-3" type="submit" value="Post the file" />
          </div>
        </form>
      </div>
    );
  }
}

Большая проблема, с которой я столкнулся, заключается в том, чтоФайл не проходит через Json, он создает объект File javascript, а когда он проходит через API, он интерпретирует значение как {}.Я пытался преобразовать этот объект File в base64, но он все еще не работает ....

Есть идеи?

...