rn-upload-formdata-helper

Tiny React Native helper for the upload problems developers keep hitting: picker assets have different shapes, MIME types are missing, file names disappear, and multipart FormData becomes repetitive.

No native module. No runtime dependencies.

GitHub

Source code, issues, and contributions:

https://github.com/qdr108/rn-upload-formdata-helper

Pull requests are welcome. If you find a React Native upload edge case, open an issue with the picker library name and the asset object shape.

Install

npm install rn-upload-formdata-helper

Local testing from this folder:

npm install /Users/a1234/Desktop/npm-pkj

Usage

import {
  buildMultipartFormData,
  createMultipartHeaders,
  normalizeAsset,
  validateAssets,
} from 'rn-upload-formdata-helper';

const pickedImage = {
  uri: 'file:///tmp/photo.jpg',
  fileName: 'photo.jpg',
  fileSize: 240000,
};

const file = normalizeAsset(pickedImage);
// { uri, name: 'photo.jpg', type: 'image/jpeg', size: 240000 }

const validation = validateAssets([pickedImage], {
  required: true,
  maxSizeBytes: 10 * 1024 * 1024,
  allowedMimeTypes: ['image/jpeg', 'image/png', 'video/mp4'],
});

if (!validation.valid) {
  console.log(validation.errors);
}

const formData = buildMultipartFormData({
  fileFieldName: 'media',
  files: [pickedImage],
  fields: {
    title: 'My post',
    tags: ['track', 'race'],
    meta: { source: 'mobile' },
  },
});

await fetch('https://api.example.com/upload', {
  method: 'POST',
  headers: createMultipartHeaders({ Authorization: 'Bearer token' }),
  body: formData,
});

API

• normalizeAsset(asset, options)
• normalizeAssets(assets, options)
• guessMimeType(fileNameOrUri, fallback)
• validateAssets(assets, options)
• buildMultipartFormData({ files, fields, fileFieldName, indexedFileNames })
• createMultipartHeaders(headers)
• isImageAsset(asset)
• isVideoAsset(asset)

Publish

npm login
npm publish --access public

If this name is already taken on npm, change name in package.json before publishing.