회원가입아이디/비번찾기
홈으로

WebView File Upload
7년 전
input 태그를 이용하여 파일 업로드를 할 때, Chrome Browser에서는 잘 되지만,
앱 WebView에서는 동작을 하지 않는다.

결국 구글링과 Chrome 소스를 참고 해서 File Upload를 테스트 해 보았다.



내가 테스트한 WebView 셋팅 소스 이다.
가장 중요한 부분이 setWebChromeClient 함수 이다.

private static final String TYPE_IMAGE = "image/*";
private static final int INPUT_FILE_REQUEST_CODE = 1;

private ValueCallback<Uri> mUploadMessage;
private ValueCallback<Uri[]> mFilePathCallback;
private String mCameraPhotoPath;
WebView webView  = (WebView) findViewById(R.id.webview_);
webView.getSettings().setJavaScriptEnabled(true);

// Enable pinch to zoom without the zoom buttons
webView.getSettings().setBuiltInZoomControls(true);
// Enable pinch to zoom without the zoom buttons
if(Build.VERSION.SDK_INT > Build.VERSION_CODES.HONEYCOMB) {
    // Hide the zoom controls for HONEYCOMB+
    webView.getSettings().setDisplayZoomControls(false);
}
if (Build.VERSION.SDK_INT > Build.VERSION_CODES.ICE_CREAM_SANDWICH)
    webView.getSettings().setTextZoom(100);
webView.setWebChromeClient(new WebChromeClient(){
    @Override
    public void onCloseWindow(WebView w) {
        super.onCloseWindow(w);
        finish();
    }

    @Override
    public boolean onCreateWindow(WebView view, boolean dialog, boolean userGesture, Message resultMsg) {
        final WebSettings settings = view.getSettings();
        settings.setDomStorageEnabled(true);
        settings.setJavaScriptEnabled(true);
        settings.setAllowFileAccess(true);
        settings.setAllowContentAccess(true);
        view.setWebChromeClient(this);
        WebView.WebViewTransport transport = (WebView.WebViewTransport) resultMsg.obj;
        transport.setWebView(view);
        resultMsg.sendToTarget();
        return false;
    }

    // For Android Version < 3.0
    public void openFileChooser(ValueCallback<Uri> uploadMsg) {
        //System.out.println("WebViewActivity OS Version : " + Build.VERSION.SDK_INT + "\t openFC(VCU), n=1");
        mUploadMessage = uploadMsg;
        Intent intent = new Intent(Intent.ACTION_GET_CONTENT);
        intent.addCategory(Intent.CATEGORY_OPENABLE);
        intent.setType(TYPE_IMAGE);
        startActivityForResult(intent, INPUT_FILE_REQUEST_CODE);
    }

    // For 3.0 <= Android Version < 4.1
    public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType) {
        //System.out.println("WebViewActivity 3<A<4.1, OS Version : " + Build.VERSION.SDK_INT + "\t openFC(VCU,aT), n=2");
        openFileChooser(uploadMsg, acceptType, "");
    }

    // For 4.1 <= Android Version < 5.0
    public void openFileChooser(ValueCallback<Uri> uploadFile, String acceptType, String capture) {
        Log.d(getClass().getName(), "openFileChooser : "+acceptType+"/"+capture);
        mUploadMessage = uploadFile;
        imageChooser();
    }

    // For Android Version 5.0+
    // Ref: https://github.com/GoogleChrome/chromium-webview-samples/blob/master/input-file-example/app/src/main/java/inputfilesample/android/chrome/google/com/inputfilesample/MainFragment.java
    public boolean onShowFileChooser(WebView webView,
                                     ValueCallback<Uri[]> filePathCallback, FileChooserParams fileChooserParams) {
        System.out.println("WebViewActivity A>5, OS Version : " + Build.VERSION.SDK_INT + "\t onSFC(WV,VCUB,FCP), n=3");
        if (mFilePathCallback != null) {
            mFilePathCallback.onReceiveValue(null);
        }
        mFilePathCallback = filePathCallback;
        imageChooser();
        return true;
    }

    private void imageChooser() {
        Intent takePictureIntent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
        if (takePictureIntent.resolveActivity(getPackageManager()) != null) {
            // Create the File where the photo should go
            File photoFile = null;
            try {
                photoFile = createImageFile();
                takePictureIntent.putExtra("PhotoPath", mCameraPhotoPath);
            } catch (IOException ex) {
                // Error occurred while creating the File
                Log.e(getClass().getName(), "Unable to create Image File", ex);
            }

            // Continue only if the File was successfully created
            if (photoFile != null) {
                mCameraPhotoPath = "file:"+photoFile.getAbsolutePath();
                takePictureIntent.putExtra(MediaStore.EXTRA_OUTPUT,
                        Uri.fromFile(photoFile));
            } else {
                takePictureIntent = null;
            }
        }

        Intent contentSelectionIntent = new Intent(Intent.ACTION_GET_CONTENT);
        contentSelectionIntent.addCategory(Intent.CATEGORY_OPENABLE);
        contentSelectionIntent.setType(TYPE_IMAGE);

        Intent[] intentArray;
        if(takePictureIntent != null) {
            intentArray = new Intent[]{takePictureIntent};
        } else {
            intentArray = new Intent[0];
        }

        Intent chooserIntent = new Intent(Intent.ACTION_CHOOSER);
        chooserIntent.putExtra(Intent.EXTRA_INTENT, contentSelectionIntent);
        chooserIntent.putExtra(Intent.EXTRA_TITLE, "Image Chooser");
        chooserIntent.putExtra(Intent.EXTRA_INITIAL_INTENTS, intentArray);

        startActivityForResult(chooserIntent, INPUT_FILE_REQUEST_CODE);
    }
});
webView.setWebViewClient(new WebViewClient());

WebChromeClient 클래스에서 보내주는 콜백 함수를 아래와 같이 생각 하면 된다.

KitKat 버전 이하는 openFileChooser 함수가 콜백이 된다.
Lollipop 버전 이상은 onShowFileChooser 함수가 콜백이 된다.

이 때 imageChooser 함수는 카메라 기능과 갤러리에서 이미지를 가져 오는 기능을 한다.

takePictureIntent 는 카메라 기능
contentSelectionIntent 는 갤러리 기능
chooserIntent 는 위 두 기능을 사용자에게 묶어서 선택하도록 위한 기능

createImageFile은 참고 하시기 바란다. 이 함수는 원하는 대로 구현 하면 된다. 결국 파일 하나만 만들어서 리턴 해주면 끝이다.
/**
* More info this method can be found at
* http://developer.android.com/training/camera/photobasics.html
*
* @return
* @throws IOException
*/
private File createImageFile() throws IOException {
    // Create an image file name
    String timeStamp = new SimpleDateFormat("yyyyMMdd_HHmmss").format(new Date());
    String imageFileName = "JPEG_" + timeStamp + "_";
    File storageDir = Environment.getExternalStoragePublicDirectory(
            Environment.DIRECTORY_PICTURES);
    File imageFile = File.createTempFile(
            imageFileName,  /* prefix */
            ".jpg",         /* suffix */
            storageDir      /* directory */
    );
    return imageFile;
}

이렇게 사용자가 선택한 사진 이미지는 아래 보이는 소스 같이 onActivityResult로 받아 온다.
여기서 WebPage 소스가 File 확장자가 이미지가 아니면 업로드하는 부분이 막혀 있어서,
KitKat 버전에서는 Android에서 제공해주는 Uri 대신 해당 File을 직접 찾아 File 경로에 대한 Uri를 넘겨 주었다.

여기서 테스트 할 때 느낀 부분은, filePath를 넘길 때 앞에 'file:' 이 문자열을 꼭 넣어줘야 한다.
그렇지 않으면 file 경로 인식이 잘 되지 않았다. 참고 하길 바란다.
@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
    if (requestCode == INPUT_FILE_REQUEST_CODE && resultCode == RESULT_OK) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            if (mFilePathCallback == null) {
                super.onActivityResult(requestCode, resultCode, data);
                return;
            }
            Uri[] results = new Uri[]{getResultUri(data)};

            mFilePathCallback.onReceiveValue(results);
            mFilePathCallback = null;
        } else {
            if (mUploadMessage == null) {
                super.onActivityResult(requestCode, resultCode, data);
                return;
            }
            Uri result = getResultUri(data);

            Log.d(getClass().getName(), "openFileChooser : "+result);
            mUploadMessage.onReceiveValue(result);
            mUploadMessage = null;
        }
    } else {
        if (mFilePathCallback != null) mFilePathCallback.onReceiveValue(null);
        if (mUploadMessage != null) mUploadMessage.onReceiveValue(null);
        mFilePathCallback = null;
        mUploadMessage = null;
        super.onActivityResult(requestCode, resultCode, data);
    }
}

private Uri getResultUri(Intent data) {
    Uri result = null;
    if(data == null || TextUtils.isEmpty(data.getDataString())) {
        // If there is not data, then we may have taken a photo
        if(mCameraPhotoPath != null) {
            result = Uri.parse(mCameraPhotoPath);
        }
    } else {
        String filePath = "";
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            filePath = data.getDataString();
        } else {
            filePath = "file:" + RealPathUtil.getRealPath(this, data.getData());
        }
        result = Uri.parse(filePath);
    }

    return result;
}
소스를 보시면 이해 하시겠지만, 카메라를 통한 경우에는 data 넘어오지 않고 mCameraPhotoPath의 데이터를 이용 한다.
갤러리는 data로 넘어오기 때문에 그 data를 이용하여 전달해 주면 된다.

getRealPath 소스는 아래 올려 놓은 소스를 이용하셔도 됩니다. Uri의 실제 경로를 넘겨주는 소스 입니다.
http://gogorchg.tistory.com/entry/Android-Get-RealPath-from-Uri

참고용으로 AndroidMenifest.xml에 권한 소스 이다.
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera" />

이 소스를 가지고 4.4.4, 5.1.1, 6.0.2, 에서 무리 없이 동작이 잘 되는 것을 확인 했다.



참고 :
        https://github.com/GoogleChrome/chromium-webview-samples/blob/master/input-file-example/app/src/main/java/inputfilesample/android/chrome/google/com/inputfilesample/MainFragment.java
추천추천 : 616 추천 목록
번호 제목
1,346
윈도우 서버 2019 취약점 점검 보안
1,345
윈도우 서버 2019 취약점 점검 보안 (windows server 2019)
1,344
Windows 취약점진단 보안가이드라인
1,343
Windows Admin Center를 통한 서버 관리
1,342
윈도우 서버에서 실행되는 서비스 확인
1,341
Chrome NET::ERR CERT REVOKED 해결방법
1,340
cmd 명령어 (명령 프롬프트 명령어) 모음
1,339
Windows10 특정 프로그램(OCS 2007 R2)에서 첨부파일 드래그앤드롭이 안 되는 현상
1,338
윈도우 로그, 관리 이벤트 삭제
1,337
클린 부팅
1,336
Windows 구성 요소 저장소에서 파일 손상 검사
1,335
Windows Defender 검사 기록 삭제하기
1,334
간단한 윈도우 10 정품 인증 (크랙프로그램 필요없음)
1,333
오류난 폴더 강제삭제 방법
1,332
크롬에서 플래시 항상 허용하도록 설정하기 (레지스트리) reg 파일 만들기
1,331
GPT 디스크를 MBR 디스크로 변환
1,330
MBR 디스크를 GPT 디스크로 변환
1,329
구글 검색을 200% 활용하게 해주는 검색 명령어 총정리
1,328
[Jquery] jQuery로 우클릭 방지, 드래그 방지, 선택 방지 (IE10, 파이어폭스, 크롬 확인)
1,327
php 사용자 접속IP, 브라우저정보, os정보, http, https 접속프로토콜 알아오기
1,326
[PHP] IE 브라우저 접속 검출하기
1,325
윈도우10 시스템 예약 파티션 확인 및 삭제
1,324
윈도우10 복구 파티션 삭제 방법
1,323
윈도우10 부팅지연 검은화면에서 몇분간 머무는 현상 해결방법
1,322
삼성노트북 바이오스 진입이 불가능한 경우 바이오스 재설치와 NVRAM 초기화
1,321
익스플로러(IE)의 구글 검색공급자 한글로 변경 방법
1,320
윈도우 10 기본 앱 삭제 및 복구
1,319
meta 태그 http-equiv 설정방법과 차이점
1,318
구글(Google)검색에서 고급연산자를 이용하여 많은 정보를 얻는 방법
1,317
프로그램 없이 하드디스크 복사 및 백업하기
목록
뮤직트로트 부산광역시 부산진구 가야동 ㅣ 개인정보취급방침
Copyright ⓒ musictrot All rights reserved.