CODEWITHSUNDEEP
angularcloudinary
johntzan
johntzan

Reputation: 323

Cloudinary and Angular2

I am trying to upload to cloudinary with Angular2. I am using this file dropper to do this. https://github.com/ptkach/fileDroppa

I am constantly getting 400 bad requests, with missing parameter - file errors. Has anyone worked with either before or has a better solution to upload to cloudinary?

Relevant code below: 

fileUploaded(success, response, file){
     console.log(file);
       success && console.log("uploaded - awesome", response, file);
       success || console.log("not uploaded - very bad", response, file);
   }

   filesUpdated(files) {
       console.log("Store state updated! Current state: ", files);
   }

   /**
    * CALLBACKS
    */

   /**
    * This method is called before Request happened
    * You can modify xhr confoguration in it
    * requestHeaders for example
    *
    * @param xhr
    */
   beforeRequest(xhr){
     xhr.setRequestHeader("Content-Type","undefined");
     xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
   }

   /**
    * This method allows you to make validation before file is sent
    * You can update fileName for example
    * Or you can return null and file won't be send
    *
    * @param formData
    * @returns formData or null
    */

   beforeFileUpload(formData){

     formData.set('api_key', cloudinaryCreds.api_key);
     formData.set('signature', cloudinaryCreds.signature);
     formData.set('timestamp', cloudinaryCreds.timestamp);

       return formData;
   }

   /**
    * This method is called once your drop or select files
    * You can validate and decline or accept file
    *
    * @param file
    * @returns Boolean
    */
   beforeAddFile(file){
       return true;
   }

And in html: 

 <fileDroppa [dropZoneTemplate]="dropZoneTemplate"
                    [url]="'https://api.cloudinary.com/v1_1/cloud-name/auto/upload'"
                    [autoUpload]="false"
                    [showFilesList]="true"
                    [beforeRequest]="beforeRequest"
                    [beforeFileUpload]="beforeFileUpload"
                    [beforeAddFile]="beforeAddFile"
                    (filesUpdated)="filesUpdated($event)"
                    (fileUploaded)="fileUploaded($event)"
               >
               </fileDroppa>

Upvotes: 0

Views: 762

Answers (1)

Roee Ben-Ari
Roee Ben-Ari

Reputation: 610

UPDATE

Cloudinary has just published an Angular 2.0 library. You can find the sources in the angular_next branch of the Angular Git repo. You can also install it using npm or yarn with the name @cloudinary/angular.

npm install @cloudinary/angular

For more information: http://cloudinary.com/blog/new_angular_sdk_for_image_management_more_than_meets_the_eye

Upvotes: 1

Related Questions