search

zhanziyang / vue-croppa

A simple straightforward customizable mobile-friendly image cropper for Vue 2.0.
https://zhanziyang.github.io/vue-croppa/
ISC License
967 stars 128 forks source link

Crop Image upload issue... #129

Open rubencool opened 6 years ago

rubencool commented 6 years ago

I had sucessfully crop image by using ( let url = this.cropImage.generateDataUrl()),After cropping Url hold image in based64 format. The issue was in based64 format so how can i directly upload based64 format image to server. so do you have direct function or keyword in your library to upload image directly to server ? if these was case then it would be easier for me.

zhanziyang commented 6 years ago

Use generateBlob instead of generateDataUrl, blob is file object. See the "Upload" example in this page: https://zhanziyang.github.io/vue-croppa/#/demos

rubencool commented 6 years ago

when i tried using blob i got error message..

{"image":["File extension '' is not allowed. Allowed extensions are: 'hdf, webp, cur, ps, rgba, pxr, xpm, icns, jpe, gif, pbm, pcx, dcx, tif, bufr, jpf, j2k, gbr, pgm, dds, ftu, mpo, tga, flc, bmp, jfif, ico, mpeg, h5, fit, jpg, png, pdf, fits, ras, xbm, jpx, emf, im, sgi, ppm, grib, iim, palm, jpeg, bw, fli, jp2, pcd, rgb, eps, msp, jpc, wmf, mpg, tiff, psd, j2c, ftc'."]}

zhanziyang commented 6 years ago

So is the image in the right format as the message suggest?

Could you provide a demo using codepen/jsfiddle to reproduce this error?

rubencool commented 6 years ago

Hey Zhan Ziyang i had found solution for my problem. The issue was in your generate blob (). Only passing blob was not solution. On upload demo there was not a clear example for blob about passing filename. It takes three parameter. We also had to passed filename in order upload crop Image. Here is my solution for my code problem.

cropimage1

zhanziyang commented 6 years ago

Thank you for pointing that out. @rubencool

paolodina commented 4 years ago

well, just to point it out after spending hours... the third argument changes everything:

doesn't work

formData.append('mediaFile', blob)

works

formData.append('mediaFile', blob, 'mediafile.png')

@zhanziyang would it worth to add an example to the readme?

this.myCroppa.generateBlob(
  (blob) => {
    const formData = new FormData()
    formData.append('mediaFile', blob, 'mediafile.png')
    formData.append('mediaOrder', 0)
    formData.append('isGallery', true)

    // post api call...
    ....
  },
)