Skip to main content

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){

8. Save and run the project. Now the user can upload any file through WebView link.

The video below demonstrates the same.

Comments

Post a Comment

Popular posts from this blog

Create Music Player app in Sketchware

To create a Music Player app in sketchware, follow the steps given below. 1. Create a new project in Sketchware. 2. In VIEW area on main.xml, add a ListView  listview1  with height wrap_content, and weight 1. Add a SeekBar  seekbar1 , an ImageView  imageview1 , and three TextViews  textview1 ,  textview2 , and  textview3 , as shown in the image below. 3. Create a CustomView  mycustom.xml  and add a TextView  textview1 , and an ImageView  imageview1  in it. For listview1 select mycustom.xml as it's customView. 4. Add a MediaPlayer component  mp , a Shared Preferences component  sp:sp  and a Timer component  timer . 5. Create six More Blocks  MPcreate(pos), MPstart , and  MPpause  for the MediaPlayer and  searchFolders ,  getFileList in [filePath]  and  extra . 6. Add three number variables  n, r  and  songPosition , and five String variables  currentfile ,  songMinutes ,  songSeconds ,  folder ,  folderName . Also add a List String  folderList,  List String  fileList  and a List Map

Admob rewarded video Ads in Sketchware

To integrate Admob Rewarded Video Ads to a Sketchware project, follow the steps given below. Prerequisites An Android project (Sketchware project) Account in Admob Always place the test ad unit ID before placing your ad unit ID. App ID and ad unit ID can be obtained by registering the app on Admob. But for using test ads no registration is required. Do not click on your own Ads. 1. Create an android project in Sketchware. 2. Add the app to your Admob account. For your app, generate an ad unit ID for Rewarded Video Ads. 3. In Sketchware project, navigate to  Library Manager  and open Admob settings. i. Click on Add manually and add the ad unit ID generated on Admob website, or use test ad unit ID ca-app-pub-3940256099942544/5224354917. ii. If you are not using any banner or interstitial ad units, select the same ad unit ID for both banner and interstitial ads. iii. Add Test Device automatically shown by Sketchware. iv. Save it. v. Switch ON Admob and AppCompat and design. 4. In this exa

Firebase auth in Sketchware for Login Activity

To create a login activity using Firebase Auth in Sketchware, follow the steps given below. This method uses Firebase authentication service for creating login. 1. In your Firebase account, go to Firebase authentication. 2. In Firebase authentication web set-up, go to SIGN-IN method, and enable Email/password and Anonymous. 3. Go to Project settings in your Firebase project and copy the Web API Key, Project ID, and App ID. 4. Paste the Project ID, App ID, and Web API Key in your project in Sketchware, in the Firebase settings. 5. On the  MainActivity  page add a File Shared preferences component  user:user  and an Intent  i . Also add a Timer  t  and a Firebase Auth  testlogin . 6. Create a new page  login.xml  with Activity called  LoginActivity . 7. In  onCreate  event of MainActivity use blocks as shown in image below. It identifies main page with  File user key page . It also checks if user is logged in to  FirebaseAuth . If user is logged in then other blocks are executed. If user