topic using dropzone.js in Software Archive

using dropzone.js

Shawn_A_ — Fri, 27 Jan 2017 23:27:27 GMT

In my app, I'm using http://www.dropzonejs.com/ to choose a file from the phone's gallery and upload it.

It works perfectly in the app simulator and in the Intel App Preview app on my phone.

BUT, when I build the APK and install it, and try to upload a picture, I get:

"All apps associated with this action have been turned off, blocked, or are not installed".

Do I need to do something else to make it work?

Does your phone grants the

Alex_Hang — Sat, 28 Jan 2017 07:39:00 GMT

Does your phone grants the permission to access the local storage?

Do you have installed any encryption apps on your phone that protects the files from being accessed without a password?

I'm assuming somewhere in the

Shawn_A_ — Sat, 28 Jan 2017 15:16:47 GMT

I'm assuming somewhere in the app I need to specify or ask for permission to the camera or photo gallery of the device.

I don't know how to do that.

Does your phone grants the permission to access the local storage? When the APK is installed, it doesn't ask for any permissions.

Do you have installed any encryption apps on your phone that protects the files from being accessed without a password? No

thanks

To ask for a permission you

Alex_Hang — Sat, 28 Jan 2017 19:34:00 GMT

To ask for a permission you need to edit the Android Manifest file, but this is not required when you build Cordova apps, because they use plugins for accessing device native resources.

You probably need a plugin for accessing the local storage( I think it's a core plugin), of find a specific third-party plugin from DropzoneJS, If it exists.

So far, I haven't used

Shawn_A_ — Mon, 30 Jan 2017 17:07:49 GMT

So far, I haven't used Cordova at all, or included it in my plain HTML app.

I was hoping to not have to do that.

Is using cordova the only practical way?

I don't know which file is my android manifest file. There isn't one with "manifest" in the name that I can see in my app folder.

Shawn -- in most cases you

PaulF_IntelCorp — Mon, 30 Jan 2017 20:22:33 GMT

Shawn -- in most cases you won't be able to access local resources without using plugins. The photos taken by the camera are managed by the device and the OEM; in general, those pictures are available to other apps to view, but they cannot rename, move or otherwise modify them without permission. That is why you'll see most apps have to make a copy and then save that copy in an app-specific location on the device. By default, your app does not have access to the full file-system on the device, only to that space which belongs to your app and, if it is available, to some external storage.

You will need to convert your app into an "HTML5+Cordova" app type (you can "upgrade" the project on the Projects tab), and you'll likely need to use the "file" and "file-transfer" plugins. Follow the links to the plugin documentation for details on how to use the APIs those plugins provide.

Thanks Paul, that makes sense

Shawn_A_ — Mon, 30 Jan 2017 20:40:27 GMT

Thanks Paul, that makes sense. I have successfully upgrade to 'HTML5+Cordova".

Now I will pursue the file plug in.

thanks

I've converted to Cordova,

Shawn_A_ — Wed, 01 Feb 2017 19:31:00 GMT

I've converted to Cordova, and have implemented navigator.camera function.

    // choose picture
    $(document).on(bindings,"#addPictures",function(event){               
        navigator.camera.getPicture(onGetPicSuccess, onGetPicFail, { 
            quality: 50,
            destinationType: destinationType.FILE_URI,
            sourceType: pictureSource.PHOTOLIBRARY 
        });
    });

When the user taps the #addPictures DIV, they are prompted to choose a picture.

What I want to do is upload that picture to a remote server.

I also need to add 2 name/value pairs to the string.

// success in getting picture from camera
function onGetPicSuccess(imageData){        
    var theSrc = "data:image/jpeg;base64," + imageData;
    
    console.log(theSrc);
    
    // upload pic

    var tkn=getToken();
    var ticketNo=$("#ticketList").val();
    var dataString=theSrc+"&dzToken="+tkn+"&dzTicket="+ticketNo;

    console.log(dataString);
    
     spinner(1);    

     $.ajax({    
            url: "https://myDomain.com/cgi/mFileUpload.exe",    
            dataType: "json",		
            data: dataString,
            error: ajaxError, 	
            success: function(json){   	 	
                
                if(json.error !== "0"){
                    spinner(0);
                    alertify.alert("ERROR "+json.error);
                    return;
                }	
                
                $("#picTA").show();
                reloadImages();                     
    
                spinner(0);
                
            }
     });        

}

The problem is that the data I'm sending to the server is not what I'm expecting. I want HTML FORM type data, like you'd get if uploading a file from an HTML form with extra inputs.

How do I get the data, specifically the picture data, into a HTML FORM format?

This might help > https:/

PaulF_IntelCorp — Wed, 01 Feb 2017 20:02:44 GMT

This might help > https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript#Dealing_with_binary_data < you'll have to get a copy of the picture file that you can operate on locally within your app. And note that the article is written with the assumption that you are running in a browser -- you are NOT running in a browser, you are running in a "webview" which has no host and has no domain, it is an independent stand-along web app.

I think that is very close to

Shawn_A_ — Wed, 01 Feb 2017 21:52:08 GMT

I think that is very close to what I need, but I have some confusion.

When I successfully choose a file, the string (object?) imageData gets returned.

        navigator.camera.getPicture(onGetPicSuccess, onGetPicFail, { 
            quality: 50,
            destinationType: destinationType.FILE_URI,
            sourceType: pictureSource.PHOTOLIBRARY 
        });

to this function

// success in getting picture from camera
function onGetPicSuccess(imageData){        
    // imageData looks like   blob:http%3A//localhost%3A57492/ac65226c-5698-4345-b301-81205b1403fa 
    
    var theSrc = "data:image/jpeg;base64," + imageData;
    
... more stuff here

It looks like imageData is a local link to the image file? If so how do I grab that entire file?

There are many posts

PaulF_IntelCorp — Wed, 01 Feb 2017 22:01:59 GMT

There are many posts regarding this subject, I suggest you search the Internet for something like "get copy of image file from camera app in cordova phonegap" and take a look at what others have done.