Upload Image to Cloudinary #1143

New Issue

2020-03-04T15:37:38Z

JiahuiChen99 commented

2020-03-04 15:37:38 +00:00

(Migrated from github.com)

I'd like to know how to upload an image to Cloudinary using your plugin - I've no idea on how to achieve it, and ther's no clearifying example around

The image is in a string format and here's the code:

`
uploadProfileImage(image: string, uploaderForm: FileUploader){

const uploaderOptions: FileUploaderOptions = {
  url: `https://api.cloudinary.com/v1_1/${this.cloudinary.config().cloud_name}/upload`,
  // Upload files automatically upon addition to upload queue
  autoUpload: true,
  // Use xhrTransport in favor of iframeTransport
  isHTML5: true,
  // Calculate progress independently for each uploaded file
  removeAfterUpload: true,
  // XHR request headers
  headers: [
    {
      name: 'X-Requested-With',
      value: 'XMLHttpRequest'
    }
  ]
};

const upsertResponse = fileItem => {
  // Check if HTTP request was successful
  if (fileItem.status !== 200) {
    console.log('Upload to cloudinary Failed');
    this.presentToast('Upload to cloudinary Failed');
    console.log(fileItem);
    return false;
  }
  console.log(fileItem);
  console.log(fileItem.data.url);
}

this.uploader = uploaderForm;

this.uploader.onBuildItemForm = (image: any, form: FormData): any => {
  // Add Cloudinary unsigned upload preset to the upload form
  form.append('upload_preset', this.cloudinary.config().upload_preset);

  // Add file to upload
  form.append('file', image);

  // Use default "withCredentials" value for CORS requests
  image.withCredentials = false;
  return { image, form };
};

this.uploader.onAfterAddingFile = (file) => { file.withCredentials = false; };
// Actualizar el modelo al finalizar la carga de un archivo
this.uploader.onCompleteItem = (item: any, response: string, status: number, headers: ParsedResponseHeaders) =>
  upsertResponse(
    {
      file: item.file, status,
      data: JSON.parse(response),
    }
  );
}

async presentToast(text) {
  const toast = await this.toastController.create({
      message: text,
      position: 'bottom',
      duration: 3000
  });
  toast.present();
}

`

I'd like to know how to upload an image to Cloudinary using your plugin - I've no idea on how to achieve it, and ther's no clearifying example around - The image is in a string format and here's the code: ` uploadProfileImage(image: string, uploaderForm: FileUploader){ const uploaderOptions: FileUploaderOptions = { url: `https://api.cloudinary.com/v1_1/${this.cloudinary.config().cloud_name}/upload`, // Upload files automatically upon addition to upload queue autoUpload: true, // Use xhrTransport in favor of iframeTransport isHTML5: true, // Calculate progress independently for each uploaded file removeAfterUpload: true, // XHR request headers headers: [ { name: 'X-Requested-With', value: 'XMLHttpRequest' } ] }; const upsertResponse = fileItem => { // Check if HTTP request was successful if (fileItem.status !== 200) { console.log('Upload to cloudinary Failed'); this.presentToast('Upload to cloudinary Failed'); console.log(fileItem); return false; } console.log(fileItem); console.log(fileItem.data.url); } this.uploader = uploaderForm; this.uploader.onBuildItemForm = (image: any, form: FormData): any => { // Add Cloudinary unsigned upload preset to the upload form form.append('upload_preset', this.cloudinary.config().upload_preset); // Add file to upload form.append('file', image); // Use default "withCredentials" value for CORS requests image.withCredentials = false; return { image, form }; }; this.uploader.onAfterAddingFile = (file) => { file.withCredentials = false; }; // Actualizar el modelo al finalizar la carga de un archivo this.uploader.onCompleteItem = (item: any, response: string, status: number, headers: ParsedResponseHeaders) => upsertResponse( { file: item.file, status, data: JSON.parse(response), } ); } async presentToast(text) { const toast = await this.toastController.create({ message: text, position: 'bottom', duration: 3000 }); toast.present(); } `

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: dc/ng2-file-upload#1143