Upload API via Ajax

Archives rtMedia
#1

I’m attempting to create a process whereby users can post images from their phones to their account. I have a mobile app that handles this process. Looking at the Upload API, I cannot determine how to get the uploading process to work. My current method is to use PHP to get the file from the user (which is successful) and then pass it to the upload endpoint via Curl. My Curl looks like this:


  
$url = 'http://shareatalent.com/members/Justyn/upload';
  
$vars = array(
  
"description" 	=> "got me a file!",
  
"title"		=> "here's the title!",
  
"media_author"	=> 1,
  
"files"		=> $the_file,
  
"context"	=> "activity",
  
"context_id"	=> 1,
  
"mode"		=> "file_upload",
  
"file_contents"	=> '@'.$the_file
  
);
  

  
$ch = curl_init();
  
curl_setopt($ch, CURLOPT_URL, $url);
  
curl_setopt( $ch, CURLOPT_POST, 1);
  
curl_setopt( $ch, CURLOPT_POSTFIELDS, $vars);
  

  
$response = curl_exec( $ch );
  
curl_close($ch);
  

  
$response = curl_exec( $ch );

Am I approaching this the right way? I’m not getting the uploaded file via this method.

Thanks much!

Justyn

#2

@jphornor

We are already working on JSON API.

We pushed changes to https://github.com/rtCamp/rtMedia/tree/api . But its unstable branch as of now.

If you can wait till Monday, we will share documentation also with you and hopefully release next rtMedia version with API included.

#3

Absolutely! And once I’ve successfully implemented, I’ll be happy to share my code with the community.

Thanks much!
Justyn

#4

@jphornor

We have updated the code here:
https://github.com/rtCamp/rtMedia/tree/api

And here is the documentation link for same:
https://rtcamp.com/rtmedia/docs/developer/json-api/

API development is still in progress, it would be merged in rtMedia future release.

Also, I would suggest you to start development for your application and feel free to contact us if you have any suggestions or issues.

#5

Excellent! I’ll start digging into this. Thanks, Umesh!

#6

I’m getting an “invalid token” error. How do we generate the necessary tokens? If it’s a nonce function, just point me in the right direction and I’ll figure it out.

Thanks!

#7

To add a little more info, when my URL is mysite.com/wp-admin-admin-ajax.php, I get the following response:
{“status”:“FALSE”,“status_code”:600003,“message”:“token invalid”,“data”:false}

I also tested with mysite.com/upload and got the following:
{“media_id”:null,“activity_id”:-1,“redirect_url”:"",“permalink”:null,“cover_art”:null}

#8

@jphornor please user wp-login https://rtcamp.com/rtmedia/docs/developer/json-api/#post-wplogin method to get token.

You can use token for subsequent calls.

#9

Got it. I now have a token. I’m using the following variable for my JSON call:

$vars = array(  
"action" 			=> "rtmedia_api",	  
"method"			=> "add_rtmedia_comment",  
"title"				=> "here's the title!",  
"rtmedia_file"		=> $the_file,  
"context"			=> "profile",  
"token"				=> $token  
);

I get the following response:
{“status”:“FALSE”,“status_code”:600005,“message”:“media/activity id missing”,“data”:false}

I’m getting close. Once I have this implemented, I’ll share my entire solution for the community as I’m sure this will be a major selling point for RT Media once the documentation is up and ready.

#10

@jphornor

Sorry, It was a typo on our end.
The method required for uploading media is rtmedia_upload_media, in place of add_rtmedia_comment, please use rtmedia_upload_media.

I’ve updated the same in documentation.

Feel free to contact us for further help. :slight_smile:

#11

I am able to successfully upload the file and get the title and description as expected. Only concern at this point is that the file is stored in:
mysite.com/wp-content/uploads/rtMedia/users/0/2014/01/

Instead of:
mysite.com/wp-content/uploads/rtMedia/users/<user_id>/2014/01/

I’ve used the media_author and context_id with no luck. Either I’m missing something, this is a bug, or this is the expected behavior. If it’s the expected behavior, may I request you provide the option for putting the file into the folder of the user’s ID?

#12

@jphornor

There is no option for setting media_author for rtmedia_upload_media method, by default only current loggedin user is allowed to upload new media.

For new media uploads generated path is
example.com/wp-content/uploads/rtMedia/users/userid/2014/01/,

where userid is set against token you have provided in upload request.

However, there was a issue setting userid in path, it has been fixed you can pull latest code from https://github.com/rtCamp/rtMedia/tree/api.

Thanks,

#13

Update: JSON API is merged in core with rtMedia 3.6 release - https://rtcamp.com/rtmedia-3-6-json-api/

#14

Excellent! Looking forward to digging into this update.

Thanks for the update, Rahul

#15

@jphornor I hope you will find this useful. As we have no plan to develop any mobile apps, if you wish to promote/monetize your mobile app, please let us know.

We will be happy to review it and promote it to rtMedia userbase who may find it useful. :-)

#16

Rahul, So far so good! I ran into an error code 140006 while using the the media upload API. My process looks like this: 1. Get a token (no problems) 2. Get an image file from the user (no problems) 3. Post using jQuery's .post (seems to work) 4. Getting an error: {"status":"FALSE","status_code":140006,"message":"image type missing","data":false}

My post data looks like this: var uploadData = { action : "rtmedia_api", method : "rtmedia_upload_media", token : uploadToken, // sat as a var earlier rtmedia_file : imageData, // a URI to an image context : "profile", } jQuery.post(uploadURL,uploadData,function(u){ console.log(u); }); Console.log outputs the error above.

How do I pass the file type to the upload API?

Thanks! Justyn

#17

@jphornor

There must be a confusion here, JSON API allows you to upload media either by file input or Base64 data, URL upload is not supported.

Out of the two methods, upload by file input is preferable, in the other method you need to pass Base64 encoded string with image type and title for the file being uploaded.

In case you have further doubts, feel free to write to us.

#18

Hey Umesh, Got it. I've converted to Base64 (as this is a mobile app, it gives me more flexibility), but can't get the image to display. Here's my object:

var uploadData = { action: "rtmedia_api" context: "profile" method: "rtmedia_upload_media" rtmedia_file: "data:image/jpeg;base64,/9j/4AA..." //truncated for simplicity title: "testing1" token: myToken } The response via the API is: {"status":"TRUE","status_code":140004,"message":"media updated","data":false} The result on the site is a registered image that shows up in the media, but the image is blank.

Thanks for your patience! Once I have a functional version, I'll push my code to you all so you can share :)

Justyn

Attachment Link(s):

https://rtcamp.com/wp-content/uploads/rtMedia/topics/57297/2014/02/blank-image.jpg

#19

@jphornor

For Base64 upload, you need to just pass the string, it does not requires all the overheads like data:image/jpeg;base64,, and there is a fix for Base64 upload, it will be updated in next release. In case you need it urgently, you can manually download plugin from here -> https://github.com/rtCamp/rtMedia

Base64 upload for API is still under enhanceent, your suggestions are welcome.

#20

I have stripped the header/overhead information out of the string and am still getting a blank image after a successful upload.

Here’s my function with truncated base64 image:

function sendFiletoRTMedia(){	  
	var uploadData = {  
		action 		: "rtmedia_api",  
		method		: "rtmedia_upload_media",  
		token 		: Token, // called in previous function  
		rtmedia_file 	: '/9j/4AAQSkZJRgABA...' // truncated  
		title 		: "test from console",  
		context 	: "profile",  
    		image_type      : "image/jpg"  
	}  
jQuery.post('http://www.example.com/wp-admin/admin-ajax.php',uploadData,function(u){  
		console.log(u);  
		})  
}// sendFiletoRTMedia

Console outputs:
{“status”:“TRUE”,“status_code”:140004,“message”:“media updated”,“data”:false}

In BuddyPress the image name shows up in the activity feed (“test from console”), but the image is blank. When I inspect element in Chrome, the URL src is blank.

Thoughts?