File Upload progress possible?

[xaun]

Is it possible to do anything like jaydenseric/apollo-upload-client#88 (comment) with URQL ? Are there any examples or guidance on upload progress with the multipart plugin?

[JoviDeCroock]

The same thing is possibke, you pass in fetch to createClient

[Ivan8R]

Please provide example. Thank you
UPD:
I am not a professional programmer! after 6 hours of surfing and communication with ai.
You should create custom fetch function and pass it with context.

function customFetch(
  input: RequestInfo | URL | NodeJS.fetch.RequestInfo,
  init?: RequestInit
): Promise<Response> {
  const url = typeof input === "string" ? input : input.toString();
  const opts = init || {};

  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();

    xhr.open(opts.method || "GET", url);

    if (opts.headers) {
      for (const [key, value] of Object.entries(opts.headers)) {
        xhr.setRequestHeader(key, value);
      }
    }

    xhr.onload = (e: any) => {
      if (xhr.status >= 200 && xhr.status < 300) {
        const headers: Headers = new Headers();
        const headerString = xhr.getAllResponseHeaders();
        const headerPairs = headerString.trim().split(/\s*\n\s*/);
        for (const headerPair of headerPairs) {
          const [key, value] = headerPair.split(/\s*:\s*/);
          headers.set(key, value);
        }

        const response: Response = {
          ok: true,
          status: xhr.status,
          statusText: xhr.statusText,
          headers,
          url: xhr.responseURL,
          text: () => Promise.resolve(e.target.responseText),
          json: () => Promise.resolve(JSON.parse(e.target.responseText)),
          redirected: false, // add this property
          type: "basic", // add this property
          clone: () => response, // add this property
          body: null, // add this property
          bodyUsed: false, // add this property
          arrayBuffer: () => Promise.resolve(new ArrayBuffer(0)), // add this property
          blob: () => Promise.resolve(new Blob([])), // add this property
          formData: () => Promise.resolve(new FormData()), // add this property
        };
        resolve(response);
      } else {
        reject(new Error(`Failed to load ${url}`));
      }
    };

    xhr.onerror = (e: any) => reject(new Error(`Network error: ${e}`));

    if (xhr.upload) {
      xhr.upload.onprogress = (event) =>
        (uploadProgress.value = (event.loaded / event.total) * 100);
    }

    if (opts.body && !(opts.body instanceof ReadableStream)) {
      xhr.send(opts.body);
    } else {
      xhr.send();
    }
  });
}

function uploadFileToServer(files: File[] | null, event: DragEvent | null) {
  if (!files) return;
  const variables = { file: files[0] };
  ULPOAD_FILE_MUTATIONS.executeMutation(variables, {
    fetch: customFetch,
  }).then((result) => {
    if (result.data?.uploadFile?.error) {
      setError({
        type: "alert",
        message: result.data?.uploadFile!.error as string,
        createdAt: Date.now(),
      });
    } else {
      emit("update:file", result.data?.uploadFile!.file as string);
      emit("updateFieldInDB", {
        input: {
          field: props.fieldToUpdate,
          value: result.data?.uploadFile!.file as string,
        },
      });
    }
  });
}

I have simplified version of customFetch but typescript doesn't like it

function customFetch(
  url: string,
  opts: {
    method?: string;
    headers?: { [key: string]: string };
    body?: any;
  }
) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();

    xhr.open(opts.method || "GET", url);

    if (opts.headers) {
      for (let k in opts.headers) xhr.setRequestHeader(k, opts.headers[k]);
    }

    xhr.onload = (e: any) => {
      if (xhr.status >= 200 && xhr.status < 300) {
        resolve({
          ok: true,
          text: () => Promise.resolve(e.target.responseText),
          json: () => Promise.resolve(JSON.parse(e.target.responseText)),
        });
      } else {
        reject(new Error(`Failed to load ${url}`));
      }
    };

    xhr.onerror = (e: any) => reject(new Error(`Network error: ${e}`));

    if (xhr.upload) {
      xhr.upload.onprogress = (event) =>
        console.log(`${(event.loaded / event.total) * 100}% uploaded`);
    }

    xhr.send(opts.body);
  });
}