How to enable upload from webview in Sketchware?
Now that Sketchware has a block to add java code directly in the project, it is possible to enable file upload in webview.
To enable file upload in webview in sketchware app, follow the steps given below.
1. Insert a webview in VIEW area in the sketchware project. Note the ID of webview, usually it is webview1.
2. In LOGIC area of project, in onCreate event, add the block add source directly and copy the following code in it:
webview1.setWebChromeClient(new WebChromeClient() {
// For 3.0+ Devices
protected void openFileChooser(ValueCallback uploadMsg, String acceptType) { mUploadMessage = uploadMsg; Intent i = new Intent(Intent.ACTION_GET_CONTENT); i.addCategory(Intent.CATEGORY_OPENABLE);
i.setType("image/*"); startActivityForResult(Intent.createChooser(i, "File Browser"), FILECHOOSER_RESULTCODE);
}
// For Lollipop 5.0+ Devices
public boolean onShowFileChooser(WebView mWebView, ValueCallback<Uri[]> filePathCallback, WebChromeClient.FileChooserParams fileChooserParams) {
if (uploadMessage != null) {
uploadMessage.onReceiveValue(null);
uploadMessage = null; } uploadMessage = filePathCallback; Intent intent = fileChooserParams.createIntent(); try {
startActivityForResult(intent, REQUEST_SELECT_FILE);
} catch (ActivityNotFoundException e) {
uploadMessage = null; Toast.makeText(getApplicationContext(), "Cannot Open File Chooser", Toast.LENGTH_LONG).show(); return false; }
return true; }
//For Android 4.1 only
protected void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType, String capture) {
mUploadMessage = uploadMsg; Intent intent = new Intent(Intent.ACTION_GET_CONTENT); intent.addCategory(Intent.CATEGORY_OPENABLE); intent.setType("image/*"); startActivityForResult(Intent.createChooser(intent, "File Browser"), FILECHOOSER_RESULTCODE);
}
protected void openFileChooser(ValueCallback<Uri> uploadMsg) {
mUploadMessage = uploadMsg; Intent i = new Intent(Intent.ACTION_GET_CONTENT); i.addCategory(Intent.CATEGORY_OPENABLE);
i.setType("image/*"); startActivityForResult(Intent.createChooser(i, "File Chooser"), FILECHOOSER_RESULTCODE);
}
});
Note that if the ID of webview is not webview1, change it accordingly in the code above. This code should be at the beginning of onCreate before the WebView loadUrl block.
3. Add the block webview loadUrl and write the url to be loaded in webview.
4. Add a new FilePicker component fp.
5. Add a new More Block extra.
6. To define this block extra, use an add source directly block and put following code in it:
}
private ValueCallback<Uri> mUploadMessage;
public ValueCallback<Uri[]> uploadMessage;
public static final int REQUEST_SELECT_FILE = 100;
private final static int FILECHOOSER_RESULTCODE = 1;
{
7. Add the event FilePicker onFilesPicked. Here use an add source directly block and put following code:
}
break;
case REQUEST_SELECT_FILE:
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
if (uploadMessage == null) return; uploadMessage.onReceiveValue(WebChromeClient.FileChooserParams.parseResult(_resultCode, _data)); uploadMessage = null; }
break;
case FILECHOOSER_RESULTCODE:
if (null == mUploadMessage){
return; }
Uri result = _data == null || _resultCode != RESULT_OK ? null : _data.getData(); mUploadMessage.onReceiveValue(result);
mUploadMessage = null;
if (true){
To enable file upload in webview in sketchware app, follow the steps given below.
1. Insert a webview in VIEW area in the sketchware project. Note the ID of webview, usually it is webview1.
2. In LOGIC area of project, in onCreate event, add the block add source directly and copy the following code in it:
webview1.setWebChromeClient(new WebChromeClient() {
// For 3.0+ Devices
protected void openFileChooser(ValueCallback uploadMsg, String acceptType) { mUploadMessage = uploadMsg; Intent i = new Intent(Intent.ACTION_GET_CONTENT); i.addCategory(Intent.CATEGORY_OPENABLE);
i.setType("image/*"); startActivityForResult(Intent.createChooser(i, "File Browser"), FILECHOOSER_RESULTCODE);
}
// For Lollipop 5.0+ Devices
public boolean onShowFileChooser(WebView mWebView, ValueCallback<Uri[]> filePathCallback, WebChromeClient.FileChooserParams fileChooserParams) {
if (uploadMessage != null) {
uploadMessage.onReceiveValue(null);
uploadMessage = null; } uploadMessage = filePathCallback; Intent intent = fileChooserParams.createIntent(); try {
startActivityForResult(intent, REQUEST_SELECT_FILE);
} catch (ActivityNotFoundException e) {
uploadMessage = null; Toast.makeText(getApplicationContext(), "Cannot Open File Chooser", Toast.LENGTH_LONG).show(); return false; }
return true; }
//For Android 4.1 only
protected void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType, String capture) {
mUploadMessage = uploadMsg; Intent intent = new Intent(Intent.ACTION_GET_CONTENT); intent.addCategory(Intent.CATEGORY_OPENABLE); intent.setType("image/*"); startActivityForResult(Intent.createChooser(intent, "File Browser"), FILECHOOSER_RESULTCODE);
}
protected void openFileChooser(ValueCallback<Uri> uploadMsg) {
mUploadMessage = uploadMsg; Intent i = new Intent(Intent.ACTION_GET_CONTENT); i.addCategory(Intent.CATEGORY_OPENABLE);
i.setType("image/*"); startActivityForResult(Intent.createChooser(i, "File Chooser"), FILECHOOSER_RESULTCODE);
}
});
Note that if the ID of webview is not webview1, change it accordingly in the code above. This code should be at the beginning of onCreate before the WebView loadUrl block.
3. Add the block webview loadUrl and write the url to be loaded in webview.
4. Add a new FilePicker component fp.
5. Add a new More Block extra.
6. To define this block extra, use an add source directly block and put following code in it:
}
private ValueCallback<Uri> mUploadMessage;
public ValueCallback<Uri[]> uploadMessage;
public static final int REQUEST_SELECT_FILE = 100;
private final static int FILECHOOSER_RESULTCODE = 1;
{
7. Add the event FilePicker onFilesPicked. Here use an add source directly block and put following code:
}
break;
case REQUEST_SELECT_FILE:
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
if (uploadMessage == null) return; uploadMessage.onReceiveValue(WebChromeClient.FileChooserParams.parseResult(_resultCode, _data)); uploadMessage = null; }
break;
case FILECHOOSER_RESULTCODE:
if (null == mUploadMessage){
return; }
Uri result = _data == null || _resultCode != RESULT_OK ? null : _data.getData(); mUploadMessage.onReceiveValue(result);
mUploadMessage = null;
if (true){
8. Save and run the project. Now the user can upload any file through WebView link.
The video below demonstrates the same.
The video below demonstrates the same.
