How can I send image to backend in react native?

Question

I want to use a library called react-native-image-picker to deliver the image to the backend server using formData and save it to the computer diskStorage upload using multer.

However, there is some confusion in using this. If I use my code I get this error:

MulterError: Unexpected fielderror.

How can I fix the code?

this is my code

(front/Third.js)

    const Third = () => {
      const [imageSource, setImageSource] = useState(undefined);
      const dispatch = useDispatch();
     
      const options = {
        title: 'Load Photo',
        customButtons: [
          {name: 'button_id_1', title: 'CustomButton 1'},
          {name: 'button_id_2', title: 'CustomButton 2'},
        ],
        storageOptions: {
          skipBackup: true,
          path: 'images',
        },
      };

               const showCameraRoll = () => {
        launchImageLibrary(options, (response) => {
          if (response.error) {
            console.log('LaunchImageLibrary Error: ', response.error);
          } else {
            setImageSource(response.uri);
          }
               console.log('response.uri:', response.uri);

      // response.uri: file:///data/user/0/com.cookingrn/cache/rn_image_picker_lib_temp_5f6898ee-a8d4-48c9-b265-142efb11ec3f.jpg

          const form = new FormData();
          form.append('Files', {
            name: 'SampleFile.jpg', // Whatever your filename is
            uri: response.uri, //  file:///data/user/0/com.cookingrn/cache/rn_image_picker_lib_temp_5f6898ee-a8d4-48c9-b265-142efb11ec3f.jpg
            type: 'image/jpg', // video/mp4 for videos..or image/png etc...
          });

          dispatch({
            type: UPLOAD_IMAGES_REQUEST,
            data: form,
          });
        });
      };

      return (
        <Container>
          {imageSource && <Photo source={{uri: imageSource}} />}
          <ImagePickerButton onPress={showCameraRoll}>
            <Label>Show Camera Roll</Label>
          </ImagePickerButton>
        </Container>
      );
    };

    export default Third;

(backend/post.js)

    try {
      fs.accessSync('uploads');
    } catch (error) {
      console.log('uploads 폴더가 없으므로 생성합니다.');
      fs.mkdirSync('uploads');
    }

    const upload = multer({
      storage: multer.diskStorage({
        destination(req, file, done) {
          done(null, 'uploads');
        },
        filename(req, file, done) {
          const ext = path.extname(file.originalname);
          const basename = path.basename(file.originalname, ext);
          done(null, basename + '_' + new Date().getTime() + ext);
        },
      }),
      limits: {fileSize: 20 * 1024 * 1024},
    });

    router.post('/images', isLoggedIn, upload.array('image'), (req, res, next) => {
      // dispatch UPLOAD_IMAGES_REQUEST  POST /post/images
      res.json(req.files.map((v) => v.filename));
    });

(saga/index.js)

    function uploadImagesAPI(data) {
      return axios.post('/post/images', data);
    }

    function* uploadImages(action) {
      try {
        const result = yield call(uploadImagesAPI, action.data);
        yield put({
          type: UPLOAD_IMAGES_SUCCESS,
          data: result.data,
        });
      } catch (err) {
        console.error(err);
        yield put({
          type: UPLOAD_IMAGES_FAILURE,
          error: err.response.data,
        });
      }
    }

Answer 1

Create a FormData and send a post request to backend by including that form in the body of the request

const SendFileToBackend = (uri) => {
  const form = new FormData();
  form.append("Files", {
    name: "SampleFile.jpg", // Whatever your filename is
    uri: uri, //  file:///data/user/0/com.cookingrn/cache/rn_image_picker_lib_temp_5f6898ee-a8d4-48c9-b265-142efb11ec3f.jpg
    type: "image/jpg", // video/mp4 for videos..or image/png etc...
  });

  // Perform a Post request to backend server by putting `form` in the Body of the request
};