How to cancel ongoing file upload sent with http.MultipartRequest() in Flutter?












1















I'm trying to add cancel functionality to file upload in my Flutter app. I'm currently using http.MultipartRequest() from http package to upload the file. I've tried wrapping the upload with CancelableOperation but it only cancels the internal process within my Flutter app and the file still gets uploaded successfully to my Firebase Storage server.



I read the README.md on http package about using http.Client() and closing it after the http request is completed. I'm thinking about using http.Client() to upload the file and then closing it with the http.Client().close() to cancel the http request.



But, I haven't found the right way to upload file with http.Client yet. I browsed about it on Google and stackoverflow but all the posts recommend using http.MultipartRequest(). One of the posts



So, my questions are:
1. Is it possible to cancel upload file sent with http.MultipartRequest() from http package in Flutter?
2. Am I in the right track with trying to use http.Client() ? Or is there any better way to do this?
3. If using http.Client() is the only way, then can you please show me how to upload file with http.Client()? since it only has post() and no multipartrequest().



Sorry for the long text. Please help. Thanks!










share|improve this question

























  • Hi, I tried using http.Client.close() and it did cancel my post http request. So, what I need now is how to upload file with http.Client.post(). Any help would be really appreciated. Thanks!

    – Natasha S
    Jan 3 at 9:08
















1















I'm trying to add cancel functionality to file upload in my Flutter app. I'm currently using http.MultipartRequest() from http package to upload the file. I've tried wrapping the upload with CancelableOperation but it only cancels the internal process within my Flutter app and the file still gets uploaded successfully to my Firebase Storage server.



I read the README.md on http package about using http.Client() and closing it after the http request is completed. I'm thinking about using http.Client() to upload the file and then closing it with the http.Client().close() to cancel the http request.



But, I haven't found the right way to upload file with http.Client yet. I browsed about it on Google and stackoverflow but all the posts recommend using http.MultipartRequest(). One of the posts



So, my questions are:
1. Is it possible to cancel upload file sent with http.MultipartRequest() from http package in Flutter?
2. Am I in the right track with trying to use http.Client() ? Or is there any better way to do this?
3. If using http.Client() is the only way, then can you please show me how to upload file with http.Client()? since it only has post() and no multipartrequest().



Sorry for the long text. Please help. Thanks!










share|improve this question

























  • Hi, I tried using http.Client.close() and it did cancel my post http request. So, what I need now is how to upload file with http.Client.post(). Any help would be really appreciated. Thanks!

    – Natasha S
    Jan 3 at 9:08














1












1








1








I'm trying to add cancel functionality to file upload in my Flutter app. I'm currently using http.MultipartRequest() from http package to upload the file. I've tried wrapping the upload with CancelableOperation but it only cancels the internal process within my Flutter app and the file still gets uploaded successfully to my Firebase Storage server.



I read the README.md on http package about using http.Client() and closing it after the http request is completed. I'm thinking about using http.Client() to upload the file and then closing it with the http.Client().close() to cancel the http request.



But, I haven't found the right way to upload file with http.Client yet. I browsed about it on Google and stackoverflow but all the posts recommend using http.MultipartRequest(). One of the posts



So, my questions are:
1. Is it possible to cancel upload file sent with http.MultipartRequest() from http package in Flutter?
2. Am I in the right track with trying to use http.Client() ? Or is there any better way to do this?
3. If using http.Client() is the only way, then can you please show me how to upload file with http.Client()? since it only has post() and no multipartrequest().



Sorry for the long text. Please help. Thanks!










share|improve this question
















I'm trying to add cancel functionality to file upload in my Flutter app. I'm currently using http.MultipartRequest() from http package to upload the file. I've tried wrapping the upload with CancelableOperation but it only cancels the internal process within my Flutter app and the file still gets uploaded successfully to my Firebase Storage server.



I read the README.md on http package about using http.Client() and closing it after the http request is completed. I'm thinking about using http.Client() to upload the file and then closing it with the http.Client().close() to cancel the http request.



But, I haven't found the right way to upload file with http.Client yet. I browsed about it on Google and stackoverflow but all the posts recommend using http.MultipartRequest(). One of the posts



So, my questions are:
1. Is it possible to cancel upload file sent with http.MultipartRequest() from http package in Flutter?
2. Am I in the right track with trying to use http.Client() ? Or is there any better way to do this?
3. If using http.Client() is the only way, then can you please show me how to upload file with http.Client()? since it only has post() and no multipartrequest().



Sorry for the long text. Please help. Thanks!







http file-upload dart flutter






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Jan 3 at 8:09







Natasha S

















asked Jan 3 at 7:59









Natasha SNatasha S

83




83













  • Hi, I tried using http.Client.close() and it did cancel my post http request. So, what I need now is how to upload file with http.Client.post(). Any help would be really appreciated. Thanks!

    – Natasha S
    Jan 3 at 9:08



















  • Hi, I tried using http.Client.close() and it did cancel my post http request. So, what I need now is how to upload file with http.Client.post(). Any help would be really appreciated. Thanks!

    – Natasha S
    Jan 3 at 9:08

















Hi, I tried using http.Client.close() and it did cancel my post http request. So, what I need now is how to upload file with http.Client.post(). Any help would be really appreciated. Thanks!

– Natasha S
Jan 3 at 9:08





Hi, I tried using http.Client.close() and it did cancel my post http request. So, what I need now is how to upload file with http.Client.post(). Any help would be really appreciated. Thanks!

– Natasha S
Jan 3 at 9:08












1 Answer
1






active

oldest

votes


















1














Package http uses HTTPClient under the hood. It wraps that underlying client in an IOClient. Most of http's methods (like get and post) allow you to pass in your own client, but the MultipartRequest doesn't (it creates one for each request).



The easiest solution seems to be to subclass it.



import 'dart:async';
import 'dart:io';

import 'package:http/http.dart' as http;

class CloseableMultipartRequest extends http.MultipartRequest {
http.IOClient client = http.IOClient(HttpClient());

CloseableMultipartRequest(String method, Uri uri) : super(method, uri);

void close() => client.close();

@override
Future<http.StreamedResponse> send() async {
try {
var response = await client.send(this);
var stream = onDone(response.stream, client.close);
return new http.StreamedResponse(
new http.ByteStream(stream),
response.statusCode,
contentLength: response.contentLength,
request: response.request,
headers: response.headers,
isRedirect: response.isRedirect,
persistentConnection: response.persistentConnection,
reasonPhrase: response.reasonPhrase,
);
} catch (_) {
client.close();
rethrow;
}
}

Stream<T> onDone<T>(Stream<T> stream, void onDone()) =>
stream.transform(new StreamTransformer.fromHandlers(handleDone: (sink) {
sink.close();
onDone();
}));
}





share|improve this answer
























  • Thank you so much @Richard Heap, it works like a charm! Thank you for taking your time to give me such detailed answer. I really appreciated it :)

    – Natasha S
    Jan 4 at 3:19











Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54018383%2fhow-to-cancel-ongoing-file-upload-sent-with-http-multipartrequest-in-flutter%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes









1














Package http uses HTTPClient under the hood. It wraps that underlying client in an IOClient. Most of http's methods (like get and post) allow you to pass in your own client, but the MultipartRequest doesn't (it creates one for each request).



The easiest solution seems to be to subclass it.



import 'dart:async';
import 'dart:io';

import 'package:http/http.dart' as http;

class CloseableMultipartRequest extends http.MultipartRequest {
http.IOClient client = http.IOClient(HttpClient());

CloseableMultipartRequest(String method, Uri uri) : super(method, uri);

void close() => client.close();

@override
Future<http.StreamedResponse> send() async {
try {
var response = await client.send(this);
var stream = onDone(response.stream, client.close);
return new http.StreamedResponse(
new http.ByteStream(stream),
response.statusCode,
contentLength: response.contentLength,
request: response.request,
headers: response.headers,
isRedirect: response.isRedirect,
persistentConnection: response.persistentConnection,
reasonPhrase: response.reasonPhrase,
);
} catch (_) {
client.close();
rethrow;
}
}

Stream<T> onDone<T>(Stream<T> stream, void onDone()) =>
stream.transform(new StreamTransformer.fromHandlers(handleDone: (sink) {
sink.close();
onDone();
}));
}





share|improve this answer
























  • Thank you so much @Richard Heap, it works like a charm! Thank you for taking your time to give me such detailed answer. I really appreciated it :)

    – Natasha S
    Jan 4 at 3:19
















1














Package http uses HTTPClient under the hood. It wraps that underlying client in an IOClient. Most of http's methods (like get and post) allow you to pass in your own client, but the MultipartRequest doesn't (it creates one for each request).



The easiest solution seems to be to subclass it.



import 'dart:async';
import 'dart:io';

import 'package:http/http.dart' as http;

class CloseableMultipartRequest extends http.MultipartRequest {
http.IOClient client = http.IOClient(HttpClient());

CloseableMultipartRequest(String method, Uri uri) : super(method, uri);

void close() => client.close();

@override
Future<http.StreamedResponse> send() async {
try {
var response = await client.send(this);
var stream = onDone(response.stream, client.close);
return new http.StreamedResponse(
new http.ByteStream(stream),
response.statusCode,
contentLength: response.contentLength,
request: response.request,
headers: response.headers,
isRedirect: response.isRedirect,
persistentConnection: response.persistentConnection,
reasonPhrase: response.reasonPhrase,
);
} catch (_) {
client.close();
rethrow;
}
}

Stream<T> onDone<T>(Stream<T> stream, void onDone()) =>
stream.transform(new StreamTransformer.fromHandlers(handleDone: (sink) {
sink.close();
onDone();
}));
}





share|improve this answer
























  • Thank you so much @Richard Heap, it works like a charm! Thank you for taking your time to give me such detailed answer. I really appreciated it :)

    – Natasha S
    Jan 4 at 3:19














1












1








1







Package http uses HTTPClient under the hood. It wraps that underlying client in an IOClient. Most of http's methods (like get and post) allow you to pass in your own client, but the MultipartRequest doesn't (it creates one for each request).



The easiest solution seems to be to subclass it.



import 'dart:async';
import 'dart:io';

import 'package:http/http.dart' as http;

class CloseableMultipartRequest extends http.MultipartRequest {
http.IOClient client = http.IOClient(HttpClient());

CloseableMultipartRequest(String method, Uri uri) : super(method, uri);

void close() => client.close();

@override
Future<http.StreamedResponse> send() async {
try {
var response = await client.send(this);
var stream = onDone(response.stream, client.close);
return new http.StreamedResponse(
new http.ByteStream(stream),
response.statusCode,
contentLength: response.contentLength,
request: response.request,
headers: response.headers,
isRedirect: response.isRedirect,
persistentConnection: response.persistentConnection,
reasonPhrase: response.reasonPhrase,
);
} catch (_) {
client.close();
rethrow;
}
}

Stream<T> onDone<T>(Stream<T> stream, void onDone()) =>
stream.transform(new StreamTransformer.fromHandlers(handleDone: (sink) {
sink.close();
onDone();
}));
}





share|improve this answer













Package http uses HTTPClient under the hood. It wraps that underlying client in an IOClient. Most of http's methods (like get and post) allow you to pass in your own client, but the MultipartRequest doesn't (it creates one for each request).



The easiest solution seems to be to subclass it.



import 'dart:async';
import 'dart:io';

import 'package:http/http.dart' as http;

class CloseableMultipartRequest extends http.MultipartRequest {
http.IOClient client = http.IOClient(HttpClient());

CloseableMultipartRequest(String method, Uri uri) : super(method, uri);

void close() => client.close();

@override
Future<http.StreamedResponse> send() async {
try {
var response = await client.send(this);
var stream = onDone(response.stream, client.close);
return new http.StreamedResponse(
new http.ByteStream(stream),
response.statusCode,
contentLength: response.contentLength,
request: response.request,
headers: response.headers,
isRedirect: response.isRedirect,
persistentConnection: response.persistentConnection,
reasonPhrase: response.reasonPhrase,
);
} catch (_) {
client.close();
rethrow;
}
}

Stream<T> onDone<T>(Stream<T> stream, void onDone()) =>
stream.transform(new StreamTransformer.fromHandlers(handleDone: (sink) {
sink.close();
onDone();
}));
}






share|improve this answer












share|improve this answer



share|improve this answer










answered Jan 3 at 15:49









Richard HeapRichard Heap

7,51121019




7,51121019













  • Thank you so much @Richard Heap, it works like a charm! Thank you for taking your time to give me such detailed answer. I really appreciated it :)

    – Natasha S
    Jan 4 at 3:19



















  • Thank you so much @Richard Heap, it works like a charm! Thank you for taking your time to give me such detailed answer. I really appreciated it :)

    – Natasha S
    Jan 4 at 3:19

















Thank you so much @Richard Heap, it works like a charm! Thank you for taking your time to give me such detailed answer. I really appreciated it :)

– Natasha S
Jan 4 at 3:19





Thank you so much @Richard Heap, it works like a charm! Thank you for taking your time to give me such detailed answer. I really appreciated it :)

– Natasha S
Jan 4 at 3:19




















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54018383%2fhow-to-cancel-ongoing-file-upload-sent-with-http-multipartrequest-in-flutter%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

Angular Downloading a file using contenturl with Basic Authentication

Olmecas

Can't read property showImagePicker of undefined in react native iOS