Direct upload from mobile app

Follow

Thomas Ziolkowski

• July 09, 2018 18:34

Dear cloudinary team,

https://cloudinary.com/documentation/node_image_upload#direct_uploading_from_the_browser explains very well how to upload photos directly from browser. And I wonder if there is support for uploading image from mobile app (react native). I found https://www.npmjs.com/package/cloudinary-core but did not see upload support there.

And if it is possible - what should I  specify besides cloud_name when initializing cloudinary on the client side? api_key? Is it safe?

Thank you in advance!

 

0

• 

  Daniel Mendoza

  • July 10, 2018 21:20

  @Thomas,

  React is client-side, the options to do the upload would be through the upload widget or via an http request. We have the following examples using React:

  File upload (http request) - http://jsfiddle.net/gq7e205a/

  Basic Design Upload Widget - http://jsfiddle.net/gevc4ktm/

  And it is okay to include the `cloud_name` and `api_key`; however, never include your `api_secret` :)

  0

  Comment actions Permalink
• 

  Thomas Ziolkowski

  • July 14, 2018 21:09

  Thank you very much for reply Daniel! So I guess only unsigned upload is available on the client side (since no api_secret is provided)

  Is it also possible to update the image (i.e. specify existing public id) from client, using unsigned request? 

  Is it also possible to delete the image (like destroy) from client, using unsigned request? 

   

  0

  Comment actions Permalink
• 

  Raya Straus

  • July 15, 2018 14:12
  • Edited

  Updating an image in an unsigned request is not possible. If you're using the Upload Widget you can set the return delete token to true- For example-

  cloudinary.openUploadWidget({ cloud_name: "<cloud_name>", upload_preset: "<upload_preset>", sources:['local','url','facebook'] ,
  return_delete_token: true }

   

  The delete token can also be returned via the upload preset. In the upload preset settings, under advanced options, set return delete token to true. Then you can upload your image using formdata along with your preset. For example,

  var formdata = new FormData();

  formdata.append('file', file);
  formdata.append('cloud_name', '<cloud_name>');
  formdata.append('resource_type', 'image');
  formdata.append('upload_preset', '<upload_preset>');

  
  var xhr = new XMLHttpRequest();
  xhr.open('POST', "https://api.cloudinary.com/v1_1/<cloud_name>/image/upload",true);

  xhr.onload = function () {
  // do something to response
  console.log(this.responseText);
  };
  
  xhr.send(formdata);   

  Then you can use the token for 10 min to delete the image. For example-  

  deleteFunc = () => {
  var formdata = new FormData();
  formdata.append('token', this.props.deleteToken);
  var xhr = new XMLHttpRequest();
  xhr.open('POST', "https://api.cloudinary.com/v1_1/<cloud_delete>/delete_by_token",true);
  
  xhr.onload = function () {
  // do something to response
  console.log(this.responseText);
  };
  
  xhr.send(formdata);
  }

   

  0

  Comment actions Permalink

Post is closed for comments.