Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Bug] 7月20日升级最新版本后，没法上传图片了啊 #5074

Open
davy3331 opened this issue Jul 21, 2024 · 26 comments
Open

[Bug] 7月20日升级最新版本后，没法上传图片了啊 #5074

davy3331 opened this issue Jul 21, 2024 · 26 comments
Assignees
@Dogtiti
Labels
bug Something isn't working

Comments

@davy3331
Copy link

📦 部署方式

Vercel

📌 软件版本

2.13.1

💻 系统环境

iOS

📌 系统版本

16

🌐 浏览器

Safari

📌 浏览器版本

无关

🐛 问题描述

7月20日升级最新版本后，没法上传图片了，试过安卓手机，和chrome，edge等浏览器，都不行。也重新部署过，也不行

📷 复现步骤

No response

🚦 期望结果

至少给个vercel回退版本的方法

📝 补充信息

No response
@davy3331 davy3331 added the bug Something isn't working label Jul 21, 2024
@Issues-translate-bot
Copy link

Bot detected the issue body's language is not English, translate it automatically.

Title: [Bug] After upgrading to the latest version on July 20, I can no longer upload pictures.

📦 Deployment method

Vercel

📌 Software version

2.13.1

💻 System environment

iOS

📌 System version

16

🌐 Browser

Safari

📌 Browser version

irrelevant

🐛 Problem description

After upgrading to the latest version on July 20, I can no longer upload pictures. I have tried Android phones, Chrome, Edge and other browsers, but nothing works. I also redeployed it, but it didn’t work either.

📷 Steps to reproduce

No response

🚦 Expected results

At least give me a way to roll back the version of vercel

📝 Supplementary information

No response

@lloydzhou
Copy link
Contributor

请问一下，不是的域名有没有使用https？
新的版本将图片从localStorage移到了CacheStorage，这个依赖service worker，如果是http协议就注册不了service worker

@Issues-translate-bot
Copy link

Bot detected the issue body's language is not English, translate it automatically.

I would like to ask, does the domain name that it is not using https?
The new version moves the image from localStorage to CacheStorage, which relies on service worker. If it is http protocol, service worker cannot be registered.

@lloydzhou
Copy link
Contributor

例如在官方的预览版本 https://app.nextchat.dev/#/chat 没有发现问题，这边是能正常上传图片到CacheStorage的

image

@Issues-translate-bot
Copy link

Bot detected the issue body's language is not English, translate it automatically.

For example, no problem was found in the official preview version https://app.nextchat.dev/#/chat. Images can be uploaded to CacheStorage normally.

image

@davy3331
Copy link
Author

davy3331 commented Jul 21, 2024 via email

@davy3331
Copy link
Author

davy3331 commented Jul 21, 2024 via email

@davy3331
Copy link
Author

davy3331 commented Jul 21, 2024 via email

@lloydzhou
Copy link
Contributor

  1. 请问你的手机浏览器是在这个支持列表里面吗？
    https://caniuse.com/?search=serviceworker
    image

  2. 你从邮箱回复说电脑可以，手机不行。但是我看了看前面issue里面的描述，说chrome, edge都不行（一方面是这个在app.nextchat.dev未复现，另一方面似乎和你后面提到的电脑端可以的描述不一样？）

@Issues-translate-bot
Copy link

Bot detected the issue body's language is not English, translate it automatically.

  1. Is your mobile browser on this support list?
    https://caniuse.com/?search=serviceworker
    image

  2. You replied from the email that the computer is OK but the mobile phone is not. But I looked at the description in the previous issue, and it said that Chrome and Edge are not working (on the one hand, this is not reproduced in app.nextchat.dev, and on the other hand, it seems to be different from the description you mentioned later that it is possible on the computer side? )

@davy3331
Copy link
Author

davy3331 commented Jul 22, 2024 via email

@davy3331
Copy link
Author

davy3331 commented Jul 22, 2024 via email

@lloydzhou
Copy link
Contributor

这个版本针对文件存储做了一个比较大的改动：

之前存储localStorage只有10M的空间，随便放几张图就满了。
现在改成通过service worker放到CacheStorage里面，这个存储只和磁盘大小有关，远远大于localStorage的存储上限。

我们会继续在iOS设备上复现一下，看看怎么处理这个问题

@Issues-translate-bot
Copy link

Bot detected the issue body's language is not English, translate it automatically.

This version has made a major change for file storage:

Previously, localStorage only had 10M of space, and it would be full just by placing a few pictures.
Now it is changed to put it into CacheStorage through service worker. This storage is only related to the disk size, which is far larger than the storage limit of localStorage.

We will continue to reproduce it on iOS devices to see how to solve this problem

@Dogtiti
Copy link
Member

Dogtiti commented Jul 22, 2024

更新前是好着呢，有在vercel部署指定版本的方法吗？或者版本回退的方法？

获取 Outlook for iOShttps://aka.ms/o0ukef

发件人: Lloyd Zhou @.>
发送时间: Monday, July 22, 2024 9:42:58 AM
收件人: ChatGPTNextWeb/ChatGPT-Next-Web @.>
抄送: davy3331 @.>; Author @.>
主题: Re: [ChatGPTNextWeb/ChatGPT-Next-Web] [Bug] 7月20日升级最新版本后，没法上传图片了啊 (Issue #5074)

  1. 请问你的手机浏览器是在这个支持列表里面吗？
    https://caniuse.com/?search=serviceworker
    image.png (view on web)https://github.com/user-attachments/assets/fbddcc8f-a1d2-497e-b200-0c7857c2ffdd

  2. 你从邮箱回复说电脑可以，手机不行。但是我看了看前面issue里面的描述，说chrome, edge都不行（一方面是这个在app.nextchat.dev未复现，另一方面似乎和你后面提到的电脑端可以的描述不一样？）

―
Reply to this email directly, view it on GitHub#5074 (comment), or unsubscribehttps://github.com/notifications/unsubscribe-auth/AEG5LET7JJV2W4SAHEN4XODZNRPSFAVCNFSM6AAAAABLG2HULOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDENBRHA4DSNBVGY.
You are receiving this because you authored the thread.Message ID: @.***>

vercel里面找到之前的deployment记录，redeploy一下就可以发布之前的版本

@ju123123
Copy link

同样出现了这个问题，所以目前http的域名无法使用上传图片功能了吗

@Issues-translate-bot
Copy link

Bot detected the issue body's language is not English, translate it automatically.

This problem also occurs, so the image upload function cannot be used for http domain names?

@gaogao1030
Copy link
Contributor

问题已经定位：老设备不兼容导致，但只要是 https 链接 servicework 都会成功注册导致 window._SW_ENABLED 依然判断为 true.请求 cache 的时候 res 返回 404 状态导致后续数据处理异常。

// utils/chat.ts 修改 uploadImage 为以下代码可以兼容老设备.
export async function uploadImage(file: File): Promise<string> {
  if (!window._SW_ENABLED) {
    // if serviceWorker register error, using compressImage
    return compressImage(file, 256 * 1024);
  }
  const body = new FormData();
  body.append("file", file);
  try {
    const res = await fetch(UPLOAD_URL, {
      method: "post",
      body,
      mode: "cors",
      credentials: "include",
    });
    const _res = await res.json();
    console.log("res", _res);
    if (_res?.code == 0 && _res?.data) {
      return _res?.data;
    }
    throw Error(`upload Error: ${_res?.msg}`);
  } catch (e) {
    console.error("ServiceWorker CacheStorage not supported");
    return compressImage(file, 256 * 1024);
  }
}

@lloydzhou
Copy link
Contributor

@gaogao1030
如果serviceworker注册成功，那么这个请求会被public/serviceWorker.js中的fetch事件劫持，文件会被放到CacheStorage这个本地缓存。

async function upload(request, url) {
  const formData = await request.formData()
  const file = formData.getAll('file')[0]
  let ext = file.name.split('.').pop()
  if (ext === 'blob') {
    ext = file.type.split('/').pop()
  }
  const fileUrl = `${url.origin}/api/cache/${nanoid()}.${ext}`
  // console.debug('file', file, fileUrl, request)
  const cache = await caches.open(CHATGPT_NEXT_WEB_FILE_CACHE)
  await cache.put(new Request(fileUrl), new Response(file, {
    headers: {
      'content-type': file.type,
      'content-length': file.size,
      'cache-control': 'no-cache', // file already store in disk
      'server': 'ServiceWorker',
    }
  }))
  return Response.json({ code: 0, data: fileUrl })
}

self.addEventListener("fetch", (e) => {
  const url = new URL(e.request.url);
  if (/^\/api\/cache/.test(url.pathname)) {
    if ('GET' == e.request.method) {
      e.respondWith(caches.match(e.request))
    }
    if ('POST' == e.request.method) {
      e.respondWith(upload(e.request, url))
    }
    if ('DELETE' == e.request.method) {
      e.respondWith(remove(e.request, url))
    }
  }
});

@Issues-translate-bot
Copy link

Bot detected the issue body's language is not English, translate it automatically.

@gaogao1030
If the serviceworker is successfully registered, the request will be hijacked by the fetch event in public/serviceWorker.js, and the file will be placed in the local cache of CacheStorage.

async function upload(request, url) {
  const formData = await request.formData()
  const file = formData.getAll('file')[0]
  let ext = file.name.split('.').pop()
  if (ext === 'blob') {
    ext = file.type.split('/').pop()
  }
  const fileUrl = `${url.origin}/api/cache/${nanoid()}.${ext}`
  // console.debug('file', file, fileUrl, request)
  const cache = await caches.open(CHATGPT_NEXT_WEB_FILE_CACHE)
  await cache.put(new Request(fileUrl), new Response(file, {
    headers: {
      'content-type': file.type,
      'content-length': file.size,
      'cache-control': 'no-cache', // file already stored in disk
      'server': 'ServiceWorker',
    }
  }))
  return Response.json({ code: 0, data: fileUrl })
}

self.addEventListener("fetch", (e) => {
  const url = new URL(e.request.url);
  if (/^\/api\/cache/.test(url.pathname)) {
    if ('GET' == e.request.method) {
      e.respondWith(caches.match(e.request))
    }
    if ('POST' == e.request.method) {
      e.respondWith(upload(e.request, url))
    }
    if ('DELETE' == e.request.method) {
      e.respondWith(remove(e.request, url))
    }
  }
});

@gaogao1030
Copy link
Contributor

gaogao1030 commented Jul 25, 2024 •
edited
Loading

@gaogao1030 如果serviceworker注册成功，那么这个请求会被public/serviceWorker.js中的fetch事件劫持，文件会被放到CacheStorage这个本地缓存。

async function upload(request, url) {
  const formData = await request.formData()
  const file = formData.getAll('file')[0]
  let ext = file.name.split('.').pop()
  if (ext === 'blob') {
    ext = file.type.split('/').pop()
  }
  const fileUrl = `${url.origin}/api/cache/${nanoid()}.${ext}`
  // console.debug('file', file, fileUrl, request)
  const cache = await caches.open(CHATGPT_NEXT_WEB_FILE_CACHE)
  await cache.put(new Request(fileUrl), new Response(file, {
    headers: {
      'content-type': file.type,
      'content-length': file.size,
      'cache-control': 'no-cache', // file already store in disk
      'server': 'ServiceWorker',
    }
  }))
  return Response.json({ code: 0, data: fileUrl })
}

self.addEventListener("fetch", (e) => {
  const url = new URL(e.request.url);
  if (/^\/api\/cache/.test(url.pathname)) {
    if ('GET' == e.request.method) {
      e.respondWith(caches.match(e.request))
    }
    if ('POST' == e.request.method) {
      e.respondWith(upload(e.request, url))
    }
    if ('DELETE' == e.request.method) {
      e.respondWith(remove(e.request, url))
    }
  }
});

对，我这里的回答有点问题，它之所以返回404，是因为我本地走的ip没有注册servicework。
https环境下servicework是能成功注册的，但是走fetch这一步返回的res.json()会报异常。
所以我这里通过捕获异常的方式来走compressImage的方式来解决，它在出现这类异常的老设备上是可以兼容的。

使用的设备: iPhoneX(ios16.7.8)

调试的模式: safari 调试 iphone

异常截图:
截屏2024-07-25 11 30 41

@Issues-translate-bot
Copy link

Bot detected the issue body's language is not English, translate it automatically.

@gaogao1030 If the serviceworker registration is successful, then the request will be hijacked by the fetch event in public/serviceWorker.js, and the file will be placed in the local cache of CacheStorage.

async function upload(request, url) {
const formData = await request.formData()
const file = formData.getAll('file')[0]
let ext = file.name.split('.').pop()
if (ext === 'blob') {
ext = file.type.split('/').pop()
}
const fileUrl = `${url.origin}/api/cache/${nanoid()}.${ext}`
// console.debug('file', file, fileUrl, request)
const cache = await caches.open(CHATGPT_NEXT_WEB_FILE_CACHE)
await cache.put(new Request(fileUrl), new Response(file, {
headers: {
'content-type': file.type,
'content-length': file.size,
'cache-control': 'no-cache', // file already stored in disk
'server': 'ServiceWorker',
}
}))
return Response.json({ code: 0, data: fileUrl })
}

self.addEventListener("fetch", (e) => {
const url = new URL(e.request.url);
if (/^\/api\/cache/.test(url.pathname)) {
if ('GET' == e.request.method) {
e.respondWith(caches.match(e.request))
}
if ('POST' == e.request.method) {
e.respondWith(upload(e.request, url))
}
if ('DELETE' == e.request.method) {
e.respondWith(remove(e.request, url))
}
}
});

Yes, there is something wrong with my answer here. The reason why it returns 404 is because the IP I am using locally does not have servicework registered.
Servicework can be successfully registered in the https environment, but the res.json() returned by the fetch step will report an exception.
So here I use compressImage to solve the problem by catching exceptions. It is compatible with old devices where such exceptions occur.

Device used: iPhoneX(ios16.7.8)

Debug mode: safari debug iphone

Abnormal screenshot:
Screenshot 2024-07-25 11 30 41

@lloydzhou
Copy link
Contributor

i see the error message is:

"Response.json" is undefined

maybe same as https://stackoverflow.com/questions/43793159/parsing-json-in-service-worker-getting-undefined

@gaogao1030
i have create pull request, please help me to test it on you device: test link

@lloydzhou lloydzhou mentioned this issue Jul 25, 2024
Merged
10 tasks
@gaogao1030
Copy link
Contributor

i see the error message is:

"Response.json" is undefined

maybe same as https://stackoverflow.com/questions/43793159/parsing-json-in-service-worker-getting-undefined

@gaogao1030 i have create pull request, please help me to test it on you device: test link

The same mistake, maybe you can try the code I have already verified above.
异常截图：
截屏2024-07-25 22 06 25

@lloydzhou
Copy link
Contributor

@gaogao1030

in #5103 just using new Response() instead of Response.json()

maybe this pull request have been closed, so get wrong code...
now the newest code deploy on preview environment
i see the code in this environment is OK. https://nextchat-ig29sf2on-nextchat.vercel.app/serviceWorker.js

image

@gaogao1030
Copy link
Contributor

gaogao1030 commented Jul 25, 2024 •
edited
Loading

@gaogao1030

in #5103 just using new Response() instead of Response.json()

maybe this pull request have been closed, so get wrong code...
now the newest code deploy on preview environment
i see the code in this environment is OK. https://nextchat-ig29sf2on-nextchat.vercel.app/serviceWorker.js

image

The anomaly in this screenshot comes from TestLink.

截屏2024-07-25 22 06 25

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@Dogtiti Dogtiti

Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@lloydzhou @gaogao1030 @davy3331 @Dogtiti @ju123123 @Issues-translate-bot