0
0
iOS Swiftmobile~20 mins

Cloud Storage in iOS Swift - Mini App: Build & Ship

Choose your learning style9 modes available
Build: Cloud Storage Upload
This screen lets users select a photo from their device and upload it to cloud storage. It shows upload progress and confirms when upload is done.
Target UI
-------------------------
| Cloud Storage Upload  |
-------------------------
| [Select Photo]        |
|                       |
|                       |
| Upload Progress: 0%   |
|                       |
| [Upload]              |
-------------------------
Add a button labeled 'Select Photo' that opens the photo picker.
Show the selected photo as a small preview below the button.
Add an 'Upload' button that uploads the selected photo to cloud storage.
Display upload progress as a percentage while uploading.
Show a confirmation message when upload completes successfully.
Handle case when no photo is selected by disabling the Upload button.
Starter Code
iOS Swift
import SwiftUI
import PhotosUI

struct CloudStorageUploadView: View {
    @State private var selectedImage: UIImage? = nil
    @State private var isUploading = false
    @State private var uploadProgress: Double = 0.0
    @State private var showConfirmation = false
    @State private var isPickerPresented = false

    var body: some View {
        VStack(spacing: 20) {
            Text("Cloud Storage Upload")
                .font(.title)
                .padding()

            Button("Select Photo") {
                // TODO: Present photo picker
            }
            .padding()
            .background(Color.blue)
            .foregroundColor(.white)
            .cornerRadius(8)

            // TODO: Show selected image preview here

            Text("Upload Progress: \(Int(uploadProgress * 100))%")

            Button("Upload") {
                // TODO: Upload selected image
            }
            .padding()
            .background(selectedImage == nil || isUploading ? Color.gray : Color.green)
            .foregroundColor(.white)
            .cornerRadius(8)
            .disabled(selectedImage == nil || isUploading)

            if showConfirmation {
                Text("Upload completed successfully!")
                    .foregroundColor(.green)
            }

            Spacer()
        }
        .padding()
    }
}
Task 1
Task 2
Task 3
Task 4
Task 5
Solution
iOS Swift
import SwiftUI
import PhotosUI

struct CloudStorageUploadView: View {
    @State private var selectedImage: UIImage? = nil
    @State private var isUploading = false
    @State private var uploadProgress: Double = 0.0
    @State private var showConfirmation = false
    @State private var isPickerPresented = false

    var body: some View {
        VStack(spacing: 20) {
            Text("Cloud Storage Upload")
                .font(.title)
                .padding()

            Button("Select Photo") {
                isPickerPresented = true
                showConfirmation = false
            }
            .padding()
            .background(Color.blue)
            .foregroundColor(.white)
            .cornerRadius(8)
            .sheet(isPresented: $isPickerPresented) {
                PhotoPicker(selectedImage: $selectedImage)
            }

            if let image = selectedImage {
                Image(uiImage: image)
                    .resizable()
                    .scaledToFit()
                    .frame(width: 150, height: 150)
                    .cornerRadius(8)
                    .shadow(radius: 5)
            }

            Text("Upload Progress: \(Int(uploadProgress * 100))%")

            Button("Upload") {
                startUpload()
            }
            .padding()
            .background(selectedImage == nil || isUploading ? Color.gray : Color.green)
            .foregroundColor(.white)
            .cornerRadius(8)
            .disabled(selectedImage == nil || isUploading)

            if showConfirmation {
                Text("Upload completed successfully!")
                    .foregroundColor(.green)
            }

            Spacer()
        }
        .padding()
    }

    func startUpload() {
        guard selectedImage != nil else { return }
        isUploading = true
        uploadProgress = 0.0
        showConfirmation = false

        // Simulate upload with timer
        Timer.scheduledTimer(withTimeInterval: 0.1, repeats: true) { timer in
            uploadProgress += 0.05
            if uploadProgress >= 1.0 {
                timer.invalidate()
                isUploading = false
                showConfirmation = true
            }
        }
    }
}

struct PhotoPicker: UIViewControllerRepresentable {
    @Binding var selectedImage: UIImage?

    func makeUIViewController(context: Context) -> PHPickerViewController {
        var config = PHPickerConfiguration()
        config.filter = .images
        config.selectionLimit = 1
        let picker = PHPickerViewController(configuration: config)
        picker.delegate = context.coordinator
        return picker
    }

    func updateUIViewController(_ uiViewController: PHPickerViewController, context: Context) {}

    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }

    class Coordinator: NSObject, PHPickerViewControllerDelegate {
        let parent: PhotoPicker

        init(_ parent: PhotoPicker) {
            self.parent = parent
        }

        func picker(_ picker: PHPickerViewController, didFinishPicking results: [PHPickerResult]) {
            picker.dismiss(animated: true)
            guard let provider = results.first?.itemProvider else { return }
            if provider.canLoadObject(ofClass: UIImage.self) {
                provider.loadObject(ofClass: UIImage.self) { image, _ in
                    DispatchQueue.main.async {
                        self.parent.selectedImage = image as? UIImage
                    }
                }
            }
        }
    }
}

This solution uses SwiftUI with PHPickerViewController to let users pick a photo from their device. The selected photo is shown as a preview image below the Select Photo button.

The Upload button is disabled if no photo is selected or if an upload is in progress. When Upload is tapped, a timer simulates upload progress by increasing a progress value every 0.1 seconds. The progress percentage is shown as text.

When upload completes, a confirmation message appears. The photo picker is presented as a sheet. This approach keeps UI responsive and simple for beginners.

Final Result
Completed Screen
-------------------------
| Cloud Storage Upload  |
-------------------------
| [Select Photo]        |
|                       |
|  [Image Preview]      |
| Upload Progress: 75%  |
|                       |
| [Upload]              |
|                       |
| Upload completed      |
| successfully!         |
-------------------------
Tapping 'Select Photo' opens the photo picker to choose an image.
Selected image appears as a preview below the button.
Upload button becomes enabled after photo selection.
Tapping 'Upload' starts upload simulation and updates progress text.
When upload finishes, a success message is shown below the Upload button.
Stretch Goal
Add a cancel button to stop the upload in progress.
💡 Hint
Use a @State variable to track the Timer and call invalidate() to stop it when cancel is tapped.