score:-3

you need to base64 encode the image and then send the body as a json (with the header content-type set to application/json)

score:0

you can use co-busboy node module to write a middleware, this is an example for koa:

firstly, you need to install co-busboy by npm or yarn:

npm i co-busboy -s or yarn add co-busboy

// upload.js
var parse = require('co-busboy')
var fs = require('fs')
var path = require('path')
var upload = function * (next) {
  var parts = parse(this, {
    autofields: true
  })
  while(var part = yield parts) {
    part.pipe(fs.createreadstream(path.join('uploadpath', part.filename)))
  }
  yield next
}

module.exports = () => upload


// app.js

var upload = require('upload')
app.use(upload())

reference:

co-busboy

score:1

the example below uses react-native-fetch-blob at react native part, and nodejs with express and formidable to parse form at the server side.

let's first upload the file after determining whether user uploaded a photo or video:

rnfetchblob.fetch(
  'post',
  constants.upload_url + '/upload',
  {
    'content-type': 'multipart/form-data'
  },
  [
    {
      name: this.state.photourl ? 'image' : 'video',
      filename: 'avatar-foo.png',
      type: 'image/foo',
      data: rnfetchblob.wrap(datapath)
    },
    // elements without property `filename` will be sent as plain text
    { name: 'email', data: this.props.email },
    { name: 'title', data: this.state.text }
  ]
)
  // listen to upload progress event
  .uploadprogress((written, total) => {
    console.log('uploaded', written / total);
    this.setstate({ uploadprogress: written / total });
  })
  // listen to download progress event
  .progress((received, total) => {
    console.log('progress', received / total);
  })
  .then(res => {
    console.log(res.data); // we have the response of the server
    this.props.navigation.goback();
  })
  .catch(err => {
    console.log(err);
  });
};

similarly, receive file and load the data accordingly:

exports.upload = (req, res) => {
  var form = new formidable.incomingform();
  let data = {
    email: '',
    title: '',
    photourl: '',
    videourl: '',
  };

  // specify that we want to allow the user to upload multiple files in a single request
  form.multiples = true;
  // store all uploads in the /uploads directory
  form.uploaddir = path.join(__dirname, '../../uploads');

  form.on('file', (field, file) => {
    let suffix = field === 'image' ? '.png' : '.mp4';
    let timestamp = new date().gettime().tostring();

    fs.rename(file.path, path.join(form.uploaddir, timestamp + suffix)); //save file with timestamp.

    data[field === 'image' ? 'photourl' : 'videourl'] = timestamp + suffix;
  });
  form.on('field', (name, value) => {
    data[name] = value;
  });
  form.on('error', err => {
    console.log('an error has occured: \n ' + err);
  });
  form.on('end', () => {
    // now we have a data object with fields updated.
  });
  form.parse(req);
};

and use the controller function:

let route = express.router();
// other controller functions...
route.post('/upload', uploadcontroller.upload);
app.use(route);

make sure you read the comments included in the code. datapath is media's path (not base64 string) created after using react-native-image-picker . you can use react-native-progress to show upload progress.

check out multipartform-data section of react-native-fetch-blob for further reference: https://github.com/wkh237/react-native-fetch-blob#multipartform-data-example-post-form-data-with-file-and-data


Related Query

More Query from same tag