Загрузка изображения в Dropbox API из iOS отправляет поврежденный файл в Dropbox

Я использую Dropbox API v2, в частности конечную точку загрузки. Я использую React-Native с expo, чтобы выбрать изображение для загрузки в правильную папку. Я могу получить uri выбранной фотографии, но при загрузке файл поврежден и не может быть просмотрен. Когда изображение выбрано, я вижу на своем устройстве путь file: /// для местоположения изображения на моем устройстве (я полагаю).

Я готовлю что-то только о двоичных загрузках, но не нашел ничего, что действительно объясняло бы это или как я бы это сделал для загрузки.

Я вижу uri и могу просматривать изображение на устройстве, но не могу правильно загрузить его, см. Изображение ниже.

import React, { useState, useEffect, useContext } from "react";
import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
import * as ImagePicker from "expo-image-picker";

import { UserContext } from "../context/UserContext";

export default function PostScreen() {
  const [user] = useContext(UserContext);
  const [imageSelected, setImageSelected] = useState("");
  const [imageFilename, setImageFilename] = useState("");
  const [image, setImage] = useState(null);
  const [fileType, setFileType] = useState("");

  useEffect(() => {
    (async () => {
      if (Platform.OS !== "web") {
        const {
          status,
        } = await ImagePicker.requestMediaLibraryPermissionsAsync();
        if (status !== "granted") {
          alert("Sorry, we need camera roll permissions to make this work!");
        }
      }
    })();
  }, []);

  useEffect(() => {
    if (!image) {
      return;
    }
    let i = 1;
    function http_header_safe_json(v) {
      return JSON.stringify(v);
    }
    var myHeaders = new Headers();
    myHeaders.append(
      "Authorization",
      "Bearer TOKEN"
    );
    myHeaders.append(
      "Dropbox-API-Arg",
      http_header_safe_json({
        path: `/${user.username}/UserUploaded_1234.${fileType}`,
        mode: {
          ".tag": "add",
        },
        autorename: true,
      })
    );
    myHeaders.append("Content-Type", "application/octet-stream");
    var file = image;

    var requestOptions = {
      method: "POST",
      headers: myHeaders,
      body: file,
      redirect: "follow",
    };

    fetch("https://content.dropboxapi.com/2/files/upload", requestOptions)
      .then((response) => response.json())
      .then((result) => {
        console.info(result);
        i + 1;
      })
      .catch((error) => console.info("error", error));
  }, [image]);

const chooseFromLibrary = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsEditing: true,
      aspect: [4, 3],
      quality: 1,
    });
    console.info(result);
    if (!result.cancelled) {
      setImage(result.uri);
      let cut = result.uri.split(".");
      setFileType(cut.pop());
    }
}

return (
    <View style = {styles.wrapper}>
      <TouchableOpacity
        activeOpacity = {0.8}
        style = {styles.button}
        onPress = {chooseFromLibrary}
      >
        <Text style = {styles.buttonText}>Choose From Library</Text>
      </TouchableOpacity>
      <TouchableOpacity
        activeOpacity = {0.8}
        style = {styles.button}
        onPress = {takePhotoFromCamera}
      >
        <Text style = {styles.buttonText}>Take Photo From Library</Text>
      </TouchableOpacity>
      {image ? <Text>{image}</Text> : <Text>None Selected</Text>}
    </View>
  );
}

Загрузка изображения в Dropbox API из iOS отправляет поврежденный файл в Dropbox

[Перекрестная ссылка для справки: dropboxforum.com/t5/Dropbox-API-Support-Feedback/…]

Greg 30.03.2021 20:23
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
1
22
0

Другие вопросы по теме