title: how to upload images as a signed request with Cloudinary/Angular(5) and Ionic(3)?
body: <p>Cloudinary have a <code>basic.js</code> example which I'm trying to implement in my Ionic/Angular project.</p>
  
  <p>Problem is, for some reason the Ionic version of "@cloudinary/angular-5.x" always uses the <code>unsigned_upload</code> feature, and I want to be able to transform it <strong>before</strong> I upload, same as the Cloudinary example.</p>
  
  <p>Transformation requires <code>signed</code> upload not <code>unsigned</code> upload.</p>
  
  <p>Since there are many versions out-there, and most of the examples don't work, mine is:</p>
  
  <pre><code>Ionic: 3
  Angular: 5.2.11
  
  Cloudinary: 
  "cloudinary": "^1.11.0",
  "cloudinary-core": "^2.5.0",
  "@cloudinary/angular-5.x": "^1.0.2"
  </code></pre>
  
  <h3>basic.js</h3>
  
  <p>My configuration is inside the .env variable with the structure mentioned in <code>cloudinary.config</code> </p>
  
  <pre><code>var dotenv = require('dotenv');
  dotenv.load();
  
  var fs = require('fs');
  var cloudinary = require('cloudinary').v2;
  
  // set your env variable CLOUDINARY_URL or set the following configuration
  /*cloudinary.config({
    cloud_name: '',
    api_key: '',
    api_secret: ''
  });*/
  
  var url = "http://res.cloudinary.com/demo/image/upload/couple.jpg"
  cloudinary.uploader.upload(url,{"tags":"basic_sample","width":500,"height":500,"crop":"fit","effect":"saturation:-70"} ,
    function(err,image){
     if (err){ 
      console.warn(err);
      return;
     }
  
     console.log("* "+image.public_id);
     console.log("* "+image.url);
  
     // Transform image
     cloudinary.url(image.public_id, 
      {
        width: 200,
        height: 150,
        crop: "fill",
        gravity: "face",
        radius: 10,
        effect:"sepia",
        format: "jpg"
        }
      ));
    });
  </code></pre>
  
  <p>I'm able with the following code to upload it <em>unsigned</em></p>
  
  <h3>Ionic unsigned request</h3>
  
  <pre><code>ngOnInit(): void {
    const uploaderOptions: FileUploaderOptions = {
      url: 'https://api.cloudinary.com/v1_1/' + this.cloudinary.config().cloud_name + '/upload', 
      autoUpload: false,
      isHTML5: true,
      removeAfterUpload: true,
      headers: [{        
          name: 'X-Requested-With',
          value: 'XMLHttpRequest'
      }]
    };
  
    this.uploader = new FileUploader(uploaderOptions);
  
    // Add custom tag for displaying the uploaded photo in the list
    this.uploader.onBuildItemForm = (fileItem: any, form: FormData): any =&gt; {
      form.append('upload_preset', this.cloudinary.config().upload_preset);
      form.append('public_id', 'subfolder/' + this.UUID);
      form.append('file', fileItem);
  
      fileItem.withCredentials = false;
      return { fileItem, form };
    };
  
  }
  </code></pre>
  
  <h3>Ionic signed request</h3>
  
  <p>So in order to transform my images, I need to use parameter called <code>eager</code></p>
  
  <p><code>form.append('eager', 'c_crop,w_191,h_145,g_face,z_0.7');</code></p>
  
  <p>But then I get the below error</p>
  
  <pre><code>Upload completed with status code 400
   {
    "message": "Eager parameter is not allowed when using unsigned upload.
  Only upload_preset,callback,public_id,folder,tags,context,face_coordinates,custom_coordinates,source upload parameters are allowed.
      } 
  </code></pre>
  
  <p>When I remove the preset to "tell" it that maybe this is a signed request, I get the above error + <code>Upload preset must be specified when using unsigned upload</code></p>
  
  <p>So I'm not sure how I'm suppose to "tell" it - use signed request, and take my configuration from <code>.env</code> or <code>CloudinaryModule.forRoot({Cloudinary}, cloudinaryConfiguration as CloudinaryConfiguration),</code> etc ...</p>