Classic Camera - image component - upload to db question - but in AngularJS/Ionic app

Creating AngularJS app and followed tutorials..
1 - to get image component populated by call to Camera_getPicture - works
2 - UploadFile example - where youselect files from system - works
Question - when trying to figure out how to get the filename from the image component to upload it - not working ...and many of the topics that I'm looked thru have links that are either not there anymore or get directed to the top of the Appery IO document (not much help) .... I've seen stuff online about formdata. blobs, code from 3 yrs ago to get it into an array,etc ... what's the best way under the newer AngularJS techonology?
1 person has
this question
+1
Reply
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • thanks, I saw this but didn't know if it was the latest/best way to handle the problem. I'll try it out.

    I assume after the image file is uploaded to the files collection - I still need to "link" it to the the collection that contains the information related to the image .... would I use a pointer type to point to the file collection object OR there seems to be a "file" type in the other collections - would I somehow use this?

    What is the "file" type for in collections other than the file collection?
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • I've done everything in the solution you suggested ...ut being new to Appery I'm not sure if I defined the Helper part correctly ....
    I created a new Javascript , named it Helper as an ext library kind and created this

    define( [ 'require' ], function( require ){
    // Add your code here if you create AMD module.
    // Otherwise, delete this wrapper
    // and mark this module as Shim in dependency manager
    // see https://links.appery.io/ve-add-intern...

    var Helper = {
    dataURItoBlob:function (dataURI, callback) {
    var byteString = atob(dataURI.split(',')[1]);
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
    var ab = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
    }
    var bb = new Blob([ab], {type: mimeString});
    return bb;
    }
    };
    });

    Runs, but no success msg and no new file in files collection ....
    Is the function part correct with 2 params ? but in the call you only pass 1 - the $scope.im_pic (my image variable with no 2nd param?
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • You need to copy-paste the JS code of the Helper to the JS file (Create new->JavaScript->External library)
    So you need to remove all extra code and leave there only the provided one
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • Related question ... I got all the previous stuff working ..take picture , store that file in the Files collection.

    To improve performance of future searches (after 1000's of pic files get loaded) I would think it would be best to associate the pic file which has been loaded in "Files" collect via a create_service call to my record in another collection which describes and other info about the pic. It seems in the database console you can have column of file type and when you click on it - it brings up media manager and you can select the file (which has both the original name and the generated name - which is like it's _id) ,,,the question is how in my code do I retrieve such info after the create_service call ???? and why doesn't the information get returned from the create call???
    I've checked documentation adn satisfaction - but it never really spells out the answer. Please advise .....best solution would be return of file name and new name with complete path (for future display of pic). Also it seems when I try to create the new object in the other collection and fill in the file type - it doesn't work with just one name (whether it be original or new name) do I have to supply both????

    Thanks for your attention ...
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • The fileupload service returns exactly the filename and the URL to that file. Please see the screenshot of it:
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • Maybe something changed .... the first suggestion (Upload Camera Pic to DB) uses calls to FIleDB_files_create_service .... if I look at recent suggestions (and your response about fileupload - it seems I should be calling FIleDB_files_upload_Service?

    So I tried to converge the 2 ideas .... simply I have a button to take a camera picture, the results are put into scope.im_pic (and I can see it in the image component.

    Here's my code to try to send that picture to my DB ...

    var requestData = {};
    var requestData = Apperyio.EntityAPI('FileDB__files_upload_service.request');
    requestData.headers = Apperyio.EntityAPI('FileDB__files_upload_service.request.headers', undefined, true);
    requestData.headers['Content-Type'] = "image/jpeg";
    requestData.params = {};
    requestData.params.filename = $scope.place_info.name + "item" + $scope.thing_info.title + "photo.jpg";
    requestData.data = Helper.dataURItoBlob($scope.im_pic);

    // read more about using rest services: https://links.appery.io/ve-snippet-rest
    Apperyio.get("FileDB__files_upload_service")(requestData).then(
    function(success) { // success callback
    /*CLICK TO EDIT MAPPING*/

    alert("AfterFileDB upload call..checking success data ..");
    alert(success.filename + " and .." + success.fileurl);

    I get my alert msg from the function(error) ... what parameter(s) am I messing up??
    and when successful am I referencing the results correctly to see the filename and fileurl?

    Thanks for putting up with me .....
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • Please add the JS code below to the function success to see the full response:
    alert(JSON.stringify(success));
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated