Categories
discuss

Make Ionic app appear in “Share” list and receive data

I am trying to get an Ionic app to appear in the “Share” list when a user clicks the share button for example for an image.

Sharing example

As far as I understand I have to add something like

<intent-filter> 
   <action android:name="android.intent.action.SEND" />
   <category android:name="android.intent.category.DEFAULT" />
   <data android:mimeType="image/*" />
</intent-filter>

to the AndroidManifest.xml. That I can do using the cordova-custom-config plugin, I think.
I would then have to handle that intent somehow though and that is where it gets tricky for me. Seems like the only cordova plugin that is currently maintaned for intents is this one. I tried using it like this:

  initializeApp() {
    this.platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      this.statusBar.styleDefault();
      this.splashScreen.hide();
      this.registerBroadcastReceiver();
    });
  }
  private registerBroadcastReceiver(){
      window.plugins.intentShim.registerBroadcastReceiver({
          filterActions: [
              'com.darryncampbell.cordova.plugin.broadcastIntent.ACTION'
              ]
          },
          function(intent) {
              //  Broadcast received
              console.log('Received Intent: ' + JSON.stringify(intent.extras));
          }
      );
  }

But this way I am getting an error that window.plugins is undefined. I don’t really know how I would integrate this with Ionic.

Also this only works for Android, I would like to have that work for iOS too. This SO question is related and mentions a way to do it for iOS, but it’s about 4 years old (the linked iOS parts 5 years) and the project webintent specified for Android in the answer doesn’t even exist anymore.

Would be great if someone could help me out here.

Also related:

Update

All the answers are focusing on Android only, I was really hoping somebody could point me in the right direction for iOS as I would need it there even more…

Final conclusion & bounty

Bounty
After long consideration I have concluded to give the bounty to @Ghandi. Although nobody could give a full answer, he was the only one trying to answer the whole question – including the iOS part. I wasn’t expecting a full code solution, just a pointer in the right direction for both Android and iOS and that’s what he came closest to of all answers. I know this is a very broad question and I’d like to thank everyone who took the time to answer and / or comment this question.

For other’s who are trying to accomplish the same thing, here is what I conclude of all my research and the answers here

Android
As I describe already in my question above, you have to add those lines to the AndroidManifest.xml. Android will then make your app appear in the share list. The data that your app receives you’ll have to handle via a so called Intent. To do so you can use Ionic Native – Web Intent. As of 9.5.2017 this would not work yet as the Plugin Ionic Native is using does not exist anymore. I have however created an issue on Github where I have been told that the next version of Ionic Native (I think 3.7.0), which should be released in the next two weeks, should fix this by using the plugin mentioned in my question above already. This resolves the issue of having to kinda play around the Ionic Framework yourself and simply being able to use Ionic Native.

iOS
In iOS it seems to be a bit more tricky and also there is less to be found of it around the web. It’s best you follow the link that @Ghandi provides in his answer below.

Answer

After some detailed analysis, this is what I could conclude:

In Android, you could just get your application added in the share list using cordova-plugin-intent as described here. You can also achieve this by adding intent filter in the activity as described here

In iOS, this is bit tricky as there are no straight forward plugins or readymade solution available to achieve this. But the best possible link i could get related to adding app in iOS share menu is getting listed in share menu The link includes apple documentation to do this and also some tweaking in Info.plist to acheive this.

This is the best possible answer I could think of. Hope it helps. Cheers.

Categories
discuss

does angular have the “computed property” feature like in vue.js?

I learnt Vue.js first, and now have a project in Angular 4 so I just learnt Angular. I find everything is not that different from Vue except the “Computed Property”. In Vue, I can create a computed property that listens to changes of other properties and run calculations automatically.

For example(in Vue 2):

computed: {
    name(){
        return this.firstname + ' ' + this.lastname;
    }
}

The name property will only recalculate when one of firstname or lastname change. How to handle this in Angular 2 or 4 ?

Answer

yes, you can.

In TS file:

export class MyComponent {

  get name() {
     return  this.firstname + ' ' + this.lastname;
  }
}

and after that in html:

<div>{{name}}</div>

here is an example:

@Component({
  selector: 'my-app',
  template: `{{name}}`,
})
export class App  {
  i = 0;
  firstN;
  secondN;

  constructor() {
    setInterval(()=> {
      this.firstN = this.i++;
      this.secondN = this.i++;
    }, 2000);
  }
  get name() {
    return  this.firstN + ' ' + this.secondN;
  }
}
Categories
discuss

Upload and Play Audio File JS

I have an HTML audio tag and an HTML file input tag, as shown below. I’d like users to use the Upload File button to select a song from their computer, then play it using the audio tag.

<audio id="audio">
    <source src="" id="thesource" />
</audio>
<input type="file" id="upload" title="Upload File" />

How do I let users upload audio files from their computer and play it? This must be done locally, as it is being used in a downloadable web app I am creating.

EDIT: Long ago, after lots of hard work and rediscovering past projects, I developed a solution to this question by converting some image-uploading code from one of my past projects into audio-uploading code. Now, years after I originally asked this question, I feel stupid for not realizing that answer earlier. I posted and edited the answer down below for any people who also need this.

Answer

I originally said there was no answer — I was wrong. I have found the answer.

function handleFiles(event) {
    var files = event.target.files;
    $("#src").attr("src", URL.createObjectURL(files[0]));
    document.getElementById("audio").load();
}

document.getElementById("upload").addEventListener("change", handleFiles, false);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="upload" />
<audio id="audio" controls>
  <source src="" id="src" />
</audio>

This does exactly what I wanted — it allows uploading of any audio file and plays it. Try uploading any music from your computer into the snippet.

Note: Browsers like Google Chrome constantly update how and when audio/video can be played for evolving convenience or security. This answer is currently working, but if it is no longer working at any point in the future, please post a comment below so I can fix any problems that emerge.

Categories
discuss

javascript – get the filename and extension from input type=file

I have a file upload input and when I click the browse button and select the file, I want the filename and extension to appear in two input text boxes (see code sample).

It works correctly with the extension, but the filename also shows the path which gives me the fakepath warning.

I understand why, but what’s a good way to do this and just get the filename into that box. I don’t need the path.

function getoutput(){
    outputfile.value=inputfile.value.split('.')[0];
    extension.value=inputfile.value.split('.')[1];}
    <input id='inputfile' type='file' name='inputfile' onChange='getoutput()'><br>
    Output Filename <input id='outputfile' type='text' name='outputfile'><br>
    Extension <input id='extension' type='text' name='extension'>

Answer

Use lastIndexOf to get the last as an index and use substr to get the remaining string starting from the last index of

function getFile(filePath) {
        return filePath.substr(filePath.lastIndexOf('\') + 1).split('.')[0];
    }

    function getoutput() {
        outputfile.value = getFile(inputfile.value);
        extension.value = inputfile.value.split('.')[1];
    }
<input id='inputfile' type='file' name='inputfile' onChange='getoutput()'><br>
    Output Filename <input id='outputfile' type='text' name='outputfile'><br>
    Extension <input id='extension' type='text' name='extension'>

UPDATE

function getFileNameWithExt(event) {

  if (!event || !event.target || !event.target.files || event.target.files.length === 0) {
    return;
  }

  const name = event.target.files[0].name;
  const lastDot = name.lastIndexOf('.');

  const fileName = name.substring(0, lastDot);
  const ext = name.substring(lastDot + 1);

  outputfile.value = fileName;
  extension.value = ext;
  
}
<input id='inputfile' type='file' name='inputfile' onChange='getFileNameWithExt(event)'><br>
  Output Filename <input id='outputfile' type='text' name='outputfile'><br>
  Extension <input id='extension' type='text' name='extension'>
Categories
discuss

Manage Android app flavors on Google Play

I just created 2 flavors for my app: Staging and Production.

Everything seems to work well in both flavors so now I would like to upload my staging release apk (signed) so that testers can test it.

As I have a different applicationId for my staging app:

    stage {
        applicationId defaultConfig.applicationId + ".stage"
        versionName defaultConfig.versionName + "-stage"
        resValue "string", "app_name", "MyApp Staging"
    }

Do I need to create a new App in console play console and deploy this apk to the new version or is there a way to use the same App?

Right now, when I try to upload the staging release app, I get the following error:

Upload failed
Your APK needs to have the package name com.my.app.

Answer

If the applicationId is different, it would need to be a separate app in play store. This is on the documentation of applicationId

Every Android app has a unique application ID that looks like a Java package name, such as com.example.myapp. This ID uniquely identifies your app on the device and in Google Play Store. If you want to upload a new version of your app, the application ID (and the certificate you sign it with) must be the same as the original APK—if you change the application ID, Google Play Store treats the APK as a completely different app. So once you publish your app, you should never change the application ID.

If you don’t want to “pollute” your play store, one other good option is to use Beta by Fabric for free to simplify distribution of your staging builds for your internal testers and stake holders. Using this they can even download any of the older releases and will be informed of new updates as soon as it is released. There is no waiting time unlike Google Play Store where it might take sometimes few hours or more to make the update available to all the users. Recently Fabric has been bought by Google.

P.S: I just a happy user of Fabric Beta and in no way related to them.

Source: stackoverflow
Text is available under the Creative Commons Attribution-ShareAlike License; additional terms may apply. By using this site, you agree to the Privacy Policy, and Copyright Policy. Content is available under CC BY-SA 3.0 unless otherwise noted. The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 © No Copyrights, All Questions are retrived from public domain..