Android uses Retrofit 2 to implement multiple file uploads

Some time ago, I translated Future Studio's Retrofit2 tutorial, from which I also learned some usage methods of Retrofit2. If you are also planning to start learning it recently, you may want to refer to the Retrofit tutorial on my blog: Retrofit tutorial.

As a summary of the stage, this article will use the Flask framework in Python to implement the Android client multi-file upload function. If the reader has not used Flask in Python, it does not matter. You can only read the Android client part. After all, client engineers can also only use the API.

1. Experimental results

Android operation screenshots

The image received by the server

2. Server-side practice

The server is responsible for receiving and saving the images uploaded by the client and providing the ability to access the images. There are many technologies that can be used to implement the server. Python, as a language with powerful third-party libraries, has many web service frameworks, such as Flask, Django, etc. The author uses the Flask framework, which is a microframework and is very convenient for implementing small functions. The multi-file upload function implemented by the author has no more than 30 lines of program.

Let’s take a closer look below.

2.1 Environment Installation

The Python version I use is 3.4. You can go to Python 3.4 downloads to choose the version that suits your system. Please search for the complete Python installation tutorial yourself.

After Python is installed, you need to install the server-side program dependency library. Install via pip:

 pip install Flask
 pip install werkzeug

2.2 Program Implementation

First, we need to introduce the dependent library:

 from flask import Flask,request,send_from_directory,jsonify
 import os
 from werkzeug import secure_filename

This experiment requires uploading files. It is necessary to restrict the file type and file name of the uploaded file to prevent certain programs from running to damage the server. In addition, some illegal file names are as follows:

filename = "../../../../home/username/.bashrc"

If hackers can manipulate such files, it will be a fatal blow to the server system. Therefore, werkzeug provides secure_filename to verify the legality of the uploaded file name.

Determine whether the file suffix is ​​legal

 ALLOWED_EXTENSIONS= set ([ 'png' , 'jpg' , 'jpeg' , 'gif' ])
 def allowed_file(filename):
 return   '.'   in filename and filename.rsplit( '.' ,1)[1] in ALLOWED_EXTENSIONS

The function code for receiving uploaded files is as follows:

 @app.route( '/upload' ,methods=[ 'POST' ])
 def upload_file():
 if request.method == 'POST' :
 for k in request.files:
 file = request.files[k]
 image_urls = []
 if file and allowed_file(file.filename):
 filename=secure_filename(file.filename)
 file.save(os.path.join (app.config[ ' IMAGE_FOLDER' ],filename))
 image_urls.append( "images/%s" %filename)
 return jsonify({ "code" :1, "image_urls" :image_urls})

Flask supports HTTP request methods such as GET, POST, PUT, and DELETE, and uses decorators for modification, which is similar to the concept of annotations in Java. /upload is the relative address requested by the client, and the request method is limited to POST. According to the built-in object of request, you can access the files sent by the client, check the files and save them locally, where image_urls is the relative address array of the uploaded images. ***Return the address of the image to the client in json format.

The complete server-side code is as follows:

 from flask import Flask,request,send_from_directory,jsonify
 import os
 from werkzeug import secure_filename 
 
 app = Flask(__name__)
 app.config[ 'IMAGE_FOLDER' ] = os.path.abspath( '.' )+ '\\images\\'  
 ALLOWED_EXTENSIONS= set ([ 'png' , 'jpg' , 'jpeg' , 'gif' ]) 
 
 def allowed_file(filename):
 return   '.'   in filename and filename.rsplit( '.' ,1)[1] in ALLOWED_EXTENSIONS 
 
 @app.route( '/upload' ,methods=[ 'POST' ])
 def upload_file():
 if request.method == 'POST' :
 for k in request.files:
 file = request.files[k]
 print(file)
 image_urls = []
 if file and allowed_file(file.filename):
 filename=secure_filename(file.filename)
 file.save(os.path.join (app.config[ ' IMAGE_FOLDER' ],filename))
 image_urls.append( "images/%s" %filename)
 return jsonify({ "code" :1, "image_urls" :image_urls}) 
 
 #Allow file mapping access, otherwise only files in the static folder can be accessed by default
 @app.route( "/images/<imgname>" ,methods=[ 'GET' ])
 def images(imgname):
 return send_from_directory(app.config[ 'IMAGE_FOLDER' ],imgname) 
 
 if __name__ == "__main__" : 
 
 # Check if IMAGE_FOLDER exists
 if not os.path.exists(app.config[ 'IMAGE_FOLDER' ]):
 os.mkdir(app.config[ 'IMAGE_FOLDER' ])
 app.run( "192.168.1.102" ,debug= True )

Here is a little trick. After writing the server-side code, you can use Postman to test it. After the test is successful, you can develop the client program.

3. Client Development

Because it involves uploading files, I will take pictures as an example to upload experiments. In addition to Retrofit, picture uploading also requires selecting pictures. I recommend an image selection library ImagePicker that imitates WeChat.

3.1 Adding Dependency Libraries

Image loading library I like to use Glide

 compile 'com.squareup.retrofit2:retrofit:2.1.0'  
 compile 'com.squareup.retrofit2:converter-gson:2.1.0'  
 compile 'com.github.bumptech.glide:glide:3.7.0'  
 compile 'com.lzy.widget:imagepicker:0.4.1'  

3.2 Program Implementation

If you haven't come across Retrofit 2, you can learn more about it in my blog Retrofit tutorial.

Retrofit2 is a request library that supports RESTful API. In fact, it is just an encapsulation of the API request method. The real network request is issued by OkHttp.

Retrofit2 generally defines a ServiceGenerator class to dynamically generate Retrofit objects.

 public class ServiceGenerator {
 public   static final String API_BASE_URL = "http://192.168.1.102:5000/" ;
 private static OkHttpClient.Builder httpClient = new OkHttpClient.Builder(); 
  
 private static Retrofit.Builder builder =
 new Retrofit.Builder()
 .baseUrl(API_BASE_URL)
 .addConverterFactory(GsonConverterFactory. create ()); 
  
 public   static <S> S createService(Class<S> serviceClass) {
 Retrofit retrofit = builder.client(httpClient.build()).build();
 return retrofit. create (serviceClass);
 }
 }

The specific API operations are performed by the FlaskClient interface.

 public interface FlaskClient {
 //Upload picture
 @Multipart
 @POST( "/upload" )
    Call<UploadResult> uploadMultipleFiles(@PartMap Map<String,RequestBody> files);
 }

To upload a file, you need to use the @Multipart keyword annotation. @POST indicates that the HTTP request method is POST, /upload is the relative address of the request server, uploadMultipleFiles is a custom method name, and the parameter is Map<String,RequestBody> files, which is a Map object composed of multiple files. @PartMap indicates that this is a multi-file upload. If a single file can use @Part MultipartBody.Part file, the return type of the method defaults to Response. Since we have developed the Server side, we know that the return data format of the Server side is Json, so we create a new UploadResut class for the return data format.

 public class UploadResult {
 public   int code; // 1
 public List<String> image_urls;
 }

The interface layout is shown in the figure:

Click the Upload button to perform the upload operation. The core method is:

 public void uploadFiles() {
    if(imagesList. size () == 0) {
 Toast.makeText(MainActivity.this, "Cannot not select a picture" , Toast.LENGTH_SHORT).show();
 return ;
 }
    Map<String, RequestBody> files = new HashMap<>();
    final FlaskClient service = ServiceGenerator.createService(FlaskClient.class);
 for ( int i = 0; i < imagesList. size (); i++) {
        File file = new File(imagesList.get(i).path);
        files.put( "file" + i + "\"; filename=\"" + file.getName(), RequestBody. create (MediaType.parse(imagesList.get(i).mimeType), file));
 }
    Call<UploadResult> call = service.uploadMultipleFiles(files);
    call.enqueue(new Callback<UploadResult>() {
 @Override
 public void onResponse(Call<UploadResult> call, Response<UploadResult> response) {
            if (response.isSuccessful() && response.body().code == 1) {
 Toast.makeText(MainActivity.this, "Upload successful" , Toast.LENGTH_SHORT).show();
 Log.i( "orzangleli" , "---------------------Upload successful-----------------------" );
 Log.i( "orzangleli" , "The base address is:" + ServiceGenerator.API_BASE_URL);
 Log.i( "orzangleli" , "The relative address of the image is: " + listToString(response.body().image_urls, ',' ));
                Log.i( "orzangleli" , "---------------------END-----------------------" );
 }
 }
 @Override
 public void onFailure(Call<UploadResult> call, Throwable t) {
 Toast.makeText(MainActivity.this, "Upload failed" , Toast.LENGTH_SHORT).show();
 }
 });
 }

The parameters for constructing the method for uploading multiple files are critical. MediaType.parse(imagesList.get(i).mimeType) obtains the mimeType of the image. If an error is specified, the upload may fail.

 Map<String, RequestBody> files = new HashMap<>();
 final FlaskClient service = ServiceGenerator.createService(FlaskClient.class);
 for ( int i = 0; i < imagesList. size (); i++) {
     File file = new File(imagesList.get(i).path);
     files.put( "file" + i + "\"; filename=\"" + file.getName(), RequestBody. create (MediaType.parse(imagesList.get(i).mimeType), file));
 }

The second parameter of the onResponse method of the anonymous callback class that integrates the Callback interface is the server response. By accessing the body() method, an object of type UploadResult is returned. Then, the uploaded image can be accessed by combining ServiceGenerator.API_BASE_URL and each item in response.body().image_urls.

4. Project address

Both the client and server of this project are open source, welcome all bosses to Star.

Client address: RetrofitMultiFilesUploadClient

Server Address: MultiFileUploadServer

Original link: http://www.orzangleli.com/2017/04/03/2017-04-03_Android%20%E7%94%A8%20Retrofit%202%20%E5%AE%9E%E7%8E%B0%E5%A4%9A%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0%E5%AE%9E%E6%88%98/