-1

I am aware of this question-Fineuploader - add jqCrop. However my challenge is that i do not want to use a generic file input that add jCrop as a listener.I am a newbie with FineUploader.Can some expert confirm if this is the most appropriate steps to follow. 

form: {
   element:document.getElementById('fileinput_inline')
}

$('#image_input img').Jcrop({
    bgColor: 'black',
    bgOpacity: .6,
    setSelect: [0, 0, 100, 100],
    aspectRatio: 1,
    onSelect: imgSelect,
    onChange: imgSelect
});

  1. Use FineUploader Core form.element option to bind my file input to FineUpload

  2. Use FineUploader validation options to validate size,filetype, etc

  3. At the onSubmitted event ,retrieve the file id and use the drawThumbnail method to insert a preview in an image html element (<img id='image_input'/>)

  4. Introduce jCrop.

  5. Submit the cropped Blob to Fine Uploade uploader.addBlobs({blob: croppedImageAsBlob, name: "my cropped image.png"});

  6. Fire the upload to server

Community
  • 1
  • 1
user3110645
  • 59
  • 4
  • http://stackoverflow.com/help/how-to-ask – Ray Nicholus May 22 '15 at 19:06
  • I'll need to see what code you have so far so I can offer accurate help. – Mark Feltner May 22 '15 at 20:16
  • – user3110645 May 22 '15 at 20:34
  • I couldn't include all the codes because of limited space. But i have my java script from FineUploader samples. My challenge is how to pass the image to JCrop at the submitted event callback and also after cropping how to pass the canvas back to FineUploader. – user3110645 May 22 '15 at 20:50
  • Show us your code that attempts to solve a, b, c, and d. Then mention the _specific_ issues you are having with that code. Someone will be able to give you suggestions at that point. – Ray Nicholus May 22 '15 at 21:05
  • Step 1: var inputFile = document.getElementById('fileinput_inline');Step 2:inputFile.addEventListener('change', readData, false);Step 3function readData(evt) {} Ste 4: var uploader = new qq.FineUploaderBasic({..options .... Step 5: . – user3110645 May 22 '15 at 22:03
  • Hello, it appears my question is unclear. So i have decided to ask specific question. I know i can get a file id and file name from the onSubmittted Event, Now i want to get File object. I need this File reference, because i want to retrieve the data URI from it so that display an image. Also let me know if i can get the data URI directly from any of FineUploader events.I am a newbie with File Uploader and i have bought the license too.So bear with me if my question appears inconclusive. – user3110645 May 23 '15 at 21:51
  • Please edit your question, instead of posting your new question as a comment. – Ray Nicholus May 23 '15 at 21:56
  • I have switched to start using FineUploader UI .on('submitted', function (event, id, name, responseJSON) { $(this.drawThumbnail (id, document.getElementById('image_input'),200,true)); }); I am getting this error: Caught error in Fine Uploader jQuery event handler: this.drawThumbnail is not a function – user3110645 May 23 '15 at 23:40
  • Please stop posting code in comments – Ray Nicholus May 24 '15 at 00:25

1 Answers1

0

Your outlined steps look to be appropriate, but the selector tied to jcrop looks incorrect.

For this element: <img id='image_input'/>, your selector string should be '#image_input'.

Ray Nicholus
  • 19,538
  • 14
  • 59
  • 82