irokaru / pixel-scaler

Home Page:https://irokaru.github.io/pixel-scaler/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

選択したファイルに変更を加えた上で変換しようとするとエラーが発生する

irokaru opened this issue · comments

  1. select picture
  2. change selected picture
  3. click convert button
  4. bug!!!!

fix in Firefox.

Seems like the issue on chrome is due to err:ERR_UPLOAD_FILE_CHANGED, which seems to strictly prevent uploads from file that has been changed. The error was thrown from the lines using createObjectUrl in getFileSize, so the latest change wouldn't fix it either way.
image

Since it's a browser restriction with Chrome (not sure about Safari/webkit), do you think it would be okay to just add a custom error message (i.e. could not convert due to file change)?

One possible solution I've found is to use the File System Access API which only works with Chromium and webkit. Maybe I'll try to see if there's a possible solution using this API.

Alright, so I tried to implement the File System Access API by making a new component to handle file input. The main issue with the API is that several major browsers do not support it (like Firefox), so the component has a fallback to a regular input element for those browsers.

Here's an example deployment: https://poohcom1.github.io/pixel-scaler/
Commit: https://github.com/poohcom1/pixel-scaler/commit/6de5ce3033ea21cf5cbd391d45779d681ee1b35a

I've tested it out on Firefox, Chrome, and Edge, and it seems to work fine. Haven't tried webkit since I have don't have an Apple device.

One bug that came from this is dropping multiple files. For browsers using the File System Access API, when dropping multiple files, only the first file is included for some reason. As a result, if a user drops multiple files, only the first file will be registered. I'll try to find a fix for this. Let me know if you have any comments on the implementation.