search

jaydenseric / apollo-upload-client

A terminating Apollo Link for Apollo Client that fetches a GraphQL multipart request if the GraphQL variables contain files (by default FileList, File, or Blob instances), or else fetches a regular GraphQL POST or GET request (depending on the config and GraphQL operation).
https://npm.im/apollo-upload-client
1.53k stars 156 forks source link

cropping image before uploading #28

Closed ablbol closed 7 years ago

ablbol commented 7 years ago

Hi, Thanks for this great library. I have a question. Is there a way to crop the image before uploading the image or should the image be cropped server side? I noticed that the library deals with File or FileList objects but if I crop the image client side, I am not sure how to change back to File object. Please share any library to crop images server side. Thanks

jaydenseric commented 7 years ago

Hmm. If you do the cropping client side you can export the canvas as a base64 string. You can use the string in a normal GraphQL request variable, and then use it to save an image on the server in the resolver.

To crop or otherwise manipulate images on the server, I suggest using Sharp.

jaydenseric commented 7 years ago

If it makes sense to, we could add Blob to the list of objects in extract-files considered files for upload to make uploading from canvas easier via toBlob. I guess blobs would have to upload with no filename and potentially no mime type.

n1ru4l commented 7 years ago

@ablbol You can use the File constructor to create a File object from a blob object (https://w3c.github.io/FileAPI/#file-constructor)

const file = new File([blob], `image.jpeg`)
jaydenseric commented 7 years ago

@n1ru4l nice.

Closing because the question is answered, but feel free to discuss more 🙂

ablbol commented 7 years ago

This is very helpful. Thanks

keeth commented 6 years ago

I have the same problem, trying to upload cropped images. I'm converting a data URI to a blob/file.

@n1ru4l's solution works in Chrome but doesn't appear to work in Webkit.

It seems like passing a Blob to formData.append is required.

smithaitufe commented 6 years ago

Please is this to say that if you crop an image, in my case, react native, upload won't work? Because I am experiencing an issue that I have reported here https://github.com/jaydenseric/apollo-upload-client/issues/64

Please what do you think?

Edit

I removed the ability to crop and I am still having the error

neyosoft commented 6 years ago

How can I resize the image on the server before saving to folder? I'll appreciate complete example too