Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-23422] Windows: Submission of files/images is broken on Windows 8.1 & Windows 10

GitHub Issuen/a
TypeBug
PriorityCritical
StatusClosed
ResolutionFixed
Resolution Date2016-05-31T14:17:48.000+0000
Affected Version/sn/a
Fix Version/sRelease 5.4.0
ComponentsWindows
Labelstitanium, windows, windows8.1
ReporterDee Clawson
AssigneeChristopher Williams
Created2016-05-12T21:06:06.000+0000
Updated2016-06-29T22:05:37.000+0000

Description

Problem

When using Ti.Network.createHTTPclient to submit files Windows sends non-nonsensical repeating combination of "%00%00%00%00%00%00%00%00%00%" for the file instead of blob/base64 file. Other values appear to be corrupted as well. iOS & Android perform as expected and submit a parse-able muli-part form data. This issue is stopping us from going live on windows...

Test Case

var url = 'https://wul06jzgd0yn.runscope.net'; //use favorite inspector here...

function go() {
    Titanium.Media.showCamera({

        mediaTypes: [Ti.Media.MEDIA_TYPE_PHOTO],
        success: function(event) {

            if (event.mediaType == Ti.Media.MEDIA_TYPE_PHOTO) {

                var newId = new Date().getTime();
                var newName = 'HEY_YOU_GUYS_WAIT_FOR_ME-' + newId;
                var fileName = newName + '.jpg';
                var imageFile = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory, fileName);
                imageFile.write(event.media);
                console.log(imageFile.nativePath);

                var client = Ti.Network.createHTTPClient({
                    onload: function(e) {
                        alert('success');
                    },
                    onerror: function(err) {
                        alert('error');
                    }
                });

                client.open("POST", url);

                var f = {
                    name: newName,
                    attachment: imageFile.read(imageFile)
                };
                client.send(f);
            }

        },
        cancel: function() {
            console.log('camera cancel');
        },
        error: function(error) {
            console.log('camera error');
        }

    });

}

go();

Discussions

Expect windows to perform as iOS & Android do.

Comments

  1. Nazmus Salahin 2016-05-15

    Hello, Thanks for reporting. We really appreciate your contribution. However I am not actually able to reproduce this issue yet. It will be appreciated if you provide full test code and steps also explain the issue a bit more. Thanks in advance
  2. Dee Clawson 2016-05-15

    The issue is well defined, when submitting a file it is not submitting a base64 encoded file it is submitting something and unknown encoding. Is it hex? Why? It's not base64. I have no idea what it is submitting. The full code to replicate the issue is attached. Please review the code under Test Case titled app.js. The code runs on Windows, iOS & Android without error and should be beyond simple to replicate the problem. 1. It launches the camera. 2. It takes a picture and submit's it to a web service of your choosing. You will need to define a web service inspector of you choosing at the beginning of the code. Our enterprise uses runscope but there are free ones like requestb.in
  3. Dee Clawson 2016-05-16

    The code will alert success that it has successfully called the service, please don't confuse that with it actually submitting that is coherent. You will need to inspect the call to see that is broken. I suppose you could use something like Charles or Fiddler to proxy the call and inspect it as well.
  4. Nazmus Salahin 2016-05-17

    Hello, I am able to reproduce this issue. *Steps:* 1. Create a default classic project for windows and android. 2. Replace code in app.js with following. 
       var url = 'http://requestb.in/v0rea5v0';
   //use favorite inspector here...
   
   
   function go() {
   
   	Titanium.Media.openPhotoGallery({
   
   		mediaTypes : [Ti.Media.MEDIA_TYPE_PHOTO],
   
   		success : function(event) {
   
   			if (event.mediaType == Ti.Media.MEDIA_TYPE_PHOTO) {
   
   				var newId = new Date().getTime();
   
   				var newName = 'HEY_YOU_GUYS_WAIT_FOR_ME-' + newId;
   
   				var fileName = newName + '.jpg';
   
   				var imageFile = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory, fileName);
   
   				imageFile.write(event.media);
   
   				console.log(imageFile.nativePath);
   
   				var client = Ti.Network.createHTTPClient({
   
   					onload : function(e) {
   			
   						alert('success');
   					
   
   					},
   
   					onerror : function(err) {
   
   						alert('error');
   
   					}
   				});
   
   				client.open("POST", url);
   
   				var f = {
   
   					name : newName,
   
   					attachment : imageFile.read(imageFile)
   
   				};
   
   				client.send(f);
   
   			}
   
   		},
   
   		cancel : function() {
   
   			console.log('camera cancel');
   
   		},
   
   		error : function(error) {
   
   			console.log(JSON.stringify(error));
   
   		}
   	});
   
   }
   
   
   
   
   
   
   Titanium.UI.setBackgroundColor('#fff');
   
   var win = Titanium.UI.createWindow({
   	title : 'win',
   	backgroundColor : '#fff'
   });
   
   var label = Ti.UI.createLabel({
     color:'blue',
     text:'Take Photo',
     width: 300, height: 200
   });
   
   label.addEventListener('click',function(e){
   	go();
   });
   
   //win.addEventListener('open',function(e){
   //	go();
   //});
   win.add(label);
   
   win.open();
    3. Add following portion in tiapp.xml. 
       <windows>
       	<manifest>
   	        <Capabilities>
   	        	<Capability Name="internetClient"/>
   	        	<Capability Name="picturesLibrary" />
   	        	<DeviceCapability Name="microphone" />
   	            <DeviceCapability Name="webcam"/>
   	        </Capabilities>
            </manifest>
       </windows>
    4. Build and run. 5. Click "Take Photo" >> Select a photo from gallery. 6. Wait for the photo to be uploaded. 7. After success alert see data in server. For android in http://requestb.in uploaded data is well recognized for name and raw body. *name:* 
       name: HEY_YOU_GUYS_WAIT_FOR_ME-1463482381085
    *raw body:* 
       --nlHtuDQAML8XdKemqPHuELR9izAPAfsUgfD9tNU
   Content-Disposition: form-data; name="name"
   Content-Transfer-Encoding: 8bit
   
   HEY_YOU_GUYS_WAIT_FOR_ME-1463482381085
   --nlHtuDQAML8XdKemqPHuELR9izAPAfsUgfD9tNU
   Content-Disposition: form-data; name="attachment"; filename="tixhr-2077574746.jpeg"
   Content-Type: image/jpeg
   Content-Transfer-Encoding: binary
   (--data here--)
    For Windows name is corrupted and raw body is not well recognised. *name:* 
       name: HPu$Pu�� Ou
    *raw body:* 
       --e3ff3ff5-7d40-4f5e-9321-7086a4cb55de
   Content-Length: 2417376
   Content-Disposition: form-data; name="attachment"
    Thanks *Environment*: *Device info:* Nexus7 (android 6.0.1), Microsoft Lumia 640(Windows Phone 8.1) *Node.js Version:* 0.12.7 *npm Version:* 2.11.3 *Titanium SDKs:* 5.3.0.v20160404105211 *Java Development Kit Version:* 1.8.0_73 *Titanium CLI Version:* 5.0.5 *Appcelerator CLI Version:* 5.2.2 *Appcelerator Studio:* 4.5.0
  5. Dee Clawson 2016-05-17

    Link to Appcelerator documentation on file uploads and downloads with similar example code. http://docs.appcelerator.com/platform/latest/#!/guide/File_Uploads_and_Downloads
  6. Christopher Williams 2016-05-23

    https://github.com/appcelerator/titanium_mobile_windows/pull/713
  7. Ewan Harris 2016-06-29

    Verified using: Windows 10 Pro Ti SDK: 5.4.0.v20160629063537 Appc NPM: 4.2.7-2 Appc CLI: 5.4.0-23 Appc Studio: 4.7.0.201606220541 Lumia 930: 10.0 Lumia 520: 8.1 Images can now be submitted on Windows and the data sent matches that of an application built to Android. Closing ticket

JSON Source