ak-react-native-upploadmanager/index.js

Upload Manager for React Native

import React, {PureComponent} from 'react';
import { FilePicker, FilePickerUtil } from 'react-native-file-pick';
import axios from 'axios';
import ProgressCircle from './PercentageCircle'

import { I18nManager , Text} from 'react-native';
//import { GE } from './GEvent';
var ImagePicker = require('react-native-image-picker');
import ImageResizer from 'react-native-image-resizer';

export var IsUploadingNow={Value:false};

export default class UploadManager extends PureComponent{


    constructor(props)
    {
      super(props);
      this.percenrage = 0;
      
       this.options = {
        title: 'Select Image',
        storageOptions: {
          skipBackup: true,
          path: 'images'
        }
      };
      I18nManager.allowRTL(false);
    }


    
  
    submitFile(uri, progressCB,complete_FileName){
  
      IsUploadingNow.Value = true;

      var photo = {
        uri: uri,
        type: 'image/jpeg',
        name: 'photo.jpg',
    };
    
    var formData = new FormData();
    formData.name = "filetoupload";
    formData.append('authToken', 'secret');
    formData.append('filetoupload', photo);
    formData.append('title', 'A beautiful photo!');

      axios.post( this.props.Server,
        formData,
        {
          headers: {
              'Content-Type': 'multipart/form-data',
              'file-extension':'jpg'
          },
          onUploadProgress: ( progressEvent ) =>
          {
            let temp = parseInt( Math.floor( ( progressEvent.loaded * 100 ) / progressEvent.total ) ) - 2;
            if(temp < 0) temp = 0;
            if(progressCB!=undefined)
               { progressCB(temp);}
            this.percenrage = temp;
            this.forceUpdate();
          }
        }
      ).then((res)=>{
        if(complete_FileName!=undefined)
          {
            progressCB(100);
            this.percenrage = 100;
            complete_FileName(res.headers["file-namex"]);
            console.log("Filename:"+ res.headers["file-namex"]);
            IsUploadingNow.Value = false;
            this.forceUpdate();
          }
      })
      .catch((error)=>{
        console.log("Upload error:");
        IsUploadingNow.Value = false;
        console.log(error);
        this.percenrage = 0;
        this.forceUpdate();
      });

     }
    
      
    showFilePicker(progressChanged_Callback, uploadCompleted_Callback)
    {
      /*FilePicker.show(
      {
        filetype: [FilePickerUtil.images()],
      },
      (error,res) => 
      {
        console.log("SOURCE URI:"+ res.uri);
        if(res!=null)
        if(res.uri!=null)
        this.submitFile(res.uri, progressCB,complete_FileName);
      });*/

      ImagePicker.showImagePicker(this.options, (response) => {
        //console.log('Response = ', response);
        if (response.didCancel) {
          console.log('User cancelled image picker');
        }
        else if (response.error) {
          console.log('ImagePicker Error: ', response.error);
        }
        else if (response.customButton) {
          console.log('User tapped custom button: ', response.customButton);
        }
        else {
          if(response!=null)
          if(response.uri!=null)

          ImageResizer.createResizedImage(response.uri,
                                           this.props.CompressMaxWidth,
                                           this.props.CompressMaxHeight,
                                           'JPEG', 
                                           this.props.CompressQuality
                                           ).then((response) => {
            //console.log(JSON.stringify(response))
            // response.uri is the URI of the new image that can now be displayed, uploaded...
            // response.path is the path of the new image
            // response.name is the name of the new image with the extension
            // response.size is the size of the new image
            this.submitFile(response.uri, progressChanged_Callback,uploadCompleted_Callback);
          }).catch((err) => {
            // Oops, something went wrong. Check that the filename is correct and
            // inspect err to get more details.
            console.log("Image compression failed!")
          });

        }
      });

    }
  
    
  
    render()
    {
      return (<ProgressCircle
                percent={this.percenrage}
                radius={18}
                borderWidth={4}
                color="#3399FF"
                shadowColor="#999"
                bgColor="#fff"
              >
          <Text style={{ fontSize: 8 }}>{this.percenrage+'%'}</Text>
        </ProgressCircle>)
    }
  }