jquery - files - multiple file upload bootstrap

Cargar archivo usando ReactJS a través de BlueImp FileUpload jQuery plugin

Question

Este es un novato para ReactJS.

¿Alguien puede informar sobre qué usar o cómo se puede cargar un formulario (con algunos cuadros de entrada y un selector de archivos) en React?

He estado destrozando mis nervios al utilizar el complemento BlueImp JQuery-file-upload . Los mensajes de error son crípticos y no han podido obtener ayuda útil de google.

Mi código es el siguiente:

<form id="myForm" enctype="multipart/form-data" onSubmit={this.handleSubmit}>
  <input type="text" name="name">
  <input type="text" name="lastName">
  <input type="file" accept="image/*" name="myPic">
</form>

// Inside handleSubmit() of my component
$(''#myForm").fileupload(''add'', {url: "myurl"});

¡Gracias!

Answer 1

Aquí está el mío:

Sería sencillo modificarlo para manejar múltiples archivos o usar XHR nativo en lugar de jQuery.

var FileUpload = React.createClass({
  handleFile: function(e) {
      var file = e.target.files[0];
      var formData = new FormData();
      formData.append(''file'',  file, file.name);
      $.ajax({
        url: URL,
        data: formData,
        cache: false,
        processData: false,
        contentType: false,
        type: ''POST'',
        success: function(data) {
          console.log(''success'', data);
        },
        error: function() {
          console.error(''error uploading file'');
        },
      });
    },
    render: function() {
      return (
        <input className="btn btn-default btn-file" type="file" onChange={this.handleFile} accept="image/*;capture=camera"/>
      );
    }
});

Answer 2

Aquí está mi camino NO jQuery, usando Parse.com

var UploadImageForm = React.createClass({
  getInitialState: function() {
    return {
      myFileName: "",
      myFileHandle: {}
    };
  },

  handleChange: function(event) {
    console.log("handleChange() fileName = " + event.target.files[0].name);
    console.log("handleChange() file handle = " + event.target.files[0]);
    this.setState( {myFileName: event.target.files[0].name} );
    this.setState( {myFileHandle: event.target.files[0]} );
  },

  handleSubmit: function(e) {
    e.preventDefault();
    console.log("INSIDE: handleSubmit()");
    console.log("fileName = " + this.state.myFileName); 
    console.log("this.state.myFileHandle = " + this.state.myFileHandle);

    if (this.state.myFileHandle) {
      console.log("INSIDE if test myFileHandle.length");
      var file = this.state.myFileHandle;
      var name = this.state.myFileName;
      var parseFile = new Parse.File(name, file);

      var myUser = new Parse.Object("TestObj");
      myUser.set("profilePicFile", parseFile);
      myUser.save()
        .then(function() {
          // The file has been saved to User.
          this.setState( {myFileHandle: null} );
          console.log("FILE SAVED to Object: Parse.com");
        }.bind(this), function(error) {
          // The file either could not be read, or could not be saved to Parse.
          console.log("ERROR: Parse.com " + error.code + " " + error.message);
        });;
    } // end if
  },

  render: function() {
      return  (
        <form onSubmit={this.handleSubmit}>
          <input type="file" onChange={this.handleChange} id="profilePhotoFileUpload" />
          <input type="submit" value="Post" />
        </form>
      );
  }
});

Answer 3

Para usar el complemento BlueImp JQuery-file-upload con ReactJS, debe establecer la opción replaceFileInput en false. Esto se debe a que cuando replaceFileInput es verdadero (el valor predeterminado), BlueImp reemplaza el elemento de entrada de archivo por uno nuevo cada vez que se selecciona un nuevo archivo ... y eso es algo que ReactJS no le gusta.

Descubrí esto en: https://groups.google.com/d/msg/reactjs/lXUpL22Q1J8/-ibTaq-OJ6cJ

Consulte la documentación sobre replaceFileInput aquí: https://github.com/blueimp/jQuery-File-Upload/wiki/Options#replacefileinput

Answer 4

Probé BlueImp pero me di por vencido y estoy usando una solución modificada desde here para hacerlo:

/** @jsx React.DOM */

var FileForm = React.createClass({
    getInitialState: function() {
        return {data_uri: null}
    },
    handleSubmit: function() {
        $.ajax({
            url: url,
            type: "POST",
            data: this.state.data_uri,
            success: function(data) {
                // do stuff
            }.bind(this),
            error: function(xhr, status, err) {
                // do stuff
            }.bind(this)
        });
        return false;
    },
    handleFile: function(e) {
        var reader = new FileReader();
        var file = e.target.files[0];

        reader.onload = function(upload) {
            this.setState({
                data_uri: upload.target.result
            }, () => console.log(this.state.data_uri));

        }.bind(this);

        reader.readAsDataURL(file);
    },
    render: function() {
        return (
            <form onSubmit={this.handleSubmit} encType="multipart/form-data">
                <input type="file" onChange={this.handleFile} />
                <input type="submit" value="Submit />
            </form>

        );
    }
});

Desde allí, su punto final debería poder manejarlo.

Answer 5

Usar un complemento de jQuery dentro de React es razonable, pero dado que React mantiene su propia representación virtual del DOM, debe evitar el uso de los selectores de jQuery.

Utilice el destino del evento para obtener una referencia al nodo DOM real cuando se envíe su formulario, y envuélvalo en un objeto jQuery para acceder al complemento:

React.createClass({
  handleSubmit: function(event) {
    $(event.target).fileupload(''add'', {url: "myurl"});
  },
  render: function() {
    return (
      <form enctype="multipart/form-data" onSubmit={this.handleSubmit}>
        <input type="text" name="name" />
        <input type="text" name="lastName" />
        <input type="file" accept="image/*" name="myPic" />
      </form>
    );
  }
});