feat: show alert if file exceeds classic reader limit (#948)

app/assets/javascripts/components/AttachedFilesPopover/PopoverFileItem.tsx

@@ -3,7 +3,7 @@ import { formatSizeToReadableString } from '@standardnotes/filepicker';
 import { IconType, SNFile } from '@standardnotes/snjs';
 import { FunctionComponent } from 'preact';
 import { useEffect, useRef, useState } from 'preact/hooks';
-import { ICONS } from '../Icon';
+import { Icon, ICONS } from '../Icon';
 import {
   PopoverFileItemAction,
   PopoverFileItemActionType,
@@ -85,7 +85,15 @@ export const PopoverFileItem: FunctionComponent<PopoverFileItemProps> = ({
               onBlur={handleFileNameInputBlur}
             />
           ) : (
-            <div className="text-sm mb-1 break-word">{file.name}</div>
+            <div className="text-sm mb-1 break-word">
+              <span className="vertical-middle">{file.name}</span>
+              {file.protected && (
+                <Icon
+                  type="lock-filled"
+                  className="sn-icon--small ml-2 color-neutral vertical-middle"
+                />
+              )}
+            </div>
           )}
           <div className="text-xs color-grey-0">
             {file.created_at.toLocaleString()} ·{' '}

app/assets/javascripts/ui_models/app_state/files_state.ts

@@ -1,3 +1,4 @@
+import { BYTES_IN_ONE_MEGABYTE } from '@/constants';
 import { concatenateUint8Arrays } from '@/utils/concatenateUint8Arrays';
 import {
   ClassicFileReader,
@@ -77,9 +78,12 @@ export class FilesState {
     try {
       const minimumChunkSize = this.application.files.minimumChunkSize();
 
-      const picker = StreamingFileReader.available()
+      const shouldUseStreamingReader = StreamingFileReader.available();
+
+      const picker = shouldUseStreamingReader
         ? StreamingFileReader
         : ClassicFileReader;
+      const maxFileSize = picker.maximumFileSize();
 
       const selectedFiles =
         fileOrHandle instanceof File
@@ -92,6 +96,20 @@ export class FilesState {
       const uploadedFiles: SNFile[] = [];
 
       for (const file of selectedFiles) {
+        if (
+          !shouldUseStreamingReader &&
+          maxFileSize &&
+          file.size >= maxFileSize
+        ) {
+          this.application.alertService.alert(
+            `This file exceeds the limits supported in this browser. To upload files greater than ${
+              maxFileSize / BYTES_IN_ONE_MEGABYTE
+            }MB, please use the desktop application or the Chrome browser.`,
+            `Cannot upload file "${file.name}"`
+          );
+          continue;
+        }
+
         toastId = addToast({
           type: ToastType.Loading,
           message: `Uploading file "${file.name}"...`,

app/assets/stylesheets/_sn.scss

@@ -1037,3 +1037,7 @@
 .z-index-1001 {
   z-index: 1001;
 }
+
+.vertical-middle {
+  vertical-align: middle;
+}