Problem

If a file is dragged into InstantTranslate or selected by file upload and the file is not readable, e. g. because it is opened in another application, the user sees only "Error".

Solution

This should be catched and shown to the user that this error happens, because the file is not readable.

According to GPT-o1 this can be done like this:

Yes, in JavaScript, you can detect when a file cannot be read and inform the user, even if the underlying reason is that the file is opened in another application. When you attempt to read a file using the *FileReader* API, and the file is not accessible (e.g., because it's locked by another application), a `NotReadableError` will be thrown. You can catch this error and provide a user-friendly message.

Here's how you can do it:

1. *Set up a FileReader instance and attempt to read the file.*

   ```javascript
   var reader = new FileReader();
   reader.readAsArrayBuffer(file);
   ```

2. *Attach an `onerror` event handler to the FileReader.*

   ```javascript
   reader.onerror = function(e) {
     var error = e.target.error;
     if (error.name === 'NotReadableError')

{        alert('The file cannot be read. It may be opened in another application.');      }

else

{        alert('An error occurred while reading the file: ' + error.name);      }

   };
   ```

3. *Provide feedback to the user.*

   When the `NotReadableError` is caught, inform the user that the file cannot be read and suggest possible reasons, such as the file being open in another application.

*Example Code:*

```javascript
// Assuming 'file' is obtained from a drag-and-drop event or input element
var reader = new FileReader();

reader.onload = function(e)

{   // File read successfully   console.log('File read successfully'); }

;

reader.onerror = function(e) {
  var error = e.target.error;
  if (error.name === 'NotReadableError')

{     alert('The file cannot be read. It may be opened in another application.');   }

else

{     alert('An error occurred while reading the file: ' + error.name);   }

};

reader.readAsArrayBuffer(file);
```

*Note:*

• The browser's security model doesn't allow JavaScript to determine the exact reason why the file isn't readable, such as whether it's specifically locked by another application.
• The `NotReadableError` indicates that the file is not accessible, which can happen for various reasons, including file locks, permission issues, or the file being used by another process.
• It's good practice to provide a general error message and suggest common reasons why the file might not be readable.

By handling the error this way, you enhance the user experience by providing clear feedback when an issue occurs during file upload.