I am trying to create a server to run locally for my application to upload some files while debugging. It is very simple and the full source code is:
import 'dart:io';
void main(List<String> arguments) async {
const port = 8080;
final server = await HttpServer.bind(InternetAddress.anyIPv4, port);
server.listen((request) async {
if (request.uri.path != '/save_screenshot' || request.method != 'POST') {
request.response.statusCode = 404;
request.response.close();
return;
}
// TODO: read the file
request.response.statusCode = 200;
request.response.close();
});
print('screenshot server listening on $port.');
}
At the code there is a TODO comment, where I would like to read the file from the HTTPRequest, I googled a bit and could not find a example to copy. Does anyone know how to read the file from the HTTPRequest?
Here is how it is being sent (on the client side):
final url = 'http://<local_ip_address>:8080/save_screenshot';
var request = http.MultipartRequest('POST', Uri.parse(url));
request.files.add(
http.MultipartFile.fromBytes(
'file',
screenshot.bytes,
filename: 'screenshot.png',
),
);
await request.send();
I found out how to read the file from the HTTPRequest. But for it to work it is necessary to install a package called mime.
Then replace the TODO comment in the question with:
final boundary = request.headers.contentType!.parameters['boundary']!;
final mimeTransformer = MimeMultipartTransformer(boundary);
final parts = request.cast<List<int>>().transform(mimeTransformer);
await for (final part in parts) {
final file = File('uploaded_files/0.png');
await part.pipe(file.openWrite());
}
I made a gist with the working server: https://gist.github.com/lslv1243/1036364b10c6578d969cb4ed2d7eba42
NOTE: on the gist I changed the path from /save_screenshot to /screenshot
Related
I have been trying to setup an HTTP connection from a Dart client to a Dart Server using the HttpServer and HttpClient classes respectively.
I want to use this connection to transmit event updates to the client whenever the server feels necessary, so the connection needs to be continuous and the response needs to be sent in chunks, not buffered.
I tried this approach using two different server configurations (once with HttpServer, once with Shelf), but both times the response awaited closing and then the data was printed by the client.
Here is my server code:
var httpsServer = await io.HttpServer.bind("127.0.0.1", 4001);
httpsServer.listen((request) {
request.response.bufferOutput = false;
request.response.headers.add("Content-Type", "text/event-stream");
request.response.headers.add("Cache-Control", "no-cache");
request.response.headers.add("Connection", "keep-alive");
// asynchronously write "Hello" every 100 ms
Timer.periodic(Duration(milliseconds: 100), (Timer timer) {
try {
request.response.write("Hello\n");
} catch (_) {
timer.cancel();
}
});
await Future.delayed(Duration(seconds: 3));
request.response.close();
});
And another using shelf:
{
var handler = const Pipeline().addMiddleware(logRequests()).addHandler(_echoRequest);
var server = await serve(handler, '127.0.0.1', 4000);
server.autoCompress = true;
}
FutureOr<Response> _echoRequest(Request request) {
Stream<List<int>> stream = Stream.periodic(Duration(milliseconds: 100), (int i) {
return utf8.encode("Hello\n");
}).take(10);
return Response.ok(stream);
}
However, on the client, I only receive the data once the connection has been closed:
HttpClient client = HttpClient()..badCertificateCallback = ((X509Certificate cert, String host, int port) => true);
HttpClientRequest request = await client.postUrl(Uri.parse('https://---/'));
request.headers.add('Content-Type', 'text/event-stream');
HttpClientResponse response = await request.close();
// use startChunkConversion to convert the stream of bytes to a stream of strings
Stream<String> stream = response.transform(utf8.decoder).transform(const LineSplitter());
await for (String line in stream) {
print(line);
}
Am I doing something wrong or would I be better off with a different library / approach?
I am making a chat app using flutter.
However, the socket connection does not work.
Port 80 is all connected locally, but sockets using aws are not connected.
I've tried both http and https, but no response. Help me!
Only the app does not connect, but the web connects.
The version of socket io client is 1.0.2, and the version of socket io is 2.3.0.
class _WebrtcState extends State<Webrtc> {
late final IO.Socket socket;
// late final SocketIO socketIO;
final _localRenderer = RTCVideoRenderer();
final _remoteRenderer = RTCVideoRenderer();
MediaStream? _localStream;
RTCPeerConnection? pc;
String check = "aafafasdfs";
#override
void initState() {
print('initState');
init();
super.initState();
}
Future init() async {
print('init');
await _localRenderer.initialize();
await _remoteRenderer.initialize();
await connectSocket();
await joinRoom();
}
Future connectSocket() async {
print('connectSocket');
socket = IO.io('http://********', IO.OptionBuilder().setTransports(['websocket']).build());
print(socket.opts);
socket.onConnect( (_){
print('connect');
setState(() {
check = "11111111111111111111ㅈ111";
});
});
socket.on('joined', (data) {
_sendOffer();
});
socket.on('offer', (data) async{
data = jsonDecode(data);
await _getOffer(RTCSessionDescription(data['sdp'], data['type']));
await _sendAnswer();
});
socket.on('answer', (data) {
data = jsonDecode(data);
_getAnswer(RTCSessionDescription(data['sdp'], data['type']));
});
socket.on('ice', (data) {
data = jsonDecode(data);
_getIce(RTCIceCandidate(data['candidate'], data['sdpMid'], data['sdpMLineIndex']));
});
}
}
To open a WebSocket connection, we need to create a new WebSocket using the special protocol ws in the URL:
final channel = WebSocketChannel.connect(
Uri.parse('wss://echo.websocket.org'),
);
There's also encrypted wss:// protocol. It's like HTTPS for WebSockets.
Please change the URL to something like the below form :
ws://********
wss://********
I am using socket_client_io and Riverpod. Socket client uses events for updates which I want to propagate in a StreamProvider.
What I currently have is the following. It gets the job done but... I would like to write directly to the stream within StreamProvider so I don't need to create an extra stream just to go from events to yield.
final downloadProgressProvider = StreamProvider.autoDispose<Progress>((ref) async* {
// open socketio
final Server host = ref.read(configProvider).talkServer;
final String jwt = ref.read(userProvider).jwt;
IO.Socket _socket = IO.io('${host.uri.toString()}/?token=$jwt', IO.OptionBuilder()
.setTransports(['websocket'])
.build()
);
StreamController<Progress> _stream = StreamController<Progress>();
ref.onDispose(() {
// close socketio
_stream.close();
_stream = null;
_socket.dispose();
_socket = null;
});
_socket.on('download-update', (message) {
print('download-update incoming');
_stream.add(Progress.fromJson(json.decode(message)))
});
await for (final value in _stream.stream) {
yield value;
}
});
I am using the Flutter Plugin Image_picker to choose images so that I want to upload image after selected the image
Future<File> _imageFile;
void _onImageButtonPressed(ImageSource source) async {
setState(() {
_imageFile = ImagePicker.pickImage(source: source);
});
}
I find this code in flutter documentation but its not work
var uri = Uri.parse("http://pub.dartlang.org/packages/create");
var request = new http.MultipartRequest("POST", url);
request.fields['user'] = 'nweiz#google.com';
request.files.add(new http.MultipartFile.fromFile(
'package',
new File('build/package.tar.gz'),
contentType: new MediaType('application', 'x-tar'));
request.send().then((response) {
if (response.statusCode == 200) print("Uploaded!");
});
Use MultipartRequest class
Upload(File imageFile) async {
var stream = new http.ByteStream(DelegatingStream.typed(imageFile.openRead()));
var length = await imageFile.length();
var uri = Uri.parse(uploadURL);
var request = new http.MultipartRequest("POST", uri);
var multipartFile = new http.MultipartFile('file', stream, length,
filename: basename(imageFile.path));
//contentType: new MediaType('image', 'png'));
request.files.add(multipartFile);
var response = await request.send();
print(response.statusCode);
response.stream.transform(utf8.decoder).listen((value) {
print(value);
});
}
Check this answer
This code works properly.
Used MultipartRequest class
void uploadImage() async {
File _image;
File pickedImage = await ImagePicker.pickImage(source: ImageSource.camera);
setState(() {
_image = pickedImage;
});
// open a byteStream
var stream = new http.ByteStream(DelegatingStream.typed(_image.openRead()));
// get file length
var length = await _image.length();
// string to uri
var uri = Uri.parse("enter here upload URL");
// create multipart request
var request = new http.MultipartRequest("POST", uri);
// if you need more parameters to parse, add those like this. i added "user_id". here this "user_id" is a key of the API request
request.fields["user_id"] = "text";
// multipart that takes file.. here this "image_file" is a key of the API request
var multipartFile = new http.MultipartFile('image_file', stream, length, filename: basename(_image.path));
// add file to multipart
request.files.add(multipartFile);
// send request to upload image
await request.send().then((response) async {
// listen for response
response.stream.transform(utf8.decoder).listen((value) {
print(value);
});
}).catchError((e) {
print(e);
});
}
name spaces:
import 'package:path/path.dart';
import 'package:async/async.dart';
import 'dart:io';
import 'package:http/http.dart' as http;
If you want the uploading function to return the server response, you can use toBytes() instead of transform(), in order to wait until data transmission is complete.
Future<String> upload() async {
String responseString = '';
// Pick image
final image = await ImagePicker().getImage(
source: ImageSource.gallery // or ImageSource.camera
imageQuality: 100,
maxWidth: 1000,
);
// Convert to File
final file = File(image.path);
// Set URI
final uri = Uri.parse('URL');
// Set the name of file parameter
final parameter = 'Name';
// Upload
final request = http.MultipartRequest('POST', uri)
..files.add(await http.MultipartFile.fromPath(parameter, file.path));
final response = await request.send();
if (response.statusCode == 200) {
responseString = String.fromCharCodes(await response.stream.toBytes());
}
return responseString;
}
I have to upload an image from browser to my RESTful web API, implemented using Python Eve. From documentation, It requires sending multipart/data-form request. (http://python-eve.org/features.html#file-storage). There is 'dart:http' library that could do. But, it requires 'dart:io', which is not available on browser. So, is there anyway I can send the request from browser?
Thank you for any help.
You can just use something like this:
FormData formData = new FormData();
formData.append('image', '...');
HttpRequest.request('url', method: 'post', sendData: formData).then((HttpRequest request) {
// ...
});
This should set the correct mimeType. If not you can set it with the mimeType parameter.
Regards,
Robert
Client side, the dart:html library should do the trick. Something like this (source):
import 'dart:html';
main() {
InputElement uploadInput = query('#upload');
uploadInput.on.change.add((e) {
// read file content as dataURL
final files = uploadInput.files;
if (files.length == 1) {
final file = files[0];
final reader = new FileReader();
reader.on.load.add((e) {
sendDatas(reader.result);
});
reader.readAsDataURL(file);
}
});
}
/// send data to server
sendDatas(dynamic data) {
final req = new HttpRequest();
req.on.readyStateChange.add((Event e) {
if (req.readyState == HttpRequest.DONE &&
(req.status == 200 || req.status == 0)) {
window.alert("upload complete");
}
});
req.open("POST", "http://127.0.0.1:8080/upload");
req.send(data);
}