show progress indicator for multiple image upload in UITableViewCell

Question

I have UITableView with custom cells. I want to show progress indicator for multiple images upload.

I have tried reloadRowAtIndexPath method of UITableView but it not sufficient solution because cell is continuously blinks which looks weird.

Another one solution i found is to store reference of my progress indicator view placed in UITableViewCell in global variable and then modify it outside UITableView datasource methods, but in this solution i faced one problem which is i have to keep track of multiple progress indicator view objects of UITableViewCell which is difficult because UITableView datasource is two dimensional NSMutableArray(In short array inside array) so i don't have unique IndexPath.row because of multiple sections. So how can i manage objects of progress indicator view?

And also Is there any better solution to do this type of job?

Answer 1

Ok, so here is what I used in one of my projects when I could not find anything else.

Swift 3

Make a sub class of NSObject (because a sub class of URLSession won't let you set configuration and other parameters as the only designated initializer there is init()) that includes the information of the cell that started the upload process as in IndexPath and also a URLSession object.

Use this sub class to create new URLSession whenever you want to upload (I used uploadTask method of URLSession).

Create uploadTask and start uploading.

You will also have to make your own protocol methods that are called by normal protocol methods of URLSession, to send your custom sub class instead of URLSession object to the delegate you want.

Then in that delegate, you may check for the information of indexPath that is stored in the custom sub class you got from the previous step and update the appropriate cell.

The same could be achieved by using Notifications I guess.

Below is the screenshot of the sample application I wrote:

public class TestURLSession:NSObject, URLSessionTaskDelegate {

    var cellIndexPath:IndexPath!
    var urlSession:URLSession!
    var urlSessionUploadTask:URLSessionUploadTask!
    var testUrlSessionDelegate:TestURLSessionTaskDelegate!

    init(configuration: URLSessionConfiguration, delegate: TestURLSessionTaskDelegate?, delegateQueue queue: OperationQueue?, indexPath:IndexPath){
        super.init()
        self.urlSession = URLSession(configuration: configuration, delegate: self, delegateQueue: queue)
        self.cellIndexPath = indexPath
        self.testUrlSessionDelegate = delegate
    }

    func uploadTask(with request: URLRequest, from bodyData: Data) -> URLSessionUploadTask{
        let uploadTask = self.urlSession.uploadTask(with: request, from: bodyData)
        self.urlSessionUploadTask = uploadTask
        return uploadTask
    }


    public func urlSession(_ session: URLSession, task: URLSessionTask, didSendBodyData bytesSent: Int64, totalBytesSent: Int64, totalBytesExpectedToSend: Int64){
        self.testUrlSessionDelegate.urlSession(self, task: self.urlSessionUploadTask, didSendBodyData: bytesSent, totalBytesSent: totalBytesSent, totalBytesExpectedToSend: totalBytesExpectedToSend)
    }

}

protocol TestURLSessionTaskDelegate : URLSessionDelegate {

    func urlSession(_ session: TestURLSession, task: URLSessionTask, didSendBodyData bytesSent: Int64, totalBytesSent: Int64, totalBytesExpectedToSend: Int64)

}

Edits are welcome.

Answer 2

Here the solution which i applied, may be helpful to someone who wants same implementations as i want, without using third party library or classes.

I have created one custom UIView and design circular progress indicator using CALayer and some animations. This is not a big deal. But the thing which is difficult for me is i want this progress indicator in several cells which indicates multiple image progress in percentages.

So i have created one custom class with properties like

@property (nonatomic,retain) NSIndexPath              *indexPath;
@property (nonatomic,strong) NSURLSessionTask         *uploadtask;

Then i maintain one NSMutableArray which contains my custom class objects which has values for each uploadTask for currently uploading images and merged string which contains indexPath. Now i have track of my all uploading images so i have change uploaded percentage in my custom progress indicator UIView with help of indexPath values whenever i receive response from delegate method of NSURLSession.

Answer 3

I had a similar stuff to do where in which I wanted to download files and show progress bar. My idea was to create a Custom object which keep track of a particular download and all the cells will internally listen to the changes in this object. Each cell will have its own object uniquely identified by the task identifier. I have written a sample code in Swift 3 available in the below link (skeleton code also added)

FileDownloader

class DownLoadData: NSObject {
    var fileTitle: String = ""
    var downloadSource: String = ""
    var downloadTask: URLSessionDownloadTask?
    var taskResumeData: Data?
    var downloadProgress: Float = 0.0
    var isDownloading: Bool = false
    var isDownloadComplete: Bool = false
    var taskIdentifier: Int = 0
    var groupDownloadON:Bool = false
    var groupStopDownloadON:Bool = false

    init(with title:String, and source:String){
        self.fileTitle = title
        self.downloadSource = source
        super.init()

    }

    func startDownload(completion:@escaping (Result<Bool, Error>)->Void,progressHandler:@escaping (Float)->Void ){

    }
    func resumeDownload(completion:@escaping (Result<Bool, Error>)->Void,progressHandler:@escaping (Float)->Void ){


    }

    func pauseDownload(){

    }

    func stopDownload(){

        if self.isDownloading{

        }
    }
    func cleanUpHandlers(){

        // remove the completion handlers from the network manager as resume is taken as a new task.

    }
    func handleDownloadSuccess(){

    }
    func handleDownloadError(){


    }
}

Answer 4

Use URLSessionTaskDelegate method and do necessary calculation:

func urlSession(_ session: URLSession, task: URLSessionTask, didSendBodyData bytesSent: Int64, totalBytesSent: Int64, totalBytesExpectedToSend: Int64)

Answer 5

Below is a solution, that is tested for a single file upload. But you can modify it to support multiple file uploads. Make sure to add necessary IBOutlets and IBAction as necessary. The image is added in 'Assets.xcassets'.

My UI looks like below:

Below is the code for ViewController.

import UIKit

class UploadProgressViewController: UIViewController, URLSessionTaskDelegate {

@IBOutlet weak var imageView: UIImageView!
@IBOutlet weak var progressView: UIProgressView!

override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view.
    progressView.progress = 0.0
}

@IBAction func didTapOnStartUploadButton(_ sender: Any) {
    startDownload()
}

func startDownload () {
    // 1. Prepare data to download
    var data = Data()
    if let image = UIImage(named: "swift.jpg") {
        data = image.pngData()!
    }
    // 2. Creation of request
    var request = URLRequest(url: NSURL(string: "http://127.0.0.1:8000/swift.png")! as URL)
    request.httpMethod = "POST"
    request.setValue("Keep-Alive", forHTTPHeaderField: "Connection")
    // 3. Configuring the Session
    let configuration = URLSessionConfiguration.default
    let mainqueue = OperationQueue.main
    // 4. Start the upload task
    let session = URLSession(configuration: configuration, delegate:self, delegateQueue: mainqueue)
    let dataTask = session.uploadTask(with: request, from: data)
    dataTask.resume()
}

// URLSessionTaskDelegate Handling

func urlSession(_ session: URLSession, task: URLSessionTask, didSendBodyData bytesSent: Int64, totalBytesSent: Int64, totalBytesExpectedToSend: Int64) {
    let uploadProgress: Float = Float(totalBytesSent) / Float(totalBytesExpectedToSend)
    print("session \(session) uploaded \(uploadProgress * 100)%.")
    progressView.progress = uploadProgress
}

func urlSession(_ session: URLSession, task: URLSessionTask, didCompleteWithError error: Error?) {
    print(error.debugDescription)
}