Фото из галереи и отправка файла

// expo-image-picker 57.0.13 · src/ImagePicker.types.ts, выборка; doc-комментарии убраны, кавычки двойные
export type ImagePickerAsset = {
  uri: string;
  assetId?: string | null;
  width: number;
  height: number;
  type?: "image" | "video" | "livePhoto" | "pairedVideo" | null;
  fileName?: string | null;
  fileSize?: number;
  exif?: Record<string, any> | null;
  base64?: string | null;
  duration?: number | null;
  mimeType?: string;
  pairedVideoAsset?: ImagePickerAsset | null;
  file?: File;
};

export type ImagePickerResult = ImagePickerSuccessResult | ImagePickerCanceledResult;
export type ImagePickerSuccessResult = { canceled: false; assets: ImagePickerAsset[] };
export type ImagePickerCanceledResult = { canceled: true; assets: null };

declare function installNativeModuleProxy(providers: Record<string, () => object>): void;
declare function requireNativeModule<T>(name: string): T;
declare function createImagePickerSystem(script: { gallery: string[] }): object;

// ImagePickerAsset и ImagePickerResult из expo-image-picker 57 — поля, нужные этой статье
interface ImagePickerAsset {
  uri: string;
  width: number;
  height: number;
  fileName?: string | null;
  fileSize?: number;
  mimeType?: string;
  base64?: string | null;
}
type ImagePickerResult = { canceled: false; assets: ImagePickerAsset[] } | { canceled: true; assets: null };
interface ImagePickerModule {
  launchImageLibraryAsync(options: { mediaTypes?: string[]; base64?: boolean }): Promise<ImagePickerResult>;
}

installNativeModuleProxy({
  ExponentImagePicker: () => createImagePickerSystem({ gallery: ["выбрать", "отмена"] }),
});
const ImagePicker = requireNativeModule<ImagePickerModule>("ExponentImagePicker");

async function pickForSet(setId: string) {
  const result = await ImagePicker.launchImageLibraryAsync({ mediaTypes: ["images"] });
  if (result.canceled) {
    console.log(setId + ": assets =", result.assets);
    return;
  }
  const photo = result.assets[0];
  console.log(setId + ":", photo.uri);
  console.log("файл:", photo.fileName, photo.mimeType, photo.width + "×" + photo.height, photo.fileSize, "байт");
  console.log("base64:", photo.base64);
}

pickForSet("s1").then(() => pickForSet("s2"));

declare function installNativeModuleProxy(providers: Record<string, () => object>): void;
declare function requireNativeModule<T>(name: string): T;
declare function createPermissionSystem(platform: "ios" | "android", script: { dialogs: string[] }): object;
declare function createImagePickerSystem(script: { camera: string[]; permissions: object }): object;

interface ImagePickerAsset {
  uri: string;
}
type ImagePickerResult = { canceled: false; assets: ImagePickerAsset[] } | { canceled: true; assets: null };
interface ImagePickerModule {
  launchCameraAsync(options: object): Promise<ImagePickerResult>;
}

// Олег на Android снимает технику жима; dialogs — его ответы в системных окнах по порядку
installNativeModuleProxy({
  ExponentImagePicker: () =>
    createImagePickerSystem({
      camera: ["снять"],
      permissions: createPermissionSystem("android", { dialogs: ["запретить", "разрешить"] }),
    }),
});
const ImagePicker = requireNativeModule<ImagePickerModule>("ExponentImagePicker");

async function shootTechnique(attempt: number) {
  try {
    const result = await ImagePicker.launchCameraAsync({});
    if (!result.canceled) console.log("попытка " + attempt + ":", result.assets[0].uri);
  } catch (e) {
    console.log("попытка " + attempt + ":", (e as Error).message);
  }
}

shootTechnique(1).then(() => shootTechnique(2));

// react-native 0.86.0 · Libraries/Network/FormData.js, строки 82–105; кавычки двойные
getParts(): Array<FormDataPart> {
  return this._parts.map(([name, value]) => {
    const contentDisposition = "form-data; name=\"" + name + "\"";

    const headers: Headers = {"content-disposition": contentDisposition};

    // The body part is a "blob", which in React Native just means
    // an object with a `uri` attribute. Optionally, it can also
    // have a `name` and `type` attribute to specify filename and
    // content type (cf. web Blob interface.)
    if (typeof value === "object" && !Array.isArray(value) && value) {
      if (typeof value.name === "string") {
        headers["content-disposition"] +=
          `; filename="${encodeFilename(value.name)}"`;
      }
      if (typeof value.type === "string") {
        headers["content-type"] = value.type;
      }
      return {...value, headers, fieldName: name};
    }
    // Convert non-object values to strings as per FormData.append() spec
    return {string: String(value), headers, fieldName: name};
  });
}

declare function installNativeModuleProxy(providers: Record<string, () => object>): void;
declare function requireNativeModule<T>(name: string): T;
declare function createImagePickerSystem(script: { gallery: string[] }): object;
// сервер загрузки из подложки: тело он разбирает настоящим разборщиком браузера
declare function serverFetch(url: string, init: RequestInit): Promise<Response>;

interface ImagePickerAsset {
  uri: string;
  fileName?: string | null;
  mimeType?: string;
}
interface ImagePickerModule {
  launchImageLibraryAsync(options: object): Promise<{ canceled: boolean; assets: ImagePickerAsset[] | null }>;
}
installNativeModuleProxy({
  ExponentImagePicker: () => createImagePickerSystem({ gallery: ["выбрать"] }),
});
const ImagePicker = requireNativeModule<ImagePickerModule>("ExponentImagePicker");

async function uploadPhoto() {
  const { assets } = await ImagePicker.launchImageLibraryAsync({ mediaTypes: ["images"] });
  const photo = assets![0];
  const form = new FormData();
  form.append("photoId", "A-2");
  // так файл кладут в FormData React Native: не байты, а адрес файла, имя и тип
  form.append("file", { uri: photo.uri, name: photo.fileName ?? "photo.jpg", type: photo.mimeType ?? "image/jpeg" });
  const response = await serverFetch("/api/upload/photo", { method: "POST", body: form });
  console.log(response.status, JSON.stringify(await response.json()));
  console.log("getParts:", typeof form.getParts);
  console.log(form.getParts());
}

uploadPhoto();

// react-native 0.86.0 · Libraries/Network/RCTNetworking.mm, класс RCTHTTPFormDataHelper, сокращено
static NSString *RCTGenerateFormBoundary()
{
  const size_t boundaryLength = 70;
  const char *boundaryChars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789-_.";
  // … 70 случайных символов из этого набора
}

// на каждую часть из getParts: граница, заголовки, пустая строка, тело.
// result[@"body"] — строка части или файл, прочитанный по uri
[_multipartBody
    appendData:[[NSString stringWithFormat:@"--%@\r\n", _boundary] dataUsingEncoding:NSUTF8StringEncoding]];
[headers enumerateKeysAndObjectsUsingBlock:^(NSString *parameterKey, NSString *parameterValue, BOOL *stop) {
  [self->_multipartBody appendData:[[NSString stringWithFormat:@"%@: %@\r\n", parameterKey, parameterValue]
                                       dataUsingEncoding:NSUTF8StringEncoding]];
}];
[_multipartBody appendData:[@"\r\n" dataUsingEncoding:NSUTF8StringEncoding]];
[_multipartBody appendData:result[@"body"]];
[_multipartBody appendData:[@"\r\n" dataUsingEncoding:NSUTF8StringEncoding]];

// после последней части — закрывающая граница, и та же граница уходит в заголовок запроса
[_multipartBody
    appendData:[[NSString stringWithFormat:@"--%@--\r\n", _boundary] dataUsingEncoding:NSUTF8StringEncoding]];
NSString *contentType = [NSString stringWithFormat:@"multipart/form-data; boundary=%@", _boundary];

declare function installNativeModuleProxy(providers: Record<string, () => object>): void;
declare function requireNativeModule<T>(name: string): T;
declare function createImagePickerSystem(script: { gallery: string[] }): object;
declare function serverFetch(url: string, init: RequestInit): Promise<Response>;
// натив читает файл по uri сам; в подложке это модель диска приложения
declare function readDisk(uri: string): Blob;
interface ImagePickerModule {
  launchImageLibraryAsync(options: object): Promise<{ assets: { uri: string; fileName: string; base64: string }[] }>;
}
installNativeModuleProxy({ ExponentImagePicker: () => createImagePickerSystem({ gallery: ["выбрать"] }) });
const ImagePicker = requireNativeModule<ImagePickerModule>("ExponentImagePicker");

// части в том виде, в каком их отдаёт getParts() из FormData.js React Native
type PartHeaders = Record<string, string>;
type Part = { headers: PartHeaders; string: string } | { headers: PartHeaders; uri: string };

// то же, что RCTHTTPFormDataHelper в RCTNetworking.mm: граница, заголовки части, тело
function encodeMultipart(parts: Part[], boundary: string): Blob {
  const chunks: (string | Blob)[] = [];
  for (const part of parts) {
    chunks.push("--" + boundary + "\r\n");
    for (const [name, value] of Object.entries(part.headers)) chunks.push(name + ": " + value + "\r\n");
    chunks.push("\r\n", "string" in part ? part.string : readDisk(part.uri), "\r\n");
  }
  chunks.push("--" + boundary + "--\r\n");
  return new Blob(chunks);
}

async function compare() {
  // base64: true — пикер вдобавок к файлу отдаёт его содержимое строкой
  const photo = (await ImagePicker.launchImageLibraryAsync({ base64: true })).assets[0];
  const boundary = "podhod-boundary-7MA4YWxkTrZu0gW";
  const body = encodeMultipart([
    { headers: { "content-disposition": "form-data; name=\"photoId\"" }, string: "A-2" },
    { headers: { "content-disposition": "form-data; name=\"file\"; filename=\"" + photo.fileName + "\"", "content-type": "image/jpeg" }, uri: photo.uri },
  ], boundary);
  const headers = { "content-type": "multipart/form-data; boundary=" + boundary };
  const multipart = await serverFetch("/api/upload/photo", { method: "POST", headers, body });
  console.log("multipart:", multipart.status, JSON.stringify(await multipart.json()));
  const asJson = JSON.stringify({ photoId: "A-3", base64: photo.base64 });
  const base64 = await serverFetch("/api/upload/photo-base64", { method: "POST", body: asJson });
  console.log("base64:", base64.status, JSON.stringify(await base64.json()));
}

compare();

declare function installNativeModuleProxy(providers: Record<string, () => object>): void;
declare function requireNativeModule<T>(name: string): T;
declare function createImagePickerSystem(script: { gallery: string[] }): object;
declare function serverFetch(url: string, init: RequestInit): Promise<Response>;
declare function setOnline(on: boolean): void;
declare function photoPart(task: PendingUpload): Blob;
declare function createJournal(device: string): { newId(): string; write(rowId: string, fields: object): void; row(rowId: string): object };
interface PendingUpload { photoId: string; uri: string; name: string; type: string }
installNativeModuleProxy({ ExponentImagePicker: () => createImagePickerSystem({ gallery: ["выбрать"] }) });
const ImagePicker = requireNativeModule<{ launchImageLibraryAsync(o: object): Promise<{ assets: { uri: string; fileName: string }[] }> }>("ExponentImagePicker");

const journal = createJournal("A");
const uploads: PendingUpload[] = [];

// журнал уезжает пачками синхронизации, поэтому в нём только ссылка, а файл едет своей очередью
function attachPhoto(setId: string, task: PendingUpload) {
  journal.write(setId, { photo: task.photoId });
  uploads.push(task);
}

async function drainUploads() {
  while (uploads.length > 0) {
    const task = uploads[0];
    const form = new FormData();
    form.append("photoId", task.photoId);
    form.append("file", photoPart(task));
    try {
      const response = await serverFetch("/api/upload/photo", { method: "POST", body: form });
      console.log("загружено:", task.photoId, "→", (await response.json()).url);
      uploads.shift();
    } catch (e) {
      console.log("загрузка:", (e as Error).message, "| ждут:", uploads.length);
      return;
    }
  }
}

async function gym() {
  journal.write("s1", { exercise: "жим", kg: 80, reps: 8 });
  const photo = (await ImagePicker.launchImageLibraryAsync({})).assets[0];
  setOnline(false);
  attachPhoto("s1", { photoId: journal.newId(), uri: photo.uri, name: photo.fileName, type: "image/jpeg" });
  console.log("подход:", JSON.stringify(journal.row("s1")), "| ждут загрузки:", uploads.length);
  await drainUploads();
  setOnline(true);
  await drainUploads();
}

gym();

import * as ImagePicker from "expo-image-picker";
import { File, Paths } from "expo-file-system";
import type { PendingUpload } from "./upload-queue.types";

// снимок для подхода: выбрать и сразу скопировать из кеша пикера в документы приложения,
// потому что файл может ждать загрузки днями, а кеш система вправе очистить
export async function pickPhotoForSet(photoId: string): Promise<PendingUpload | null> {
  const result = await ImagePicker.launchImageLibraryAsync({ mediaTypes: ["images"], quality: 0.8 });
  if (result.canceled) return null;
  const asset = result.assets[0];
  // расширение берём у копии пикера: png так и останется png
  const kept = new File(Paths.document, photoId + "." + asset.uri.split(".").pop());
  await new File(asset.uri).copy(kept);
  return { photoId, path: kept.uri, mimeType: asset.mimeType ?? "image/jpeg" };
}

import { File, UploadType } from "expo-file-system";
import { API_URL } from "./config";
import type { PendingUpload } from "./upload-queue.types";

// одна попытка очереди загрузки: true — сервер принял, задачу можно снимать.
// upload отклоняется только на сбое сети или чтения файла, ответ 4xx/5xx приходит в status
export async function sendPhoto(task: PendingUpload, token: string): Promise<boolean> {
  const result = await new File(task.path).upload(API_URL + "/api/upload/photo", {
    uploadType: UploadType.MULTIPART,
    fieldName: "file",
    mimeType: task.mimeType,
    parameters: { photoId: task.photoId },
    headers: { authorization: "Bearer " + token },
  });
  return result.status >= 200 && result.status < 300;
}

// expo 57.0.16 · src/winter/runtime.native.ts, строки 41–53; кавычки двойные
const useRnFetch =
  process.env.EXPO_PUBLIC_USE_RN_FETCH === "1" || process.env.EXPO_PUBLIC_USE_RN_FETCH === "true";

if (!useRnFetch) {
  // … проверка, что Headers уже поставил полифил React Native
  install("fetch", () => require("./fetch").fetch);
}

// expo 57.0.16 · src/winter/fetch/convertFormData.ts, convertFormDataAsync — ветки по виду части
if (typeof entry === "string") {
  results.push(entry);
} else if (entry instanceof Blob) {
  results.push(new Uint8Array(await blobToArrayBufferAsync(entry)));
} else if (typeof entry === "object" && "bytes" in entry) {
  results.push(await entry.bytes());
} else {
  throw new Error("Unsupported FormDataPart implementation");
}