Add a dedicated screen for uploading media

WordPress/Classes/Services/MediaUploadService.swift

@@ -3,8 +3,20 @@ import WordPressData
 import WordPressCore
 import WordPressAPI
 import WordPressAPIInternal
+import UniformTypeIdentifiers
+
+protocol MediaUploadServiceEventObserver: Sendable {
+    func handle(event: MediaUploadService.Event, asset: ExportableAsset, service: MediaUploadService)
+}
 
 actor MediaUploadService {
+    enum Event: Sendable {
+        case overallProgress(Progress)
+        case thumbnail(URL)
+    }
+
+    nonisolated static let progressUserInfoKeyThumbnail = ProgressUserInfoKey(rawValue: "MediaUploadService.thumbnail")
+
     private let coreDataStack: CoreDataStackSwift
     private let blog: TaggedManagedObjectID<Blog>
     private let client: WordPressClient
@@ -21,21 +33,38 @@ actor MediaUploadService {
     ///   - asset: The asset to upload.
     ///   - progress: A progress object to track the upload progress.
     /// - Returns: The saved Media instance.
-    func uploadToMediaLibrary(asset: ExportableAsset, fulfilling progress: Progress? = nil) async throws -> TaggedManagedObjectID<Media> {
-        precondition(progress == nil || progress!.totalUnitCount > 0)
-
-        let overallProgress = progress ?? Progress.discreteProgress(totalUnitCount: 100)
+    func uploadToMediaLibrary(asset: ExportableAsset, observer: MediaUploadServiceEventObserver) async throws -> TaggedManagedObjectID<Media> {
+        let overallProgress = Progress.discreteProgress(totalUnitCount: 100)
         overallProgress.completedUnitCount = 0
 
-        let export = try await exportAsset(asset, parentProgress: overallProgress)
+        await MainActor.run {
+            observer.handle(event: .overallProgress(overallProgress), asset: asset, service: self)
+        }
+
+        let export = try await exportAsset(asset, parentProgress: overallProgress, withPendingUnitCount: 10)
+
+        try Task.checkCancellation()
+
+        if let thumbnail = await thumbnail(of: export) {
+            await MainActor.run {
+                observer.handle(event: .thumbnail(thumbnail), asset: asset, service: self)
+            }
+        }
 
         let uploadingProgress = Progress.discreteProgress(totalUnitCount: 100)
-        overallProgress.addChild(uploadingProgress, withPendingUnitCount: Int64((1.0 - overallProgress.fractionCompleted) * Double(overallProgress.totalUnitCount)))
-        let uploaded = try await client.api.uploadMedia(
-            params: MediaCreateParams(from: export),
-            fromLocalFileURL: export.url,
-            fulfilling: uploadingProgress
-        ).data
+        overallProgress.addChild(uploadingProgress, withPendingUnitCount: 90)
+
+        let uploaded = try await withTaskCancellationHandler {
+            try await client.api.uploadMedia(
+                params: MediaCreateParams(from: export),
+                fromLocalFileURL: export.url,
+                fulfilling: uploadingProgress
+            ).data
+        } onCancel: {
+            uploadingProgress.cancel()
+        }
+
+        try Task.checkCancellation()
 
         let media = try await coreDataStack.performAndSave { [blogID = blog] context in
             let blog = try context.existingObject(with: blogID)
@@ -57,7 +86,7 @@ actor MediaUploadService {
 
 private extension MediaUploadService {
 
-    func exportAsset(_ exportable: ExportableAsset, parentProgress: Progress) async throws -> MediaExport {
+    func exportAsset(_ exportable: ExportableAsset, parentProgress: Progress, withPendingUnitCount unitCount: Int64) async throws -> MediaExport {
         let options = try await coreDataStack.performQuery { [blogID = blog] context in
             let blog = try context.existingObject(with: blogID)
             let allowableFileExtensions = blog.allowedFileTypes as? Set<String> ?? []
@@ -79,7 +108,7 @@ private extension MediaUploadService {
                 }
             )
             // The "export" part covers the initial 10% of the overall progress.
-            parentProgress.addChild(progress, withPendingUnitCount: progress.totalUnitCount / 10)
+            parentProgress.addChild(progress, withPendingUnitCount: unitCount)
         }
     }
 
@@ -113,7 +142,7 @@ private extension MediaUploadService {
 
     func configureMedia(_ media: Media, withExport export: MediaExport) {
         media.absoluteLocalURL = export.url
-        media.filename = export.url.lastPathComponent
+        media.filename = export.filename ?? export.url.lastPathComponent
         media.mediaType = (export.url as NSURL).assetMediaType
 
         if let fileSize = export.fileSize {
@@ -187,6 +216,25 @@ private extension MediaUploadService {
         return nil
     }
 
+    func thumbnail(of exported: MediaExport) async -> URL? {
+        let exporter = MediaThumbnailExporter()
+        exporter.mediaDirectoryType = .cache
+        exporter.options.preferredSize = await MediaImageService.getThumbnailSize(for: exported.size ?? CGSizeMake(100, 100), size: .small)
+        exporter.options.scale = 1 // In pixels
+
+        if exported.url.isGif {
+            exporter.options.thumbnailImageType = UTType.gif.identifier
+        }
+
+        guard exporter.supportsThumbnailExport(forFile: exported.url),
+              let (_, thumbnail) = try? await exporter.exportThumbnail(forFileURL: exported.url)
+        else {
+            return nil
+        }
+
+        return thumbnail.url
+    }
+
     func updateMedia(_ media: Media, with remote: MediaWithEditContext) {
         media.mediaID = NSNumber(value: remote.id)
         media.remoteURL = remote.sourceUrl
@@ -245,7 +293,7 @@ private extension MediaCreateParams {
             dateGmt: nil,
             slug: nil,
             status: nil,
-            title: export.url.lastPathComponent, // TODO: Add a `filename` property to `MediaExport`.
+            title: export.filename ?? export.url.lastPathComponent,
             author: nil,
             commentStatus: nil,
             pingStatus: nil,

WordPress/Classes/Utility/BuildInformation/FeatureFlag.swift

@@ -26,6 +26,7 @@ public enum FeatureFlag: Int, CaseIterable {
     case pluginManagementOverhaul
     case nativeJetpackConnection
     case newsletterSubscribers
+    case newUploadMedia
 
     /// Returns a boolean indicating if the feature is enabled.
     ///
@@ -82,6 +83,8 @@ public enum FeatureFlag: Int, CaseIterable {
             return BuildConfiguration.current == .debug
         case .newsletterSubscribers:
             return true
+        case .newUploadMedia:
+            return false
         }
     }
 
@@ -125,6 +128,7 @@ extension FeatureFlag {
         case .readerGutenbergCommentComposer: "Gutenberg Comment Composer"
         case .nativeJetpackConnection: "Native Jetpack Connection"
         case .newsletterSubscribers: "Newsletter Subscribers"
+        case .newUploadMedia: "New Upload Media UI"
         }
     }
 }

WordPress/Classes/Utility/Media/ItemProviderMediaExporter.swift

@@ -62,7 +62,7 @@ final class ItemProviderMediaExporter: MediaExporter {
             try FileManager.default.copyItem(at: original, to: url)
 
             let pixelSize = url.pixelSize
-            let media = MediaExport(url: url, fileSize: url.fileSize, width: pixelSize.width, height: pixelSize.height, duration: nil)
+            let media = MediaExport(url: url, filename: provider.suggestedName, fileSize: url.fileSize, width: pixelSize.width, height: pixelSize.height, duration: nil)
             let exportProgress = Progress(totalUnitCount: 1)
             exportProgress.completedUnitCount = 1
             progress.addChild(exportProgress, withPendingUnitCount: MediaExportProgressUnits.halfDone)

WordPress/Classes/Utility/Media/MediaExporter.swift

@@ -11,8 +11,9 @@ enum MediaExportProgressUnits {
 ///
 class MediaExport {
     /// The resulting file URL of an export.
-    ///
     let url: URL
+    /// The name of the original file.
+    let filename: String?
     /// The resulting file size in bytes of the export.
     let fileSize: Int64?
     /// The pixel width of the media exported.
@@ -24,14 +25,22 @@ class MediaExport {
     /// A caption to be added to the media item.
     let caption: String?
 
-    init(url: URL, fileSize: Int64?, width: CGFloat?, height: CGFloat?, duration: TimeInterval?, caption: String? = nil) {
+    init(url: URL, filename: String?, fileSize: Int64?, width: CGFloat?, height: CGFloat?, duration: TimeInterval?, caption: String? = nil) {
         self.url = url
+        self.filename = filename
         self.fileSize = fileSize
         self.height = height
         self.width = width
         self.duration = duration
         self.caption = caption
     }
+
+    var size: CGSize? {
+        if let width, let height {
+            return CGSizeMake(width, height)
+        }
+        return nil
+    }
 }
 
 /// Completion block with an AssetExport.

WordPress/Classes/Utility/Media/MediaExternalExporter.swift

@@ -68,6 +68,7 @@ class MediaExternalExporter: MediaExporter {
                                                                   fileExtension: "gif")
             try data.write(to: mediaURL)
             onCompletion(MediaExport(url: mediaURL,
+                                     filename: asset.name,
                                      fileSize: mediaURL.fileSize,
                                      width: mediaURL.pixelSize.width,
                                      height: mediaURL.pixelSize.height,

WordPress/Classes/Utility/Media/MediaImageExporter.swift

@@ -228,6 +228,7 @@ class MediaImageExporter: MediaExporter {
             writer.nullifyGPSData = options.stripsGeoLocationIfNeeded
             let result = try writer.writeImageSource(source)
             onCompletion(MediaExport(url: url,
+                                     filename: filename,
                                           fileSize: url.fileSize,
                                           width: result.width,
                                           height: result.height,

WordPress/Classes/Utility/Media/MediaThumbnailExporter.swift

@@ -248,6 +248,7 @@ class MediaThumbnailExporter: MediaExporter {
             try fileManager.moveItem(at: export.url, to: thumbnail)
             // Configure with the new URL
             let thumbnailExport = MediaExport(url: thumbnail,
+                                              filename: nil,
                                                    fileSize: export.fileSize,
                                                    width: export.width,
                                                    height: export.height,

WordPress/Classes/Utility/Media/MediaURLExporter.swift

@@ -149,6 +149,7 @@ class MediaURLExporter: MediaExporter {
                                                                     fileExtension: "gif")
             try fileManager.copyItem(at: url, to: mediaURL)
             onCompletion(MediaExport(url: mediaURL,
+                                     filename: nil,
                                     fileSize: mediaURL.fileSize,
                                     width: mediaURL.pixelSize.width,
                                     height: mediaURL.pixelSize.height,
@@ -172,6 +173,7 @@ class MediaURLExporter: MediaExporter {
                                                                   fileExtension: fileExtension)
             try fileManager.copyItem(at: url, to: mediaURL)
             onCompletion(MediaExport(url: mediaURL,
+                                     filename: nil,
                                      fileSize: mediaURL.fileSize,
                                      width: nil,
                                      height: nil,

WordPress/Classes/Utility/Media/MediaVideoExporter.swift

@@ -176,6 +176,7 @@ class MediaVideoExporter: MediaExporter {
             }
             progress.completedUnitCount = MediaExportProgressUnits.done
             onCompletion(MediaExport(url: mediaURL,
+                                     filename: filename,
                                           fileSize: mediaURL.fileSize,
                                           width: mediaURL.pixelSize.width,
                                           height: mediaURL.pixelSize.height,

WordPress/Classes/ViewRelated/Media/SiteMedia/Controllers/SiteMediaAddMediaMenuController.swift

@@ -1,16 +1,30 @@
 import UIKit
 import Photos
 import PhotosUI
+import WordPressCore
 import WordPressData
 import WordPressShared
+import SwiftUI
 
 final class SiteMediaAddMediaMenuController: NSObject, PHPickerViewControllerDelegate, ImagePickerControllerDelegate, ExternalMediaPickerViewDelegate, UIDocumentPickerDelegate, ImagePlaygroundPickerDelegate {
     let blog: Blog
     let coordinator: MediaCoordinator
+    weak var viewController: UIViewController?
 
-    init(blog: Blog, coordinator: MediaCoordinator) {
+    private var mediaUploadService: MediaUploadService?
+
+    init(blog: Blog, coordinator: MediaCoordinator, viewController: UIViewController) {
         self.blog = blog
         self.coordinator = coordinator
+        self.viewController = viewController
+
+        if FeatureFlag.newUploadMedia.enabled, let client = try? WordPressClient(site: WordPressSite(blog: blog)) {
+            self.mediaUploadService = MediaUploadService(
+                coreDataStack: ContextManager.shared,
+                blog: TaggedManagedObjectID(blog),
+                client: client
+            )
+        }
     }
 
     func makeMenu(for viewController: UIViewController) -> UIMenu {
@@ -47,6 +61,18 @@ final class SiteMediaAddMediaMenuController: NSObject, PHPickerViewControllerDel
             .showPhotosPicker(delegate: self)
     }
 
+    private func addMedia(_ assets: [ExportableAsset], analytics: MediaAnalyticsInfo) {
+        if let mediaUploadService, let viewController {
+            let mediaUploadingView = MediaUploadingView(mediaUploadService: mediaUploadService, assets: assets)
+            let hostingController = UIHostingController(rootView: mediaUploadingView)
+            viewController.present(hostingController, animated: true)
+        } else {
+            for asset in assets {
+                coordinator.addMedia(from: asset, to: blog, analyticsInfo: analytics)
+            }
+        }
+    }
+
     // MARK: - PHPickerViewControllerDelegate
 
     func picker(_ picker: PHPickerViewController, didFinishPicking results: [PHPickerResult]) {
@@ -56,58 +82,55 @@ final class SiteMediaAddMediaMenuController: NSObject, PHPickerViewControllerDel
             return
         }
 
-        for result in results {
-            let info = MediaAnalyticsInfo(origin: .mediaLibrary(.deviceLibrary), selectionMethod: .fullScreenPicker)
-            coordinator.addMedia(from: result.itemProvider, to: blog, analyticsInfo: info)
-        }
+        let assets = results.map { $0.itemProvider }
+        addMedia(assets, analytics: MediaAnalyticsInfo(origin: .mediaLibrary(.deviceLibrary), selectionMethod: .fullScreenPicker))
     }
 
     // MARK: - ImagePlaygroundPickerDelegate
 
     func imagePlaygroundViewController(_ viewController: UIViewController, didCreateImageAt imageURL: URL) {
         viewController.presentingViewController?.dismiss(animated: true)
 
-        coordinator.addMedia(
-            from: MediaPickerMenu.makeItemProvider(with: imageURL),
-            to: blog,
-            analyticsInfo: MediaAnalyticsInfo(origin: .mediaLibrary(.imagePlayground), selectionMethod: .fullScreenPicker)
-        )
+        let asset = MediaPickerMenu.makeItemProvider(with: imageURL)
+        addMedia([asset], analytics: MediaAnalyticsInfo(origin: .mediaLibrary(.imagePlayground), selectionMethod: .fullScreenPicker))
     }
 
     // MARK: - ImagePickerControllerDelegate
 
     func imagePicker(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey: Any]) {
         picker.presentingViewController?.dismiss(animated: true)
 
-        func addAsset(from asset: ExportableAsset) {
-            let info = MediaAnalyticsInfo(origin: .mediaLibrary(.camera), selectionMethod: .fullScreenPicker)
-            coordinator.addMedia(from: asset, to: blog, analyticsInfo: info)
-        }
+        var assets = [ExportableAsset]()
+
         guard let mediaType = info[.mediaType] as? String else {
             return
         }
         switch mediaType {
         case UTType.image.identifier:
             if let image = info[.originalImage] as? UIImage {
-                addAsset(from: image)
+                assets.append(image)
             }
         case UTType.movie.identifier:
             if let videoURL = info[.mediaURL] as? URL {
-                addAsset(from: videoURL as NSURL)
+                assets.append(videoURL as NSURL)
             }
         default:
             break
         }
+
+        guard !assets.isEmpty else { return }
+
+        addMedia(assets, analytics: MediaAnalyticsInfo(origin: .mediaLibrary(.camera), selectionMethod: .fullScreenPicker))
     }
 
     // MARK: - ExternalMediaPickerViewDelegate
 
     func externalMediaPickerViewController(_ viewController: ExternalMediaPickerViewController, didFinishWithSelection assets: [ExternalMediaAsset]) {
         viewController.presentingViewController?.dismiss(animated: true)
-        for asset in assets {
-            let info = MediaAnalyticsInfo(origin: .mediaLibrary(viewController.source), selectionMethod: .fullScreenPicker)
-            coordinator.addMedia(from: asset, to: blog, analyticsInfo: info)
 
+        addMedia(assets, analytics: MediaAnalyticsInfo(origin: .mediaLibrary(viewController.source), selectionMethod: .fullScreenPicker))
+
+        for _ in assets {
             switch viewController.source {
             case .stockPhotos:
                 WPAnalytics.track(.stockMediaUploaded)
@@ -137,10 +160,7 @@ final class SiteMediaAddMediaMenuController: NSObject, PHPickerViewControllerDel
     }
 
     func documentPicker(_ controller: UIDocumentPickerViewController, didPickDocumentsAt urls: [URL]) {
-        for documentURL in urls as [NSURL] {
-            let info = MediaAnalyticsInfo(origin: .mediaLibrary(.otherApps), selectionMethod: .documentPicker)
-            coordinator.addMedia(from: documentURL, to: blog, analyticsInfo: info)
-        }
+        addMedia(urls.map { $0 as NSURL }, analytics: MediaAnalyticsInfo(origin: .mediaLibrary(.otherApps), selectionMethod: .documentPicker))
     }
 
     func documentPickerWasCancelled(_ controller: UIDocumentPickerViewController) {