Add maximum upload size

Add maximum upload size

Author: jkmassel

Modules/Sources/Support/InternalDataProvider.swift

@@ -341,6 +341,8 @@ actor InternalUserDataProvider: CurrentUserDataProvider {
 }
 
 actor InternalSupportConversationDataProvider: SupportConversationDataProvider {
+    let maximumUploadSize: UInt64 = 5_000_000 // 5MB
+
     private var conversations: [UInt64: Conversation] = [:]
 
     nonisolated func loadSupportConversations() throws -> any CachedAndFetchedResult<[ConversationSummary]> {

Modules/Sources/Support/SupportDataProvider.swift

@@ -147,6 +147,10 @@ public final class SupportDataProvider: ObservableObject, Sendable {
         }
     }
 
+    var maximumUploadSize: CGFloat {
+        CGFloat(self.supportConversationDataProvider.maximumUploadSize)
+    }
+
     // Application Logs
     public func fetchApplicationLogs() async throws -> [ApplicationLog] {
         try await self.applicationLogProvider.fetchApplicationLogs()
@@ -264,6 +268,8 @@ public protocol BotConversationDataProvider: Actor {
 }
 
 public protocol SupportConversationDataProvider: Actor {
+    nonisolated var maximumUploadSize: UInt64 { get }
+
     nonisolated func loadSupportConversations() throws -> any CachedAndFetchedResult<[ConversationSummary]>
     nonisolated func loadSupportConversation(id: UInt64) throws -> any CachedAndFetchedResult<Conversation>
 

Modules/Sources/Support/UI/Support Conversations/ScreenshotPicker.swift

@@ -3,7 +3,23 @@ import PhotosUI
 
 struct ScreenshotPicker: View {
 
-    private let maxScreenshots = 5
+    enum ViewState: Sendable {
+        case ready
+        case loading
+        case error(Error)
+
+        var isLoadingMoreImages: Bool {
+            guard case .loading = self else { return false }
+            return true
+        }
+
+        var error: Error? {
+            guard case .error(let error) = self else { return nil }
+            return error
+        }
+    }
+
+    private let maxScreenshots = 10
 
     @State
     private var selectedPhotos: [PhotosPickerItem] = []
@@ -12,78 +28,67 @@ struct ScreenshotPicker: View {
     private var attachedImages: [UIImage] = []
 
     @State
-    private var error: Error?
+    private var state: ViewState = .ready
 
     @Binding
     var attachedImageUrls: [URL]
 
+    @State
+    private var currentUploadSize: CGFloat = 0
+
+    let maximumUploadSize: CGFloat?
+
+    @Binding
+    var uploadLimitExceeded: Bool
+
     var body: some View {
         Section {
-            VStack(alignment: .leading, spacing: 12) {
-                Text(Localization.screenshotsDescription)
-                    .font(.caption)
-                    .foregroundColor(.secondary)
-
-                // Screenshots display
-                if !attachedImages.isEmpty {
-                    ScrollView(.horizontal, showsIndicators: false) {
-                        LazyHStack(spacing: 12) {
-                            ForEach(Array(attachedImages.enumerated()), id: \.offset) { index, image in
-                                ZStack(alignment: .topTrailing) {
-                                    Image(uiImage: image)
-                                        .resizable()
-                                        .aspectRatio(contentMode: .fill)
-                                        .frame(width: 80, height: 80)
-                                        .clipped()
-                                        .cornerRadius(8)
-
-                                    // Remove button
-                                    Button {
-                                        // attachedImages will be updated by changing `selectedPhotos`, but not immediately. This line is here to make the UI feel snappy
-                                        attachedImages.remove(at: index)
-                                        selectedPhotos.remove(at: index)
-                                    } label: {
-                                        Image(systemName: "xmark.circle.fill")
-                                            .foregroundColor(.red)
-                                            .background(Color.white, in: Circle())
-                                    }
-                                    .padding(4)
-                                }
-                            }
-                        }
-                        .padding(.horizontal, 2)
-                    }
-                }
+            Text(Localization.screenshotsDescription)
+                .font(.body)
+                .foregroundColor(.secondary)
 
-                if let error {
+                if let error = self.state.error {
                     ErrorView(
                         title: "Unable to load screenshot",
                         message: error.localizedDescription
-                    ).frame(maxWidth: .infinity)
+                    )
+                }
+
+                if !attachedImages.isEmpty {
+                    imageGallery
+                    maxSizeIndicator
                 }
 
                 // Add screenshots button
                 PhotosPicker(
                     selection: $selectedPhotos,
                     maxSelectionCount: maxScreenshots,
                     matching: .images
-                ) { [imageCount = attachedImages.count] in
+                ) { [imageCount = attachedImages.count, isLoading = self.state.isLoadingMoreImages, uploadLimitExceeded = self.uploadLimitExceeded] in
                     HStack {
-                        Image(systemName: "camera.fill")
+                        if isLoading {
+                            ProgressView()
+                                .tint(Color.accentColor)
+                        } else {
+                            Image(systemName: "camera.fill")
+                        }
+
                         Text(imageCount == 0 ? Localization.addScreenshots : Localization.addMoreScreenshots)
                     }
                     .frame(maxWidth: .infinity)
                     .padding()
                     .background(Color.accentColor.opacity(0.1))
-                    .foregroundColor(Color.accentColor)
+                    .foregroundStyle(uploadLimitExceeded ? Color.gray : Color.accentColor)
                     .cornerRadius(8)
                 }
                 .onChange(of: selectedPhotos) { _, newItems in
                     Task {
+                        self.state = .loading
                         await loadSelectedPhotos(newItems)
+                        self.state = .ready
                     }
                 }
-            }
+                .disabled(uploadLimitExceeded)
         } header: {
             HStack {
                 Text(Localization.screenshots)
@@ -92,32 +97,92 @@ struct ScreenshotPicker: View {
                     .foregroundColor(.secondary)
             }
         }
+        .listRowSeparator(.hidden)
+        .selectionDisabled()
+    }
+
+    @ViewBuilder
+    var imageGallery: some View {
+        // Screenshots display
+        ScrollView(.horizontal, showsIndicators: false) {
+            LazyHStack(spacing: 12) {
+                ForEach(Array(attachedImages.enumerated()), id: \.offset) { index, image in
+                    ZStack(alignment: .topTrailing) {
+                        Image(uiImage: image)
+                            .resizable()
+                            .aspectRatio(contentMode: .fill)
+                            .frame(width: 80, height: 80)
+                            .clipped()
+                            .cornerRadius(8)
+
+                        // Remove button
+                        Button {
+                            // attachedImages will be updated by changing `selectedPhotos`, but not immediately. This line is here to make the UI feel snappy
+                            attachedImages.remove(at: index)
+                            selectedPhotos.remove(at: index)
+                        } label: {
+                            Image(systemName: "xmark.circle.fill")
+                                .foregroundColor(.red)
+                                .background(Color.white, in: Circle())
+                        }
+                        .padding(4)
+                    }
+                }
+            }
+            .padding(.horizontal, 2)
+        }
+    }
+
+    @ViewBuilder
+    var maxSizeIndicator: some View {
+        if let maximumUploadSize {
+            VStack(alignment: .leading) {
+                ProgressView(value: currentUploadSize, total: maximumUploadSize)
+                    .tint(uploadLimitExceeded ? Color.red : Color.accentColor)
+
+                Text("Attachment Limit: \(format(bytes: currentUploadSize)) / \(format(bytes: maximumUploadSize))")
+                    .font(.caption2)
+                    .foregroundStyle(Color.secondary)
+            }
+        }
+    }
+
+    private func format(bytes: CGFloat) -> String {
+        ByteCountFormatter().string(fromByteCount: Int64(bytes))
     }
 
     /// Loads selected photos from PhotosPicker
     @MainActor
     func loadSelectedPhotos(_ items: [PhotosPickerItem]) async {
         var newImages: [UIImage] = []
         var newUrls: [URL] = []
+        var totalSize: CGFloat = 0
 
         do {
             for item in items {
                 if let data = try await item.loadTransferable(type: Data.self) {
                     if let image = UIImage(data: data) {
                         newImages.append(image)
                     }
+
+                    totalSize += CGFloat(data.count)
                 }
 
                 if let file = try await item.loadTransferable(type: ScreenshotFile.self) {
                     newUrls.append(file.url)
                 }
             }
 
-            attachedImages = newImages
-            attachedImageUrls = newUrls
+            self.attachedImages = newImages
+            self.attachedImageUrls = newUrls
+
+            withAnimation {
+                self.currentUploadSize = totalSize
+                self.uploadLimitExceeded = totalSize > maximumUploadSize ?? .infinity
+            }
         } catch {
             withAnimation {
-                self.error = error
+                self.state = .error(error)
             }
         }
     }
@@ -159,7 +224,11 @@ struct ScreenshotFile: Transferable {
 
         var body: some View {
             Form {
-                ScreenshotPicker(attachedImageUrls: $selectedPhotoUrls)
+                ScreenshotPicker(
+                    attachedImageUrls: $selectedPhotoUrls,
+                    maximumUploadSize: 10_000_000,
+                    uploadLimitExceeded: .constant(false)
+                )
             }
             .environmentObject(SupportDataProvider.testing)
         }

Modules/Sources/Support/UI/Support Conversations/SupportConversationReplyView.swift

@@ -97,7 +97,9 @@ public struct SupportConversationReplyView: View {
                 }
 
                 ScreenshotPicker(
-                    attachedImageUrls: self.$selectedPhotos
+                    attachedImageUrls: self.$selectedPhotos,
+                    maximumUploadSize: self.dataProvider.maximumUploadSize,
+                    uploadLimitExceeded: self.$uploadLimitExceeded
                 )
 
                 ApplicationLogPicker(

Modules/Sources/Support/UI/Support Conversations/SupportForm.swift

@@ -46,12 +46,14 @@ public struct SupportForm: View {
     @State private var applicationLogs: [ApplicationLog]
 
     @State private var selectedPhotos: [URL] = []
+    @State private var uploadLimitExceeded = false
 
     /// UI State
     @State private var showLoadingIndicator = false
     @State private var shouldShowErrorAlert = false
     @State private var shouldShowSuccessAlert = false
     @State private var errorMessage = ""
+    @State private var isDisplayingCancellationConfirmation: Bool = false
 
     /// Callback for when form is dismissed
     public var onDismiss: (() -> Void)?
@@ -101,7 +103,9 @@ public struct SupportForm: View {
 
             // Screenshots Section
             ScreenshotPicker(
-                attachedImageUrls: $selectedPhotos
+                attachedImageUrls: $selectedPhotos,
+                maximumUploadSize: self.dataProvider.maximumUploadSize,
+                uploadLimitExceeded: self.$uploadLimitExceeded
             )
 
             // Application Logs Section

WordPress/Classes/ViewRelated/NewSupport/SupportDataProvider.swift

@@ -257,6 +257,8 @@ actor WpCurrentUserDataProvider: CurrentUserDataProvider {
 
 actor WpSupportConversationDataProvider: SupportConversationDataProvider {
 
+    let maximumUploadSize: UInt64 = 30_000_000 // 30MB
+
     private let wpcomClient: WordPressDotComClient
 
     init(wpcomClient: WordPressDotComClient) {