I´m working my first project in flutter. I have a web server with mysql, and I'm loading and sending there the data with REST API PHP. Now I have an upload folder located here: https:///wp-content/my_app/avatars
In flutter on Android or iPhone, I take a photo from user library, and I want upload that file to my avatars folder in the server.
I need to send the image file (jpg or other) to the server. I find several explanations about how to do it, I wrote the code in 3 different ways:
- http.Request
- Dio
- http.MultipartRequest('POST', httpsUri)
Everytime it give me a 301 error and I can´t understand why.
I think and important thing is that my website is hosted with cloudfare. I also gave it a try, thinking there was a problem with access permission to the directory, setting the access permission flags to 777 for a few minutes, but that didn't solve it.
This is my code
First of all an extract for code for image filePath
// Extract from the source code
XFile? imageFile;
imageFile = await picker.pickImage(source: ImageSource.gallery);
_pathAvatar = imageFile!.path;
updateUser(_pathAvatar);
// Upload function
uploadImage(String filePath) async {
dio = new Dio();
var url = "https://<my web site>/upload";
// API CODE is like : 7940e6b5-xxxx-xxxx-xxxx-6883ab87a566
var token = "<string with my APP API code>";
Map<String, String> headers = {
'Authorization': 'Bearer $token',
"Content-Type": "multipart/form-data",
"X-Requested-With": "XMLHttpRequest"
};
await dio.post(url,
data: filepath,
options: Options(
method: 'POST',
headers: headers,
responseType: ResponseType.json // or ResponseType.JSON
)).whenComplete(() {
print('uploaded');
}).catchError((onError) {
print(onError);
});
This is Dio Error:
DioException [bad response]: This exception was thrown because the response has a status code of 301 and RequestOptions.validateStatus was configured to throw for this status code. The status code of 301 has the following meaning: "Redirection: further action needs to be taken in order to complete the request" Read more about status codes at https://developer.mozilla.org/en-US/docs/Web/HTTP/Status In order to resolve this exception you typically have either to verify and fix your request code or you have to fix the server code.
DETAIL
<html><head>
<title>301 Moved Permanently</title>
</head><body>
<h1>Moved Permanently</h1>
<p>The document has moved <a href="<my web site>">here</a>.</p>
</body></html>and this is the full HEADER
*connection: keep-alive alt-svc: h3=":443"; ma=86400
//in this header I have found / at the end of "location", but I didn't have it on my url!
location: https://www.mywebsite.com/wp-content/my_app/avatars**/**
date: Sun, 10 Mar 2024 18:14:05 GMT transfer-encoding: chunked strict-transport-security: max-age=16000000 nel: {"success_fraction":0,"report_to":"cf-nel","max_age":604800} cf-ray: 8625484e8c9e2ba2-FRA report-to: {"endpoints":[{"url":"https://a.nel.cloudflare.com/report/v3?s=Ncs56WKcsVkdO%2F1Dk4ZmDM3Ysc%2FWYFuJ68ESqzSQdJtJTkNH54uqSGxi9cQHSysaAUsffg%2BTbA2zuy0%2FGSq5zBUH8ksxdIFXCIQmqGARb0Q%2FIkJXfnYsgiM8zjIr0xOrhYZzD4ZotA%3D%3D"}],"group":"cf-nel","max_age":604800} cf-cache-status: DYNAMIC content-type: text/html; charset=iso-8859-1 server: cloudflare*