1. App Creation Studio
  2. Fragen
+1
Beantwortet

Best way to upload an photo from Camera Roll to a server?

thillsman vor 11 Jahren • aktualisiert von icahill (Administrator) vor 11 Jahren • 3
Ok, I've got a challenge for you. I'd like to upload photos (and possibly videos) from the Camera Roll to a server. This has a couple of components, but I'm hoping you can lead me in the right direction.

First of all, I know how to write PHP that asks for, receives, and stores a file. Simple, short instructions here: http://www.w3schools.com/php/php_file...

However, I'm not exactly sure how to do this from WIRE. I have an inkling of a sliver of an idea that it has something to do with a HTTP request (which we solved over here: https://getsatisfaction.com/rarewire/... ), but other than that, I'm clueless.

I also know that iOS (beginning with iOS 6, maybe?) allows you to upload files through web views, but I haven't tried building that out myself (I've just uploaded images to other sites). That could be a workaround.

So, any idea how to make that happen? Thanks!
icahill (Administrator) vor 11 Jahren
Well for starters, to access your camera roll assets. Here is an example wire:

https://studio.rarewire.com/wordpress...

You then could opt to use the download tag to store it inside the app and then upload the asset to your server.
thillsman vor 11 Jahren
Ok, cool. So the process would be 1) access camera roll as datasource (and display it for the user), 2) download a selected image into the app, 3) upload image to server (any tips on how to do this?), 4) profit.

This is my first time dealing with the camera roll datasource. What properties exist for it? Obviously "dataSourceIndex". From the example, I see there's "size" and "url". Any other hidden properties? A content type (photo/video), perhaps? Also, do you happen to know what the native thumbnail size is? (I copied the camera roll sample code and it's distorting the thumbnails hardcore, so I'm just wondering what their native size is.)

I'll type up a simple app and start playing with steps 1 and 2. They should be pretty easy-peasy.

Thanks!
icahill (Administrator) vor 11 Jahren
Possibly the most efficient approach here would be to base64 encode the image after saving it to the app using the base64source object property found on the image tag. Then you can upload that (a variable will do) via postContent to your server.

Something similar to this:

<wire>
<datasources>
<!-- add http header values the service needs here -->
<httpheader name="jsonheader" Accept="text/json"/>
<datasource name="validation" httpheader="jsonheader" source="" query="/" providertype="json" querycomplete="validate" httpmethod="post"/>
</datasources>
<main>
<!-- this text template contains the content you want to send to the service add [var:xxx] for variables etc -->
<texttemplate name="expired-receipt"><![CDATA[ {"format_version":1,"type":"email","email":{"to_email":"TO_ADDRESS","to_name":"TO_NAME","from_email":"FROM_EMAIL","from_name":"FROM_NAME","subject":"EMAIL_SUBJECT","body_html":"BODY_HTML_VERSION","body_text":"BODY_TEXT_VERSION"}}]]></texttemplate>

<panel name="body" height="50%" width="50%" background="#ff0000" valign="center" align="center">
</panel>
</main>
<actions>
<action name="start" oninit="yes">
<sync>
<!-- assign the value of the text template to the postContent property of the datasource to be sent to the server -->
<assign property="datasource:validation.postContent" value="[template:expired-receipt.content]" />
<!-- update the source of the ds to initiate the request -->
<assign property="datasource:validation.source" value="http://serverurl" />
</sync>
</action>
<action name="validate">
<alert message="[datasource:validation.1.valueinjson]"/>
</action>
</actions>
</wire>


Once your server receives the data, decode the b64 on that side
and store the image.

If you still have questions you are welcome to come into the office and have someone talk through it further.

Thanks.

Customer support service by UserEcho