React-native-document-picker: How To Upload File Using Axios?

Created on 13 Nov 2018 · 9Comments · Source: rnmods/react-native-document-picker

Can i use FormData and append to upload this?

FAQ

Source

loverdeveloper

Most helpful comment

Yeah, I've used the following to upload using axios and redux-form.
fields is the data from the redux form and the uploadFile is the res returned from RN-Document-Picker.

Format Data

    const formatData = ({fields, uploadFile}) => {
      const formData = new FormData();

      Object.keys(fields).forEach(key => {
        formData.append(key, fields[key]);
      });

      formData.append(
        'file',
        uploadFile
      );

      return formData;
    };

Upload formData

    const formData = formatData(response.data.upload_form.fields, uploadFile);
        return axios
          .create({
            baseURL: uploadUrl,
            timeout: 600000, // 10 Minutes
            method: 'POST',
            data: formData,
            // Add any further headers here such as auth
          })
          .request()
          .then(data => {
            dispatch({
              type: UPLOAD.SUCCESS,
              payload: data,
            });
          })
          .catch(errors => {
            dispatch({
              type: UPLOAD.FAILURE,
              payload: errors,
            });
          });

phil-hodgson-1st on 13 Nov 2018

❤3 👍2 🎉1

All 9 comments

Yeah, I've used the following to upload using axios and redux-form.
fields is the data from the redux form and the uploadFile is the res returned from RN-Document-Picker.

Format Data

    const formatData = ({fields, uploadFile}) => {
      const formData = new FormData();

      Object.keys(fields).forEach(key => {
        formData.append(key, fields[key]);
      });

      formData.append(
        'file',
        uploadFile
      );

      return formData;
    };

Upload formData

    const formData = formatData(response.data.upload_form.fields, uploadFile);
        return axios
          .create({
            baseURL: uploadUrl,
            timeout: 600000, // 10 Minutes
            method: 'POST',
            data: formData,
            // Add any further headers here such as auth
          })
          .request()
          .then(data => {
            dispatch({
              type: UPLOAD.SUCCESS,
              payload: data,
            });
          })
          .catch(errors => {
            dispatch({
              type: UPLOAD.FAILURE,
              payload: errors,
            });
          });

phil-hodgson-1st on 13 Nov 2018

❤3 👍2 🎉1

@phil-hodgson-1st
i'm not use redux , how can upload without redux?
Thanks , Thanks , Thanks

loverdeveloper on 14 Nov 2018

You should be able to just remove the dispatches and action type/payloads so the formatData remains the same. The second function changes to this:

        const formData = formatData(response.data.upload_form.fields, uploadFile);
        return axios
          .create({
            baseURL: uploadUrl,
            timeout: 600000, // 10 Minutes
            method: 'POST',
            data: formData,
            // Add any further headers here such as auth
          })
          .request()
          .then(data => {
            // Call a function here if the request is successful
          })
          .catch(errors => {
            // Call a function here if the request fails
          });

Just move in your own functions here for success and fail 👍

phil-hodgson-1st on 18 Nov 2018

@phil-hodgson-1st Thank you for the example!

What does upload file mean in this case? is it any kind of file (image, pdf) and is upload the uri? or the actual raw data?

sorinfratila on 7 Dec 2018

getting this error -->>

Error: Network Error
at createError (createError.js:16)
at XMLHttpRequest.handleError (xhr.js:81)
at XMLHttpRequest.dispatchEvent (event-target-shim.js:818)
at XMLHttpRequest.setReadyState (XMLHttpRequest.js:574)
at XMLHttpRequest.__didCompleteResponse (XMLHttpRequest.js:388)
at XMLHttpRequest.js:501
at RCTDeviceEventEmitter.emit (EventEmitter.js:189)
at MessageQueue.__callFunction (MessageQueue.js:395)
at MessageQueue.js:106
at MessageQueue.__guard (MessageQueue.js:343)