Direct upload from mobile app

Comments

3 comments

  • Avatar
    Daniel Mendoza

    @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
  • Avatar
    Thomas Ziolkowski

    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
  • Avatar
    Raya Straus

    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

Please sign in to leave a comment.