Software Archive
Read-only legacy content
17061 Discussions

using dropzone.js

Shawn_A_
Beginner
1,178 Views

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?
 

 

 

0 Kudos
10 Replies
Alex_Hang
New Contributor II
1,178 Views

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?   

 

0 Kudos
Shawn_A_
Beginner
1,178 Views

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

 

0 Kudos
Alex_Hang
New Contributor II
1,178 Views

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.

0 Kudos
Shawn_A_
Beginner
1,178 Views

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. 

 

0 Kudos
PaulF_IntelCorp
Employee
1,178 Views

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.

0 Kudos
Shawn_A_
Beginner
1,178 Views

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

Now I will pursue the file plug in.

thanks

0 Kudos
Shawn_A_
Beginner
1,178 Views

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?

 

0 Kudos
PaulF_IntelCorp
Employee
1,178 Views

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.

0 Kudos
Shawn_A_
Beginner
1,178 Views

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?

0 Kudos
PaulF_IntelCorp
Employee
1,178 Views

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.

0 Kudos
Reply