Front-end of POSTing to local file storage

REST API
24

I’ll look at that, just out of curiosity , what happens if you use application/octet-stream as the content-type?

25

Created file is the same as with image/jpeg - base64 string in quotes as content of the file on dsp.

26

I’m working on this, should have a new SDK out this week.

27

Thank you, I will be waiting for it.

28

Pull the latest from https://github.com/dreamfactorysoftware/android-sdk , it has sample code for doing file uploading, viewing, deleting, etc.

29

Hello,

We have a image upload going using the createFile api and PhoneGap. What we do is use the Camera Plugin to take a photo or pick a file from Gallery. We use the plugin to resize the image and return the image base64 encoded. We put the base64 data on the body of the createFile JSON. To display we use getFile and feed this to the image src using javascript. Note that you have to remove quotes added to the base64 data when it was uploaded by createFile. You can check out the app on Google Play. https://play.google.com/store/apps/details?id=com.systemacorp.dormfinder

1 Like
30

Nice! Thanks for sharing.

32

Hello tborja,

I try to do the same thing with angularjs and cordova. but it’s not working. could I see please your code sample. my code don’t work:

  var filex = 'iVBORw0KGgoAAAANSUhEUgAAAZYAAAGWCAIAAADUmjLBAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA/9JREFUeNrs1DERADAIALFSFShnRio24C6R8MNHdj2Am74EgIUBWBiAhQEWBmBhABYGYGGAhQFYGICFARYGYGEAFgZgYYCFAVgYgIUBWBhgYQAWBmBhgIUBWBiAhQFYGGBhABYGYGEAFgZYGICFAVgYYGEAFgZgYQAWBlgYgIUBWBhgYQAWBmBhABYGWBiAhQFYGICFARYGYGEAFgZYGICFAVgYgIUBFgZgYQAWBmBhgIUBWBiAhQEWBmBhABYGYGGAhQFYGICFAVgYYGEAFgZgYYCFAVgYgIUBWBhgYQAWBmBhgIUBWBiAhQFYGGBhABYGYGEAFgZYGICFAVgYYGEAFgZgYQAWBlgYgIUBWBiAhQEWBmBhABYGWBiAhQFYGICFARYGYGEAFgZgYYCFAVgYgIUBFgZgYQAWBmBhgIUBWBiAhQEWBmBhABYGYGGAhQFYGICFAVgYYGEAFgZgYYCFAVgYgIUBWBhgYQAWBmBhABYGWBiAhQFYGGBhABYGYGEAFgZYGICFAVgYYGEAFgZgYQAWBlgYgIUBWBiAhQEWBmBhABYGWBiAhQFYGICFARYGYGEAFgZgYYCFAVgYgIUBFgZgYQAWBmBhgIUBWBiAhQFYGGBhABYGYGGAhQFYGICFAVgYYGEAFgZgYYCFAVgYgIUBWBhgYQAWBmBhABYGWBiAhQFYGGBhABYGYGEAFgZYGICFAVgYgIUBFgZgYQAWBlgYgIUBWBiAhQEWBmBhABYGYGGAhQFYGICFARYGYGEAFgZgYYCFAVgYgIUBFgZgYQAWBmBhgIUBWBiAhQFYGGBhABYGYGGAhQFYGICFAVgYYGEAFgZgYQAWBlgYgIUBWBhgYQAWBmBhABYGWBiAhQFYGGBhEgAWBmBhABYGWBiAhQFYGICFARYGYGEAFgZYGICFAVgYgIUBFgZgYQAWBmBhgIUBWBiAhQEWBmBhABYGYGGAhQFYGICFAVgYYGEAFgZgYYCFAVgYgIUBWBhgYQAWBmBhgIUBWBiAhQFYGGBhABYGYGEAFgZYGICFAVgYYGEAFgZgYQAWBlgYgIUBWBiAhQEWBmBhABYGWBiAhQFYGICFARYGYGEAFgZgYYCFAVgYgIUBFgZgYQAWBmBhgIUBWBiAhQEWBmBhABYGYGGAhQFYGICFAVgYYGEAFgZgYYCFAVgYgIUBWBhgYQAWBmBhABYGWBiAhQFYGGBhABYGYGEAFgZYGICFAVgYgIUBFgZgYQAWBlgYgIUBWBiAhQEWBmBhABYGWBiAhQFYGICFARYGYGEAFgZgYYCFAVgYgIUBFgZgYQAWBmBhgIUBWBiAhQFYGGBhABYGYGGAhQFYGICFAVgYYGEAm4wAAwAk4wR6OcNlvgAAAABJRU5ErkJggg==';

  $http.post(Dreamfactory.URL + Dreamfactory.FILES + 'assets/img2/1.png', window.atob(filex), {
    transformRequest: angular.identity,
    headers: {'Content-Type': 'image/png'/*, 'x-file-name': '1.png'*/}
  })
  .success(function(data){
    alert('gut' + JSON.stringify(data));
  })
  .error(function(data){
    alert('schlecht:' + JSON.stringify(data));
  });
33

We take a photo using PhoneGap camera plugin and save photo in localstorage. The key is to base64 it at this point.

   navigator.camera.getPicture(function (imageData) {
    assembleDate();

    document.getElementById('dormPhoto').src = "data:image/jpeg;base64," + imageData;
    localStorage.dormPhoto = "data:image/jpeg;base64," + imageData;
    $('#dormPhoto').css({
        height: "auto",
        width: "auto"
    });
}, function (message) {
    //        alert(message);
}, {
    quality: 75,
    destinationType: Camera.DestinationType.DATA_URL,
    sourceType: Camera.PictureSourceType.CAMERA,
    targetWidth: 320,
    targetHeight: 240,
    saveToPhotoAlbum: true
});

You can then use the localstorage content for the body: of the CreateFile api

            window.df.apis.files.createFile({
                "container": "dormfinder",
                "file_path": filename,
                "body": localStorage.dormPhoto
            },
            function (response) {
                if (App.testing_on_desktop) {
                    alert("Your Dorm Successfully Submitted.");
                } else {
                    navigator.notification.alert('Your Dorm Successfully Submitted.', function () {}, 'Success', 'Continue');
                }
                $('#addMapPage').removeClass('ui-disabled');
                goTo("#homePage");
                hideLoader();
            },
            function (response) {
                $('#addMapPage').removeClass('ui-disabled');
                alert(window.app.getErrorString(response));
                hideLoader();
            }
        );

I hope this is helpful.